Javascript學(xué)習(xí)筆記

2019-11-09 17:04:51

字體：大中小

供稿：網(wǎng)友

首先先附上我看的這份教程吧！

http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

數(shù)據(jù)類型和變量

Nunber包含整數(shù)，浮點(diǎn)數(shù)，負(fù)數(shù)。其中 NaN表示不是一個(gè)數(shù)字， Infinity表示無(wú)限大，超出了js的計(jì)算范圍；字符串可以使用單引號(hào)，也可以使用雙引號(hào)引起來(lái)，沒(méi)有字符，只有字符串；布爾值true false與或非&& || ！比較運(yùn)算符 > < == === 其中 == 和 === 的區(qū)別是，==會(huì)自動(dòng)轉(zhuǎn)換數(shù)據(jù)類型， ===不會(huì)自動(dòng)轉(zhuǎn)換類型（false==0；//true，false===0；//false）特殊的情況:NaN === NaN；//false 而 isNaN（NaN）；//true浮點(diǎn)數(shù)的比較不能直接比較，直接比較返回來(lái)的是false，要取他們之間的絕對(duì)值，小于某個(gè)閥值；null 和 undefine null表示為空，undefine表示未定義，類似于java的未初始化數(shù)組，聲明數(shù)組的兩種方式 var arr=[23,56,48]; var arr = new array(1,63,45);對(duì)象，對(duì)象是由一組鍵值對(duì)組成的無(wú)序的集合，類似于java的map集合。var person={ name:'zhangsan',age:20}對(duì)象取值的時(shí)候以.的方式取值，例如 person.name字符串常用的api取某個(gè)字符和數(shù)組一樣，var s = "abc"; s[2] 的值是 c;字符串一旦定義，是不可改變的，var str="asdfg";str[2]="5";alert(str); 最后彈出來(lái)的還是asdfgtoUpperCase toLowerCase 將字符串轉(zhuǎn)為大寫(小寫)indexOf 搜索指定字符串的位置。substring 截取字符串，傳入1個(gè)參數(shù)時(shí)指從這里截取到結(jié)尾，兩個(gè)參數(shù)表示從哪里到哪里。數(shù)組常用的api取值 arr[2] 取第三個(gè)值，如果長(zhǎng)度為3，你下標(biāo)寫的是3，它不會(huì)報(bào)數(shù)組越界，而是返回給你一個(gè)undefine賦值，和java一樣，arr[2]="dsa";同樣，賦值也不會(huì)報(bào)越界，如果超過(guò)了，會(huì)自動(dòng)擴(kuò)展，例如一個(gè)數(shù)組長(zhǎng)度為3，那么arr[5]="sad"; 那么執(zhí)行完這句后，數(shù)組的長(zhǎng)度會(huì)自動(dòng)的擴(kuò)展到6，而 arr[3] arr[4] 的值為undefine取長(zhǎng)度，直接使用數(shù)組的length屬性就可以取到數(shù)組的長(zhǎng)度。indexOf 取某個(gè)元素的索引，沒(méi)有則返回-1；這個(gè)時(shí)候需要注意的是數(shù)據(jù)類型要一一對(duì)應(yīng)，數(shù)組里面的是30，你indexOf("30"); 返回來(lái)的是-1；slice()截取，和字符串的substring一樣，當(dāng)此函數(shù)不傳任何參數(shù)的時(shí)候，將改數(shù)組復(fù)制一份。push 和 pop push表示向數(shù)組的末尾添加若干個(gè)元素，pop則表示從該數(shù)組的結(jié)尾刪除一個(gè)元素。unshift 和 shift 和push，pop 一樣。unshift表示往頭部添加，shift表示從開頭刪除。sort() 排序，直接調(diào)用的話，按照自然排序。reverse() 反轉(zhuǎn)splice 修改數(shù)組， arr.splice(2, 3, 'Google', 'Facebook');// 從索引2開始刪除3個(gè)元素,然后再添加兩個(gè)元素,arr.splice(2, 2); // 只刪除,不添加,arr.splice(2, 0, 'Google', 'Facebook'); // 只添加,不刪除concat拼接數(shù)組，var arr = ['A', 'B', 'C'];arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]join()var arr = ['A', 'B', 'C', 1, 2, 3];arr.join("-"); // 'A-B-C-1-2-3'; join里面不能不傳。可以傳""對(duì)象：對(duì)象和java中的map集合類似，寫法和C的結(jié)構(gòu)體有點(diǎn)類似。對(duì)象以鍵值對(duì)的形式出現(xiàn)，訪問(wèn)屬性的時(shí)候用.來(lái)表示。屬性名和屬性值之間用分號(hào)來(lái)表示。對(duì)象的屬性名必須是一個(gè)有效的變量名，如果是一個(gè)包含有特殊符號(hào)的變量，必須用單引號(hào)引起來(lái)，否則這個(gè)屬性無(wú)法使用。獲取屬性的兩種方式：entity.key entity['key'] 如果key里面有特殊的符號(hào)，必須使用第二種方式獲取。in 判斷某個(gè)屬性是否存在，‘key’ in entity 判斷entity中是否存在key屬性。存在則true，不存在則falsehasOwnPRoperty() 判斷自身是否存在某個(gè)屬性。entity.hasOwnProperty('key'); 和 in 不一樣的是，in可以判斷它父對(duì)象的屬性，任何對(duì)象最終都繼承自O(shè)bject。if-else和java沒(méi)啥區(qū)別啊，支持嵌套，支持else if循環(huán)for 和 java中的好像沒(méi)啥區(qū)別啊。for in 可以用來(lái)循環(huán)實(shí)體，用來(lái)把一個(gè)對(duì)象的所有屬性都循環(huán)的取出來(lái)。for(var key in entity){if(entity.hasOwnProperty('key')){alert(entity.[key])}}for in 循環(huán)數(shù)組。注意的是，循環(huán)數(shù)組得到的是String，而不是Number var a = ['A', 'B', 'C'];for (var i in a) { alert(i); // '0', '1', '2' alert(a[i]);//'A','B','C'}循環(huán)還有while 和 do-whileMap Map和java一樣，key不可以重復(fù)。Map的初始化：var map = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);map.get('key')；獲取map.set('key',value); 設(shè)置，如果這個(gè)鍵對(duì)應(yīng)的值已存在，則覆蓋。map.delete('key'); 刪除Set 和 java 中的set類似set的初始化：var s2 = new Set([1, 2, 3]); // 含1, 2, 3set.add();添加添加的時(shí)候可以重復(fù)添加，但不會(huì)有效果，也不會(huì)覆蓋。set.delete();刪除，Iterable可迭代的。array map set 都是屬于iterableiterable 可以用 for of 來(lái)循環(huán)遍歷var a = ['A', 'B', 'C'];var s = new Set(['A', 'B', 'C']);var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);for (var x of a) { // 遍歷Array alert(x);}for (var x of s) { // 遍歷Set alert(x);}for (var x of m) { // 遍歷Map alert(x[0] + '=' + x[1]);}function函數(shù)function abs(x){if(x>0){return x;}else{return -x;}}function 函數(shù)的關(guān)鍵字，函數(shù)不需要指定返回值類型abs 函數(shù)名x 參數(shù)，如果有多個(gè)參數(shù)則要用逗號(hào)分開，參數(shù)不用指定類型大括號(hào)之間的是函數(shù)體函數(shù)執(zhí)行到return則返回，不再執(zhí)行下去。var abs =function(x){if(x>0){return x;}else{return -x;}};函數(shù)的第二種定義的方式，將一個(gè)匿名的函數(shù)賦值給一個(gè)變量，兩種定義的方式實(shí)際上是一致的，不同的是，第二種需要在最后的大括號(hào)后面跟上一個(gè)分號(hào)，表示結(jié)束了。函數(shù)的調(diào)用，調(diào)用函數(shù)和java差不多，函數(shù)名，然后小括號(hào)里面跟上參數(shù)。當(dāng)參數(shù)個(gè)數(shù)大于函數(shù)接受的參數(shù)個(gè)數(shù)的時(shí)候，后面的會(huì)直接忽略掉，當(dāng)傳入的參數(shù)個(gè)數(shù)小于函數(shù)可接受的參數(shù)個(gè)數(shù)的時(shí)候，會(huì)自動(dòng)undefine補(bǔ)齊。argument 參數(shù)，它是所傳進(jìn)去函數(shù)的參數(shù)集。它只在函數(shù)中使用，使用起來(lái)和數(shù)組差不多，但不是一個(gè)數(shù)組。函數(shù)接受的參數(shù)個(gè)數(shù)為3個(gè)，但調(diào)用的時(shí)候傳進(jìn)去2個(gè)，那么argument里面就有2個(gè)，而不是3個(gè)。所以。argument實(shí)際上是參數(shù)的副本。是實(shí)際傳遞進(jìn)去的。因?yàn)閖s是不限制參數(shù)的傳遞的個(gè)數(shù)的，所以argument經(jīng)常用來(lái)判斷傳進(jìn)去的參數(shù)的個(gè)數(shù)，來(lái)做進(jìn)一步的。。rest 可變參數(shù)，函數(shù)可以接受一個(gè)個(gè)數(shù)可變的參數(shù)，其實(shí)就是一個(gè)數(shù)組，function abc（x，y，...rest）這個(gè)函數(shù)除了接受x和y兩個(gè)參數(shù)外，還接收一個(gè)rest參數(shù)，函數(shù)調(diào)用的時(shí)候和其他一樣。當(dāng)調(diào)用的時(shí)候只傳遞兩個(gè)參數(shù)的時(shí)候，rest為一個(gè)空數(shù)組，當(dāng)調(diào)用的時(shí)候傳遞3個(gè)參數(shù)的時(shí)候，那就是長(zhǎng)度為1的數(shù)組。rest必須是函數(shù)中最后一個(gè)參數(shù)，且必須前面有...函數(shù)的作用域js中，函數(shù)支持嵌套。也就是函數(shù)里面可以有函數(shù)。里面函數(shù)可以訪問(wèn)外面函數(shù)的變量，外面函數(shù)就不能訪問(wèn)里面函數(shù)的變量。如果函數(shù)的名字重復(fù)，則使用本函數(shù)里面的。全局作用域

