JavaScript高級程式設計——學習筆記（一）

今天， 2017.3.17開始利用課餘時間仔細學習《JavaScript高級程式設計》，將需要掌握的知識點記錄下來，爭取把書裡的所有代碼敲一遍並掌握。

1、識別字命名最好是第一個字母小寫，剩下每個單詞的首字母大寫，如：firstSecond、myCar

2、var定義的變數是作用域裡的區域變數，若在函數中定義，函數退出後就會被銷毀

function test{ var message = "hi"; } test; alert(message);//錯誤若在函數裡定義是省略var，則會成為全域變數，但不推薦這樣做，不利於維護，在嚴格模式下會報錯 function test{ message = "hi";//全域變數 } test; alert(message);//"hi"
var car = null; alert(typeof car); //"object"

4、ECMAscript中所有函數的參數都是按值傳遞的，也就是說，把函數外部的值複製給函數內部的參數，就和把值從一個變數複製到另一個變數一樣。

function setName(obj){ obj.name = "Demon"; var obj = new Object; obj.name = "Kalus"; } var person = new Object; setName(person); alert(person.name);//Demon } //因為參數物件是按值傳遞的，即使在函數內部修改了參數的值，但原始的引用仍然保持不變。 //當在這個函數內部重寫obj時，這個變數引用的就是一個局部物件了，而這個局部物件會在函數執行完畢後立即被銷毀。

5、為了優化記憶體佔用，一旦資料不再使用時，最好將其值設為null來釋放引用（解除引用），適用於大多數全域變數和全域變數的屬性，區域變數會在它們離開執行環境時自動解除引用。

function createPerson(name){ var localPerson = new Object; localPerson.name = name; return localPerson; } var globalPerson = createPerson("Kalus"); alert(globalPerson.name); globalPerson = null;//不需要它時手動解除，解除值的引用並不意味著自動回收該值所佔用的記憶體，真正作用是讓值脫離執行環境，以便垃圾收集器下次運行時將其收回。

6、陣列中的棧方法push和pop

push方法可以接受任意數量的參數，

把它們逐個添加到陣列末尾，並返回修改後陣列的長度。

pop方法是從陣列末尾移除最後一項，減小陣列的length值，然後返回移除的項。

var arr = ;

7、陣列佇列方法shift

能夠移除數組中的第一個項並返回該項，同時將陣列長度減1。結合使用shift和push方法，可以像使用佇列一樣使用陣列。

var arr = new Array; var count = arr.push("red","black","green"); alert(count);//3 var item = arr.shift; alert(item);//red alert(arr.length);//2 //移除了第一項後， black變為第一項， green變為第二項，長度變為2

8、陣列佇列方法unshift

能在陣列前端添加任意個項並返回新陣列的長度。同時使用unshift和pop方法可以從相反方向來類比佇列。

var arr = new Array; var count = arr.unshift("red","black"); alert(count);//2 count = arr.unshift("orange"); alert(arr);//orange,red,black var item = arr.pop; //取得最後一項 alert(item);//black alert(arr.length);//2

9、重排序方法reverse反轉陣列項順序

var values = [1,0,13,4,5]; values.reverse; alert(values);//5,4,13,0,1

10、重排序方法sort預設按昇冪排序陣列項，按字串排序，即使陣列每一項都是數值。

var values = [1,0,13,4,5]; values.sort; alert(values);//0,1,13,4,5

sort方法可以接收一個比較函數作為參數，以便指定哪個值位於哪個值前面

一個簡單的昇冪比較函數：

var values = [1,0,13,4,5]; values.sort(compare); alert(values);//0,1,4,5,13 function compare(value1,value2){ if(value1 value2){ return 1; }else{ return 0; } }

若要產生降冪的排序結果，只要交換比較函數返回值即可。

對於數數值型別或者valueOf方法會返回數數值型別的物件類型，可以使用一個更簡單的比較函數：

function compare(value1,value2){ return value1 - value2; }

11、操作方法concat基於當前陣列中所有項創建一個新陣列。該方法會創建一個陣列副本，將接收到的參數添加到陣列的末尾，最後返回新構成的陣列，

沒有傳參數時直接複製當前陣列並返回副本。

var colors = ["red","black","orange"]; var colors1 = colors.concat("yellow",["brown","blue"]); alert(colors1);//red,black,orange,yellow,brown,blue

