班級：北京前端訓練營7期講師：馮楠娜日期：2017年5月15日愛創課堂官網 ：www.icketang.comJS基礎............................................................................................................................................................ 1目錄................................................................................................................................................................ 2複習................................................................................................................................................................ 3一、 函數........................................................................................................................................................ 31.1 遞歸函數............................................................................................................................................ 31.2 變數的作用域..................................................................................................................................... 41.3 局部變數和全局變數........................................................................................................................... 41.4 作用域鏈............................................................................................................................................ 51.5 形參是局部變數.................................................................................................................................. 61.6 全局變數的應用.................................................................................................................................. 61.7 函數的作用域..................................................................................................................................... 71.8 閉包................................................................................................................................................... 7二、數組......................................................................................................................................................... 92.1 數組的概述......................................................................................................................................... 92.2 數組的長度....................................................................................................................................... 102.3 數組的遍歷....................................................................................................................................... 112.4 數組的收尾操作方法......................................................................................................................... 112.5 數組的拆分和合併............................................................................................................................ 122.6 刪除，插入，替換............................................................................................................................ 132.7 倒序和排序....................................................................................................................................... 14break:字面含義「找到我需要的東西，不在需要往下進行，結束循環」。continue：字面含義「這個結果不是我想要的立刻進行下一個測試」不管break還是continue只能管理自己當前的循環，不能管理外層的循環。如果想控制外層循環需要給一個標籤。函數：1 //函數聲明2 function 函數名(){3 結構體4 }5 //函數調用6 函數名();函數表達式：1 var 變數名 = function(){} // 匿名函數。函數聲明頭的提升。關鍵字function這種聲明函數可以進行聲明頭的提升。函數表達式不能進行函數聲明頭的提升，只能單純提升變數名。遞歸函數遞歸函數是在一個函數通過名字調用自身的情況下構成的。一個函數可以調用自身，這種現象叫做遞歸。1 // 遞歸函數，就是在函數內部調用自身函數2 function sum(a,b){3 console.log(sum(a,b) + b);4 }5 sum(3,4);應用：可以用遞歸處理一些數學問題。如斐波那契數列。斐波那契數列：1,1,2,3,5,8,13,21,34……1 // 書寫一個函數求，菲波那切數列的任意一項2 function feibo(n){3 for(var i = 1 ; i <= n ; i ++){4 if(n == 1 || n == 2){5 return 1;6 }else{7 return feibo(n - 1) + feibo(n - 2);8 }9 }10 }

變數的作用域在函數內定義的變數不能從函數之外的任何地方取得，變數僅僅在該函數的內部有定義。函數就是變數a的作用域，a只能在他的作用域內被訪問到，在作用域外面是不能被訪問到的。塊級作用域：{}包裹的就是塊級作用域，其他的計算機語言的情況。JS語言比較簡單，沒有塊級作用域。js里，只有函數能夠關住作用域。1 // 在函數內部定義的變數不能從函數外部任何地方取得2 function fun(){3 var a = 1;4 console.log(a);5 }6 fun();7 console.log(a);

局部變數和全局變數局部變數：在一個作用域（定義域）內定義的變數就是這個作用域內的局部變數。只能在作用域內被訪問到。全局變數：從廣義上來看，全局變數也是一種局部變數。全局變數定義在全局，所以也叫全局變數。可以在任何地方都被訪問到。1 // b是在全局內部定義的變數，是全局變數，可以在任何地方訪問到2 var b = 2;3 function fun(){4 // 在函數內部定義的變數是局部變數，只能在該作用域內訪問到5 var a = 1;6 console.log(a);7 }8 fun();9 console.log(b);10 console.log(a);

變數申明的原理：全局變數，在全局定義之後，會永久存在，任何時候，任何位置訪問，都能夠找到它。局部變數定義在函數內部的，函數定義的過程，並沒有真正的去定義這個局部變數，只有在執行函數的時候，才會立即定義這個局部變數，執行完之後，變數就被立即銷毀了，在其他的地方訪問變數的時候，找不到這個變數，所以會有一個引用錯誤，變數未定義。作用域鏈指的是我們變數查找的一個規律：我們可以在不同的作用域內使用相同的標識符去命名變數。我們在使用一個變數的時候，需要找到匹配的標識符，我們有重複的，用哪一個？如果在當前作用域有這個變數，就直接使用，如果當前作用域沒有這個變數定義，會一層一層的從本層往外依次查找，遇到第一個就直接使用。類似於就近原則。當遇見一個變數時，JS引擎會從其所在的作用域依次向外層查找，查找會在找到第一個匹配的標識符的時候停止。在多層嵌套的作用域中可以定義同名的標識符，發生「遮蔽效應」。1 // 全局變數2 var a = 1;3 function fun1(){4 var a = 2;5 function fun2(){6 var a = 3;7 console.log(a); //因為本層有定義直接輸出38 function fun3(){9 console.log(a); //本身沒有a定義，會從本層出發依次向外查找，當找到定義時，直接執行。310 }11 fun3();12 }13 fun2();14 }15 fun1();16 console.log(a); //1