當(dāng)一個(gè)變量不是定義在function里面的時(shí)候，那么它就是一個(gè)全局的變量，作用域就是全局。可以使用windows來(lái)調(diào)用。

需要注意的是，函數(shù)里面的變量一定要 var 聲明，不然就會(huì)變成一個(gè)全局變量。

方法在一個(gè)對(duì)象中綁定函數(shù)，稱之為這個(gè)對(duì)象的方法。例如：var xiaoming={name:'xiaoming',birth:1990,age:function(){var y = new Date().getFullYear();return y-this.birth;}};上面的例子，age是匿名function計(jì)算出來(lái)的，這有別于其他，這樣我們就可以做更多的事情了其中例子中有一個(gè)關(guān)鍵字 this this到底是啥？this指向的是調(diào)用函數(shù)的對(duì)象。高階函數(shù)函數(shù)接收變量，變量可以指向函數(shù)，那么一個(gè)可以接收函數(shù)作為變量的函數(shù)就是高階函數(shù)。function add（x，y，f）{return f(x)+f(y);}

這就是一個(gè)高階函數(shù)，函數(shù)中的第三個(gè)參數(shù)就是一個(gè)函數(shù)。例如，add（-5，6，abs），運(yùn)行的結(jié)果是11

map也是一個(gè)高階函數(shù)，它對(duì)數(shù)組array起作用，可以對(duì)array里面的每一個(gè)元素做相應(yīng)的動(dòng)作。