12、push和concat區別

push 的定義是：向陣列的末尾添加一個或更多元素，並返回新的長度。該方法會改變陣列的長度。

concat 的定義是：連接兩個或更多的陣列，並返回結果。該方法不會改變現有的陣列，而僅僅會返回被連接陣列的一個副本。

concat可用來連接兩個陣列：

var a = [1,2]; var b = [3,4,5]; var c = a.concat(b); alert(c);//1,2,3,4,5

13、操作方法slice

接收一或兩個參數，

即要返回項的起始和結束位置，不影響原陣列。

var colors = ["red","orange","blue","black","green"]; var colors1 = colors.slice(2); alert(colors1);//blue,black,green var colors2 = colors.slice(2,4); alert(colors2);//blue,black (不包括最後一項)
var colors3 = colors.slice(-2,-1);//black

14、操作方法splice

1.刪除：可以刪除陣列中任意數量的項，兩個參數

如：splice(0,2)會刪除陣列中前兩項

2.插入：向指定位置插入任意數量的項，三個參數：起始位置、0（要刪除的項數）、要插入的項，如要插入多個項，可在傳入任意多個項。

如：splice(2,0,"red","blue")會從當前陣列的位置2開始插入兩個字串。

3.替換：向指定位置插入任意數量的項，且同時刪除任意數量的項，三個參數：起始位置、要刪除的項數、要插入的項，插入的項不必與刪除的項數相等

如：splice(2,1,"red","blue")會刪除當前陣列位置2的項，再從位置2開始插入兩個字串

splice方法始終都會返回一個陣列，該陣列包含從原陣列中刪除的項，沒有刪除返回空陣列

var colors = ["red","orange","blue"]; var removed = colors.splice(0,1);// 刪除一項，第一項 alert(colors);//orange,blue alert(removed);//red removed = colors.splice(1,0,"black","white"); alert(colors);//orange,black,white,blue alert(removed);//返回空陣列 removed = colors.splice(1,1,"green","yellow"); alert(colors);//orange,green,yellow,white,blue alert(removed);//black

15、位置方法indexOf和lastindexOf

兩個參數：要查找的項、查找起點位置的索引（可選）

返回要查找的項在陣列中的位置，未找到返回-1，要查找的項使用全等操作符（===）

var number = [1,2,3,4,5,4,3,2,1]; alert(number.indexOf(4));//3 alert(number.lastIndexOf(4));//5 alert(number.indexOf(4,4));//5 alert(number.lastIndexOf(4,4));//3 var person = {name:"Kalus"}; var people = [{name:"Kalus"}]; var morePeople = [person]; alert(people.indexOf(person));//-1 alert(morePeople.indexOf(person));//0

16、反覆運算方法

every：對陣列中每一項運行給定函數，如果該函數對每一項都返回true，則返回true

filter：對陣列中每一項運行給定函數，返回該函數會返回true的陣列

forEach：對陣列中每一項運行給定函數，這個方法無返回值

map：對陣列中每一項運行給定函數，返回每次函式呼叫的結果組成的陣列

some：對陣列中每一項運行給定函數，如果該函數對任意一項返回true，則返回true

以上方法不會修改陣列中包含的值。

每個方法都接收兩個參數：要在每一項上運行的函數、運行該函數的作用域物件---影響this的值（可選）

傳入這些方法中的函數接收三個參數：陣列項的值、該項在陣列中的位置、陣列物件本身

17、歸併方法reduce和reduceRight

都會反覆運算陣列的所有項，然後構建一個最終返回的值，reduce方法從陣列第一項開始，reduceRight方法從陣列最後一項開始

兩個參數：在每一項上調用的函數、作為歸併基礎的初始值（可選）

傳給reduce和reduceRight的函數接收4個參數：前一個值、當前值、項的索引、陣列物件，

這個函數返回的任何值都會作為第一個參數自動傳給下一項。

第一次反覆運算發生在陣列的第二項上，因此第一個參數是陣列的第一項（prev），第二個參數就是陣列的第二項(curent)

使用reduce方法可以執行求數值中所有值之和的操作，如：

var values = [1,2,3,4,5]; var sum = values.reduce(function(prev,cur,index,array){ return prev + cur; }); alert(sum);//15

第一次執行上面回呼函數時，prev是1，cur是2。第二次prev是3（1加2的結果），cur是3（陣列第三項）。

