班級:北京前端訓練營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
推薦閱讀:

查看原文 >>
相关文章