例如 array.map(fun);這里是指，對(duì)數(shù)組array里面的每個(gè)元素都調(diào)用一下fun函數(shù)，生成一個(gè)新的數(shù)組，例如array=[1,2,3]; fun = function(x){return x*x} 那么生成的新的數(shù)組那就是[1,4,9],對(duì)原數(shù)組中的每一個(gè)元素做平方的操作。

reduce 也是一個(gè)高階函數(shù)，也對(duì)array起作用，指對(duì)array里面的元素做一些動(dòng)作，使之最后得到一個(gè)結(jié)果，例如我要對(duì)數(shù)組[1,2,3] 里面的每一個(gè)元素加起來(lái)，也就是累加。那么可以使用reduce。例如：var arr = [1, 3, 5, 7, 9]; arr.reduce(function (x, y) { return x + y;}); // 25

filter 同樣是一個(gè)對(duì)array起作用的一個(gè)高階函數(shù)，它可以過(guò)濾掉一些元素，保留一些元素形成一個(gè)新的數(shù)組。是否保留某個(gè)元素由傳遞進(jìn)去的函數(shù)的返回的true或者false決定，那么，傳遞進(jìn)去的函數(shù)的返回值就必須是一個(gè)boolean類型的返回值。例：var arr=[1,2,3,4]; arr.filter(function (x) { return x % 2 !== 0; }); 得到的新的數(shù)組為[1,3]