這個過程持續到把陣列中每一項都訪問一遍，最後返回結果。

reduceRight作用類似，只不過方向相反。

18、Function類型

函數是物件，函數名實際上就是一個指向函數物件的指標。

由於函數名僅僅是指向函數的指標，因此函數名與包含物件指標的其他變數沒什麼不同，換句話說，

一個函數可能會有多個名字。如：

function sum(num1,num2){ return num1 + num2; } alert(sum(10,10));//20 var anotherSum = sum;//將sum的值賦給anotherSum，注意不帶圓括號的函數名是訪問函數指標，而非調用函數 alert(anotherSum(10,10));//20 anotherSum和sum指向了同一函數 sum = null; alert(anotherSum(10,10));//20 即使將sum設置為null，讓它與函數斷絕關係，但仍然可以正常調用anotherSum

19、ECMAScript中的函數名本身就是變數，所以函數也可以作為值來使用。

不僅可以像傳遞參數一樣把一個函數傳遞給另一個函數，而且可以將一個函數作為另一個函數的結果返回。

從一個函數中返回另一個函數例：

假設有一個物件陣列，要根據某個物件屬性對陣列進行排序，而傳遞給陣列sort方法的比較函數要接收兩個參數，即要比較的值。

可是又需要一種方法來指明按照哪個屬性進行排序，要解決這個問題就可以定義一個函數，它接收一個屬性名，然後根據這個屬性名來創建一個比較函數。

//一個函數接受一個屬性名的參數，再根據這個屬性名來創建一個比較函數 function createComparisonFunction(propertyName){ return function(object1,object2){ var value1 = object1[propertyName];//內建函式接收到propretyName參數後，使用方括號標記法來取得給定屬性的值 var value2 = object2[propertyName];//(用點的時候，後面需要是一個指定的屬性名稱，用中括弧的時候，括弧裡面可以是變數或者字串) if(value1 value2){ return 1; }else{ return 0; } }; } var data = [{name: "Kalus", age: 28}, {name: "Demon", age: 29}];//定義了一個物件陣列 data.sort(createComparisonFunction("name")); alert(data[0].name);//Demon data.sort(createComparisonFunction("age")); alert(data[0].name);//Kalus函數屬性和方法

20、函數屬性和方法

每個函數都包含兩個非繼承而來的方法：apply和call，用途都是在特定的作用域中調用函數，實際上等於設置函數體內this物件的值。

apply方法接收兩個參數：在其中運行函數的作用域、參數陣列（也可以是Array的實例或arguments物件）

call方法和apply方法作用相同，區別在於接收參數的方式不同，對於call方法第一個參數仍是this，變化的是其餘參數都直接傳遞給函數

即使用call，傳遞給函數的參數必須逐個列舉出來。

例：

在使用call方法的情況下，callSum3必須明確地傳入每一個參數，結果與apply相同

如果參數打算傳入arguments物件或者包含函數中先接收到的是一個陣列，那麼使用apply更方便，否則使用call更合適，不給函數傳參的情況下兩者相同。

apply和call方法真正強大的地方是能夠擴充函數賴以運行的作用域，如：

window.color = "red"; var o = {color: "blue"}; function sayColor{ alert(this.color); } sayColor;//red sayColor作為全域函式定義的，在全域作用域中調用它時會顯示red sayColor.call(this);//red 顯示地在全域作用域中調用函數的方式 sayColor.call(window);//red 顯示地在全域作用域中調用函數的方式 sayColor.call(o);//blue 函數的執行環境發生改變，此時函數體內的this物件指向了o

如果不使用call方法，則需要先將sayColor函數放到物件o中，然後再通過o來調用：

window.color = "red"; var o = {color: "blue"}; function sayColor{ alert(this.color); } sayColor;//red o.sayColor = sayColor; o.sayColor;//blue

函數另一個方法： bind 這個方法會創建一個函數的實例，其this值會被綁定到傳給bind函數的值，如：

window.color = "red"; var o = {color: "blue"}; function sayColor{ alert(this.color); } var objectSayColor = sayColor.bind(o); objectSayColor;//blue objectSayColor函數的this值等於了o

21、字串創建新字串的方法（相當於截取字串）：slice、substr、substring ,都會返回被操作字串的一個子字串，都接收一或兩個參數