如果變數聲明時，不寫var關鍵字，計算機會自動在全局作用域內給它進行一個聲明，局部變數就強制性的變成了全局變數。這種情況是不合理，會造成一個全局變數的污染。所以，定義變數必須寫var關鍵字。1 var a = 1;2 // 相當於3 // var a = 3;4 function fun1(){5 a = 2;6 function fun2(){7 a = 3;8 console.log(a); //因為本層有定義直接輸出39 function fun3(){10 console.log(a); //本身沒有a定義，會從本層出發依次向外查找，當找到定義時，直接執行。311 }12 fun3();13 }14 fun2();15 }16 fun1();17 console.log(a);

形參是局部變數形參是局部變數，形參的作用域是它定義的函數的內部。1 function fun(a){2 // 形參是局部變數3 console.log(a);4 }5 fun(1);6 console.log(a);

全局變數的應用①傳遞：全局變數可以在不同函數間通信。（相當於信號量）不同的函數同時控制我們的全局變數。全部變數不會重置也不會清空。1 // 定義一個全局變數2 var a = 1;3 // 定義一個自加的函數4 function jia(){5 console.log(++a);6 }78 // 定義一個自減函數9 function jian(){10 console.log(--a);11 }1213 jia(); //214 jia(); //315 jia(); //416 jian(); //317 jian(); //218 jian(); //119 jia(); //2

②同一個函數不同調用。累加：全局變數的值，不會被重置、清空。1 //全局變數，不會讓變數重置，或者清空2 var a = 1;3 function jia(){4 a += 4;5 console.log(a);6 }789 // 調用10 jia(); //511 jia(); //912 jia(); //13

函數的作用域函數作用域和變數類似，也是只能在函數聲明的地方使用，外部任何地方都不能訪問。1 function outer(){2 function inner(){3 console.log(1);4 }5 inner();6 }7 outer();8 inner(); //不能再outer的外部調用inner

閉包體會閉包：1 function outer(){2 var a = 1;3 function inner(){4 console.log(a);5 }6 return inner; //沒有小括弧，表示只輸出inner函數的定義，不會立即執行7 }8 // console.log(outer());9 var i = outer();10 // i內部存儲的是inner函數的地址。11 i();12 // 本層沒有a的定義，但是inner的作用域鏈存在.13 // 所以輸出1總結：inner函數把它自己內部的語句，和自己聲明時所處的作用域一起封裝成了一個密閉環境，我們稱為「閉包」。閉包是天生存在的，並不是我們通過某種方法做出來的。函數本身就是一個閉包。函數定義的時候，就能記住它的外部環境和內部語句，每次執行都會參考定義時的密閉環境。

案例1：1 // 案例12 function outer(x){3 function inner(y){4 console.log(x + y);5 }6 return inner;7 }8 var i = outer(3);9 // i = function inner(y){10 // console.log(3+y);11 // }12 i(5);13 i(7);

說明：初始定義inner函數的時候，是在out（3）執行時，所以x記住了一個3的值。閉包天生存在，並不需要什麼特殊的結構才存在，只不過我們必須要刻意地把函數放到其他的作用域中調用，才能明顯的觀察到閉包性質。案例2：1 function outer(x,y){2 function inner(x){3 console.log(x + y);4 }5 return inner;6 }78 var i = outer(2,3);9 // inner的外部環境10 // y = 3;11 // i = function inner(x){12 // console.log(x + y);13 // }14 i(5);15 //8案例3：1 function outer(){2 var i = 1;3 function inner(){4 return i++;5 }6 return inner;7 }8 var i = outer();9 console.log(i());10 console.log(i());11 console.log(i());結論：函數的閉包，記住了定義時所在的作用域，這個作用域中的變數不是一成不變的。1 function outer(){2 var i = 1;3 function inner(){4 return i++;5 }6 return inner;7 }8 var i = outer();9 var inn = outer();1011 console.log(i());12 console.log(inn());13 console.log(inn());14 console.log(inn());15 console.log(i());16 console.log(i());17 console.log(i());結論：我們可以認為，每次調用一個函數，都會產生新的閉包。新的閉包是指，語句全新，所處環境也是全新的。數組的概述數組就是表示一系列有序的數據的集合。數組的表示方法：[]。可以這樣認為只要看見方括弧就是一個數組。數組中每一個數據之間都用逗號隔開，最後一項沒有逗號。array：數組1 // 定義一個數組2 var arr = [1,2,4,5];3 console.log(arr[2]);使用索引(index)，也稱為下標，來精確的讀取、設置數組中的某一項。數組的下標從0開始。1 arr[index]; //讀取設置：arr[2] = 456;數組中每一項可以是不同的數據類型。通常我們習慣書寫相同的數據類型作為一組數組。數組的長度數組的數據時引用數據類型。1 // 數組的數據類型2 console.log(typeof arr);引用類型一般都有自己的屬性和方法；屬性：事物具有的特點。比如：人的高矮胖瘦。方法：就是事物的行為。比如：玩電腦，睡覺。我們可以使用打點的方法調用屬性。1 引用數據.屬性數組的長度用length屬性表示。直接打點調用。1 // 得到數組的長度2 console.log(arr.length);數組的最後一項：下標為數組長度減1.1 arr[arr.length - 1];如果下標超過arr.length - 1,值不存在，輸出undefined未定義。1 var arr = [1,23,45,2,56,1,67,89];2 // 數組的最大下標是length -1,當超過這個下標時輸出undefined3 console.log(arr[9]);

我們可以通過下標給某一項賦值。如果我們給下標超過arr.length - 1的項賦值，強制賦值，強制將數組長度拉長了。1 var arr = [1,23,45,2,56,1,67,89];2 arr[20] = 20;3 console.log(arr[20]);4 // 現在的數組長度是多少5 console.log(arr.length);

雖然長度加長了，但是中間沒有被賦值的項，還是undefined。arr.length也可以強制賦值，如果超過原來的長度，多出來的部分未賦值就是undefined，如果少於原來的長度，會把多出去的下標部分數據直接刪除。1 var arr1 = [1,2,45,67,2,5566,67,12];2 console.log(arr1.length);3 arr1.length = 5;4 console.log(arr1.length);5 console.log(arr1);

數組的遍歷我們可以通過某種方法，得到數組中的每一項。這就是遍歷。我們通過for循環進行數組的遍歷。1 var arr = [1,2,"號","",function(){},12,23,null,false];2 // 遍歷輸出數組中每一項3 for(var i = 0 ; i <= arr.length - 1 ; i ++){4 console.log(arr[i]);5 }

案例：arr = [2,4,6,7,8];求數組中每一項的階乘然後求和。1 // 案例2 var arr = [2,4,6,7,8];3 // 求階乘和4 // 累加器5 var sum = 0;6 for(var i = 0 ; i <= arr.length - 1 ; i ++){7 // 需要一個求階乘的函數8 sum += jiecheng(arr[i]);9 }10 console.log(sum);111213 // 階乘函數14 // 累乘器15 function jiecheng(a){16 var cheng = 1;17 for(var i = 1 ; i <= a ; i ++){18 cheng *= i;19 }20 return cheng;21 }數組的收尾操作方法push() 在數組末尾添加一個或多個元素，並返回數組操作後的長度。pop() 從數組移出最後一個元素，並返回該元素。shift() 從數組移出第一個元素，並返回該元素。unshift() 在數組開頭添加一個或多個元素，並返回數組的新長度。語法：數組對象，點語法調用push方法，後面加小括弧，括弧裡面的內容就是我們要在末尾添加的元素。添加的時候，可以添加多項數據，數據之間用逗號隔開即可。1 var arr = [1,2,3,4,5];2 //push()，是在最後增加一個或者多個元素，直接把元素寫在小括弧內，如果有多個數據用逗號隔開。3 //返回值是新數組的長度4 console.log(arr.push(6,7,[8,9]));5 console.log(arr);

1 //pop:刪除數組最後一項，並且返回刪除的數據2 var arr = [1,2,3,4,5];3 console.log(arr.pop());4 console.log(arr);14 //unshift:在數組開頭添加一個或多個元素，並返回數組的新長度。15 var arr = [1,2,3,4,5];16 console.log(arr.unshift(0));17 console.log(arr);14 //shift:刪除數組第一項，並且返回刪除的數據15 var arr = [1,2,3,4,5];16 console.log(arr.shift());17 console.log(arr);案例：1 // 小應用2 // 把最後一項增加到開頭3 var arr = [1,2,3,4,5];4 // 增加到開頭5 console.log(arr.unshift(arr.pop()));6 // [5,1,2,3,4]數組的拆分和合併①數組的合併concat()。concat()方法返回值是一個新數組，不改變原來的數組。1 var arr1 = [1,2,3,4,5,6];2 var arr2 = [7,8,9];3 var arrNew = arr1.concat(arr2);4 console.log(arrNew);5 console.log(arr1);

concat()參數非常隨意，可以是數組，也可以是散值。1 // concat()方法的參數非常隨意可以是數組也可以是散值2 var arr = [1,2,3,4,5,6];3 var arrNew = arr.concat(7,8,[9,10]);4 console.log(arrNew);

②數組的拆分slice()。slice(start,end)。對數組進行拆分返回的是一個新數組。通過數組的index進行拆分。start和end用數組下標表示，包括start值，不包括end值。是一個區間值1 var arr = [1,2,3,4,5,6,7,8];2 var arrNew = arr.slice(2,5); //從下標2開始截取一直到下標為5.（但是不包含5）3 console.log(arrNew);4 console.log(arr);

下標可以用負值，表示倒數第幾項。（倒數是直接從-1開始）。1 // 下標可以是負值2 var arr = [1,2,3,4,5,6,7,8];3 var arrNew = arr.slice(-6,-2); //表示從倒數第6項到倒數第3項4 console.log(arrNew);

還可以只寫start表示截取到最後。1 // 可以不寫end2 var arr = [1,2,3,4,5,6,7,8];3 var arrNew = arr.slice(4);4 console.log(arrNew);

1 // 負值也是可以2 var arr = [1,2,3,4,5,6,7,8];3 var arrNew = arr.slice(-6);4 console.log(arrNew);

刪除，插入，替換splice()方法。方法用於插入、刪除或替換數組的元素。語法：arrayObject.splice(index,howmany,element1,.....,elementX)紅色：必寫的參數。綠色：可選參數。index：表示刪除元素的起始位置的索引值。howmany：刪除的元素個數，如果為0，表示不刪除，後面有元素加入，表示插入的意思。如果有個數，表示刪除。element：表示要替換的新的元素。如果有，表示插入或替換，如果沒有，只能是刪除。返回值：由被刪除的元素組成的一個數組。如果沒有刪除元素，則返回空數組。原數組發生改變。1 // 刪除2 var arr = [1,2,3,4,5,6,7,8,9];3 console.log(arr.splice(2,3));4 // 會改變原數組5 console.log(arr);

1 // 插入2 var arr = [1,2,3,4,5,6,7,8,9];3 // howmany是0，element必須寫4 console.log(arr.splice(2,0,23,"你好"));5 console.log(arr);

1 // 替換2 var arr = [1,2,3,4,5,6,7,8,9];3 // 返回的是刪除的數據4 console.log(arr.splice(2,3,100,101));5 console.log(arr);

index可以寫負值。1 // index可以是負值2 var arr = [1,2,3,4,5,6,7,8,9];3 console.log(arr.splice(-5,3));

倒序和排序倒序：reverse（）.顛倒數組元素的順序：第一個變成最後一個，最後一個變成第一個。1 var arr = [1,2,"你好",4,5,null];2 console.log(arr.reverse());

排序：sort() 給數組元素排序。默認情況：小括弧內不傳任何參數。排序依據：將所有的數組的數據都轉成字元串，然後根據字元編碼順序排序。數字，大寫字母，小寫字母。1 var arr = [12,2,"AB",4,5,null,"x","a"];2 console.log(arr.sort());

sort方法有一個參數叫做比較函數。如果指明了 compareFunction ，那麼數組會按照調用該函數的返回值排序。記 a 和 b 是兩個將要被比較的元素（自定義升序排列）：若 a 小於 b，在排序後的數組中 a 應該出現在 b 之前，則返回一個小於 0 的值。若 a 等於 b，則返回 0。若 a 大於 b，則返回一個大於 0 的值。自定義降序排列相反。1 // 自定義降序排序2 var arr = [12,34,67,23,78,100,3,34];345 console.log(arr.sort(function compareFunction(a,b){6 if(a > b){7 return -2;8 }else if(a == b){9 return 0;10 }else{11 return 1;12 }13 }));

2.8 join（）將數組整體轉為一個字元串。如果傳遞參數，參數會作為連接符，將每一項數據連接起來。1 // join()方法將數組轉換為字元串2 var arr = [1,2,3,4,5,6];3 // join傳遞的參數鏈接每一項數據4 console.log(arr.join("+"));5 console.log(arr.join("文字"));6 // join可以不寫參數，默認以逗號連接。7 console.log(arr.join());

1111111111
推薦閱讀：