sort 排序。它可以對(duì)數(shù)組進(jìn)行排序，也可以直接調(diào)用數(shù)組的sort() 方法進(jìn)行排序，但不同的是，數(shù)組直接調(diào)用sort的話，排序的方式會(huì)出現(xiàn)千差萬(wàn)別，例如一個(gè)里面是數(shù)字的數(shù)組，調(diào)用sort排序的話，會(huì)將數(shù)字先轉(zhuǎn)化成string再排序，也就是，10 會(huì)排在 2 的前面，這就尷尬了，還有一點(diǎn)，小寫的字母會(huì)排在大寫字母的后面，例如 apple 會(huì)排在Zoo 的后面因?yàn)榕判虻臅r(shí)候是按照ascll碼表來(lái)排序的，自然就排在了后面，為了解決掉這些亂七八糟的情況，我們可以直接使用sort的高階函數(shù)來(lái)進(jìn)行排序，例如：var arr = [10, 20, 1, 2]; arr.sort(function (x, y) {if (x < y) { return -1;} if (x > y) {return 1;} return 0;}); // [1, 2, 10, 20]，這樣就可以實(shí)現(xiàn)數(shù)字的排序，相應(yīng)的，如果是按照字母來(lái)排序的話，可以全部轉(zhuǎn)化成大寫或者小寫來(lái)排序（轉(zhuǎn)化成大寫 toUpperCase(),）

高階函數(shù)不僅可以將函數(shù)作為一個(gè)參數(shù)傳遞進(jìn)去，還可以將一個(gè)函數(shù)作為返回值進(jìn)行返回。

這就是典型的將函數(shù)作為返回值的情況。就上面這個(gè)例子，如果再次調(diào)用一下 var fun1=sun(ssy)；得到一個(gè)新的函數(shù)fun1 和fun 是兩個(gè)不同的函數(shù)，當(dāng)你對(duì)它們做 === 的操作的時(shí)候，返回來(lái)的是false，但對(duì)函數(shù) fun fun1 的返回值做 === 的操作，返回的是 true fun() === fun1();//true

閉包

在js中，方法里面可以讀取全局的變量，而在方法外面是不能訪問(wèn)方法里面定義的變量的，所以，要在外面訪問(wèn)方法里面的變量，這就是函數(shù)的閉包。

所以，閉包就是定義在一個(gè)函數(shù)里面的函數(shù)，本質(zhì)上，閉包就是連接函數(shù)里面和外面的一個(gè)橋梁

箭頭函數(shù)

箭頭函數(shù)相當(dāng)于匿名函數(shù)，只用一個(gè)箭頭來(lái)表示

例如 function(x){return x*x;} 可以寫成這樣 x => x*x;

也就是說(shuō)，1，省略了 function 的聲明 2，參數(shù)也省略了用小括號(hào)包裹 3，函數(shù)體也省略了用大括號(hào)包裹 4，返回也省略了return 關(guān)鍵字。