slice：第一個參數指定字串開始的位置、第二個參數表示字串到哪裡結束（兩個參數時前閉後開）

substring：同上

substr：第一個參數指定字串開始的位置、第二個參數是返回的字元個數

如果這三種方法沒有傳遞第二個參數，則將字串的長度作為結束位置，都對原始字串沒有影響

var stringValue = "hello world"; alert(stringValue.slice(3));//lo world alert(stringValue.substring(3));//lo world alert(stringValue.substr(3));//lo world alert(stringValue.slice(3,7));//lo w alert(stringValue.substring(3,7));//lo w alert(stringValue.substr(3,7));//lo worl

傳遞給這些方法的參數是負值的情況下：

slice方法會將傳入的負值與字串的長度相加

substring方法會把所有的負值參數都轉換為0

substr方法將負的第一個參數加上字串的長度，而將負的第二個參數轉換為0

var stringValue = "hello world"; alert(stringValue.slice(-3));//rld alert(stringValue.substring(-3));//hello world alert(stringValue.substr(-3));//rld alert(stringValue.slice(3,-4));//lo w alert(stringValue.substring(3,-4));//hel [0,3) alert(stringValue.substr(3,-4));//"" (空字串，因為長度變為了0)

22、字串位置方法indexOf和lastindexOf

查找給定字串，然後返回子字串的位置索引，lastindexOf從末尾向前查找。

都可以傳遞第二個參數，表示從字串中哪個位置開始查找。

可以通過迴圈調用indexOf或lastindexOf來找到所有匹配的字串，如：

var stringValue = "A new version of WebStorm is available!"; var positions = new Array; var posIndex = stringValue.indexOf("e"); while(posIndex != -1){ positions.push(posIndex); posIndex = stringValue.indexOf("e",posIndex + 1); } alert(positions);//3,7,18,37

23、字串trim方法

會創建一個字串副本，刪除前置及尾碼的所有空格，然後返回結果，原字串不變。

此外Firefox、Safari、Chrome還支援非標準的trimLeft和trimRight,分別用於刪除字串開頭和末尾的空格。

var stringValue = " hello world "; var trimmedStringValue = stringValue.trim; alert(stringValue);// hello world alert(trimmedStringValue);//hello world

24、字串localeCompare方法

用於比較兩個字串，並返回下列值的一個：

1）如果字串在字母表中應該排在字串參數之前，則返回一個負數（大多情況下是-1，具體的值要視實現而定）

2）如果字串等於字串參數，則返回0

3）如果字串在字母表中應該排在字串參數之前，則返回一個正數（大多情況下是1）

var stringValue = "yellow"; alert(stringValue.localeCompare("brick"));//1 alert(stringValue.localeCompare("yellow"));//0 alert(stringValue.localeCompare("zoo"));//-1

使用這個方法的例子：

25、min和max方法

要找到陣列中的最大值或最小值，可以像下面這樣使用apply方法：

把Matn物件作為apply的第一個參數，從而正確地設置this的值，然後可以將任何陣列作為第二個參數。

var values = [1,2,3,4,5,6,7,8]; var max = Math.max.apply(Math,values); alert(max);//8

26、random方法

套用下面的公式，可以利用Math.random從某個整數範圍內隨機選擇一個值：

隨機值 = Math.floor(Math.random * 可能值的總數 + 第一個可能的值)

如想隨機選擇2到10之間的數值：（2到10之間有9個數，第一個可能值為2）

var num = Math.floor(Math.random * 9 + 2); alert(num);

多數情況下，可以通過一個函數來計算可能值的總數和第一個可能值：

selectForm接受兩個參數：應該返回的最小值和最大值，用最大值減最小值再加1得到可能值的總數。

function selectFrom(lowerValue,upperValue){ var choices = upperValue - lowerValue + 1; return Math.floor(Math.random * choices + lowerValue); } var num = selectFrom(2,10); alert(num);//介於2和10之間（包括2和10）的一個數值

利用這個函數，可以方便地從陣列中隨機取出一項：

function selectFrom(lowerValue,upperValue){ var choices = upperValue - lowerValue + 1; return Math.floor(Math.random * choices + lowerValue); } var colors = ["red","green","yellow","black","orange","purple"]; var color = colors[selectFrom(0,colors.length - 1)]; alert(color);//隨機產生陣列中包含的任一字串