Javascript學習筆記

2019-11-09 18:05:50

字體：大中小

來源：轉載

供稿：網友

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

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

數據類型和變量

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

當一個變量不是定義在function里面的時候，那么它就是一個全局的變量，作用域就是全局?？梢允褂脀indows來調用。

需要注意的是，函數里面的變量一定要 var 聲明，不然就會變成一個全局變量。

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

這就是一個高階函數，函數中的第三個參數就是一個函數。例如，add（-5，6，abs），運行的結果是11

map也是一個高階函數，它對數組array起作用，可以對array里面的每一個元素做相應的動作。

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

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

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

sort 排序。它可以對數組進行排序，也可以直接調用數組的sort() 方法進行排序，但不同的是，數組直接調用sort的話，排序的方式會出現千差萬別，例如一個里面是數字的數組，調用sort排序的話，會將數字先轉化成string再排序，也就是，10 會排在 2 的前面，這就尷尬了，還有一點，小寫的字母會排在大寫字母的后面，例如 apple 會排在Zoo 的后面因為排序的時候是按照ascll碼表來排序的，自然就排在了后面，為了解決掉這些亂七八糟的情況，我們可以直接使用sort的高階函數來進行排序，例如：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]，這樣就可以實現數字的排序，相應的，如果是按照字母來排序的話，可以全部轉化成大寫或者小寫來排序（轉化成大寫 toUpperCase(),）

高階函數不僅可以將函數作為一個參數傳遞進去，還可以將一個函數作為返回值進行返回。

這就是典型的將函數作為返回值的情況。就上面這個例子，如果再次調用一下 var fun1=sun(ssy)；得到一個新的函數fun1 和fun 是兩個不同的函數，當你對它們做 === 的操作的時候，返回來的是false，但對函數 fun fun1 的返回值做 === 的操作，返回的是 true fun() === fun1();//true

閉包

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

所以，閉包就是定義在一個函數里面的函數，本質上，閉包就是連接函數里面和外面的一個橋梁

箭頭函數

箭頭函數相當于匿名函數，只用一個箭頭來表示

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

也就是說，1，省略了 function 的聲明 2，參數也省略了用小括號包裹 3，函數體也省略了用大括號包裹 4，返回也省略了return 關鍵字。

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

this，箭頭函數中的this和普通函數的this是有卻別的，普通函數里面的this是在運行的時候決定的，也就是誰調用，this指向的就是誰，而箭頭函數是，誰綁定，this就指向誰。

Generator

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

Js標準對象

javascript中，標準的對象有，Number，String，Boolean，undefine，function，Object

number，string，boolean，undefine，function是可以用typeof 來判斷的。 object就不行了，因為數組和null都是Object,如果要判斷數組可以使用Array.isArray(arr) 來判斷，如果判斷null可以使用 ===

對象的包裝

Number，String，Boolean都有其對應的類，類似于java的裝箱拆箱。但裝箱后，那么數據類型就不再是基本的標準類型了，而是Object了。所以，裝箱后，再去判斷是否相等，都是false。123 === new Number(123); //false 因為前面的是數字類型，而后面的是Object類型。