但不是所有的箭頭函數(shù)都可以這么省略的，function是可以省略的，其他需要注意的是1，函數(shù)體超過(guò)一行的時(shí)候就要用大括號(hào)括起來(lái)，并且return也不能省了；2，參數(shù)是兩個(gè)或者兩個(gè)以上，也要用小括號(hào)括起來(lái)，沒(méi)有參數(shù)也要用小括號(hào)；3，js函數(shù)的返回值是可以返回一個(gè)對(duì)象的，所以，當(dāng)一個(gè)函數(shù)返回一個(gè)對(duì)象的時(shí)候。例如 function(x){return {name:x}} 這個(gè)函數(shù)，返回的是一個(gè)對(duì)象，這個(gè)對(duì)象中只有一個(gè)屬性為name，那么使用箭頭函數(shù)就不能這樣寫。x =>{name:x} 而是要把這個(gè)對(duì)象用小括號(hào)包起來(lái)，也就是這樣 x => ({name:x})

this，箭頭函數(shù)中的this和普通函數(shù)的this是有卻別的，普通函數(shù)里面的this是在運(yùn)行的時(shí)候決定的，也就是誰(shuí)調(diào)用，this指向的就是誰(shuí)，而箭頭函數(shù)是，誰(shuí)綁定，this就指向誰(shuí)。

Generator

generator是一個(gè)新的數(shù)據(jù)類型，和方法差不多，不同的是，方法每次只能返回一個(gè)，而generator能夠返回多次。如果我們要返回多個(gè)參數(shù)的話，那么就要用到數(shù)組，一次性的返回多個(gè)參數(shù)，而generator不用，可以一次一次的返回，這就是他們最大的區(qū)別，一次一次返回和一次返回全部也有千差萬(wàn)別的，一次一次的返回可以做到實(shí)時(shí)性，而一次返回多個(gè)，就要等到函數(shù)全部執(zhí)行完畢才能接收到返回值。generator的聲明和函數(shù)差不多，只是多了個(gè)* 函數(shù)的聲明是：function 而generator 的聲明是function* 。generator也是遇到return的時(shí)候就結(jié)束函數(shù)，中間返回?cái)?shù)據(jù)則使用yield，當(dāng)執(zhí)行到y(tǒng)ield的時(shí)候，函數(shù)就暫停了，等到下一個(gè)返回的時(shí)候才繼續(xù)執(zhí)行。還有一點(diǎn)區(qū)別是，函數(shù)調(diào)用是這樣的： fun(s) fun為函數(shù)名，s為參數(shù)。而generator調(diào)用是這樣的 var f = fun(s); f.next()；調(diào)用next的時(shí)候才是正式的調(diào)用，當(dāng)執(zhí)行到y(tǒng)ield的時(shí)候就暫停了，等到下一次的調(diào)用，當(dāng)函數(shù)已經(jīng)執(zhí)行完畢了，也就是執(zhí)行到return的時(shí)候，就不要再繼續(xù)調(diào)用next了，其實(shí)generator的返回的時(shí)候是這樣的[value:0,done:false]，其實(shí)返回的是一個(gè)對(duì)象，該對(duì)象里面有兩個(gè)屬性，一個(gè)是要返回的數(shù)據(jù)value，一個(gè)是返回是否已經(jīng)全部完成done，當(dāng)返回的done是true的時(shí)候，函數(shù)就執(zhí)行完畢了。所以，執(zhí)行g(shù)enerator的時(shí)候有一種類似于java中for each 循環(huán)的方式：for...of... 來(lái)循環(huán)迭代對(duì)象，就變成了這樣 for(var v of fun(3)){...函數(shù)體...}，這樣我們就可以在函數(shù)體里面對(duì)v做操作了。

Js標(biāo)準(zhǔn)對(duì)象

javascript中，標(biāo)準(zhǔn)的對(duì)象有，Number，String，Boolean，undefine，function，Object

number，string，boolean，undefine，function是可以用typeof 來(lái)判斷的。 object就不行了，因?yàn)閿?shù)組和null都是Object,如果要判斷數(shù)組可以使用Array.isArray(arr) 來(lái)判斷，如果判斷null可以使用 ===

對(duì)象的包裝

Number，String，Boolean都有其對(duì)應(yīng)的類，類似于java的裝箱拆箱。但裝箱后，那么數(shù)據(jù)類型就不再是基本的標(biāo)準(zhǔn)類型了，而是Object了。所以，裝箱后，再去判斷是否相等，都是false。123 === new Number(123); //false 因?yàn)榍懊娴氖菙?shù)字類型，而后面的是Object類型。