數組 · 《JavaScript 闖關記》

# 數組數組是值的有序集合。每個值叫做一個元素，而每個元素在數組中有一個位置，以數字表示，稱為索引。 JavaScript 數組是無類型的，數組元素可以是任意類型，并且同一個數組中的不同元素也可能有不同的類型。數組的元素甚至也可能是對象或其他數組。 JavaScript數組是動態的，根據需要它們會增長或縮減，并且在創建數組時無須聲明一個固定的大小或者在數組大小變化時無須重新分配空間。 JavaScript 數組可能是稀疏的，數組元素的索引不一定要連續的，它們之間可以有空缺。每個JavaScript數組都有一個length屬性。針對非稀疏數組，該屬性就是數組元素的個數。針對稀疏數組，length比所有元素的索引要大。 JavaScript 數組是 JavaScript 對象的特殊形式，數組索引實際上和碰巧是整數的屬性名差不多。通常，數組的實現是經過優化的，用數字索引來訪問數組元素一般來說比訪問常規的對象屬性要快很多。數組繼承自?`Array.prototype`?中的屬性，它定義了一套豐富的數組操作方法。 ## [](https://github.com/stone0090/javascript-lessons/tree/master/1.8-ArrayObjects#創建數組)創建數組可以使用數組字面量和?`new`?關鍵字來創建數組。 ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.8-ArrayObjects#使用數組字面量創建數組推薦)使用數組字面量創建數組（推薦） ~~~ var empty = []; // 沒有元素的數組 var primes = [2, 3, 5, 7, 11]; // 有5個數值的數組 var misc = [1.1, true, "a"]; // 3個不同類型的元素 // 數組直接量中的值不一定要是常量，可以是任意的表達式 var base = 1024; var table = [base, base+1, base+2, base+3]; // 也可以包含對象直接量或其他數組直接量 var b = [[1, {x:1, y:2}], [2, {x:3, y:4}]]; ~~~ 注意，不要忽略數組字面量的最后一個元素，僅以逗號結尾。下面幾個案例，在不同的瀏覽器下，可能會被識別成2個元素，也有可能識別成3個元素，而造成程序bug。例如： ~~~ var nums = [,,,]; // 不好的寫法 var names = ["stone",,]; // 不好的寫法 var colors = ["red","green",]; // 不好的寫法 ~~~ ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.8-ArrayObjects#使用-new-關鍵字創建數組)使用?`new`?關鍵字創建數組使用?`new`?關鍵字調用構造函數?`Array()`?是創建數組的另一種方法，可以用三種方式調用構造函數。例如： ~~~ // 調用時沒有參數 var a = new Array(); // 調用時有一個數值參數，它指定長度 var a = new Array(10); // 顯式指定多個數組元素或者數組的一個非數值元素 var a = new Array(5, 4, 3, 2, 1, "testing"); ~~~ ## [](https://github.com/stone0090/javascript-lessons/tree/master/1.8-ArrayObjects#數組元素的讀和寫)數組元素的讀和寫使用?`[]`?操作符來訪問數組中的一個元素。數組的引用位于方括號的左邊。方括號中是一個返回非負整數值的任意表達式。使用該語法既可以讀又可以寫數組的一個元素。例如： ~~~ var a = ["world"]; // 從一個元素的數組開始 var value = a[0]; // 讀第0個元素 a[1] = 3.14; // 寫第1個元素 var i = 2; a[i] = 3; // 寫第2個元素 a[i + 1] = "hello"; // 寫第3個元素 a[a[i]] = a[0]; // 讀第0個和第2個元素，寫第3個元素 ~~~ 請記住，數組是對象的特殊形式，可以為其創建任意名字的屬性。但如果使用的屬性是數組的索引，數組的特殊行為就是將根據需要更新它們的length屬性值。注意，可以使用負數或非整數來索引數組。這種情況下，數值轉換為字符串，字符串作為屬性名來用。既然名字不是非負整數，它就只能當做常規的對象屬性，而非數組的索引。同樣，如果湊巧使用了是非負整數的字符串，它就當做數組索引，而非對象屬性。當使用的一個浮點數和一個整數相等時情況也是一樣的。例如： ~~~ a[-1.23] = true; // 這將創建一個名為"-1.23"的屬性 a["1000"] = 0; // 這是數組的第1001個元素 a[1.000] // 和 a[1] 相等 ~~~ 事實上數組索引僅僅是對象屬性名的一種特殊類型，這意味著 JavaScript 數組沒有「越界」錯誤的概念。當試圖查詢任何對象中不存在的屬性時，不會報錯，只會得到?`undefined`?值。 ## [](https://github.com/stone0090/javascript-lessons/tree/master/1.8-ArrayObjects#稀疏數組)稀疏數組稀疏數組就是包含從0開始的不連續索引的數組。通常，數組的?`length`?屬性值代表數組中元素的個數。如果數組是稀疏的，`length`?屬性值大于元素的個數。可以用?`Array()`?構造函數或簡單地指定數組的索引值大于當前的數組長度來創建稀疏數組。 ~~~ a = new Array(5); // 數組沒有元素，但是 a.length = 5 a = []; // 創建一個空數組，a.length = 0 a[1000] = 0; // 添加一個元素，a.length 被自動更新為1001 ~~~ 足夠稀疏的數組通常在實現上比稠密的數組更慢、內存利用率更高，在這樣的數組中查找元素的時間與常規對象屬性的查找時間一樣長。需要注意的是，當省略數組直接量中的值時（使用連續的逗號，比如?`[1,,3]`?），這時所得到的數組也是稀疏數組，省略掉的值是不存在的： ~~~ var a1 = [,'1','2']; // 此數組長度是3 var a2 = [undefined]; // 此數組包含一個值為 undefined 的元素 console.log(0 in a1); // false，a1 在索引0處沒有元素 console.log(0 in a2); // true，a2 在索引0處有一個值為 undefined 的元素 ~~~ 了解稀疏數組是了解 JavaScript 數組的真實本質的一部分。盡管如此，實際上你所碰到的絕大多數 JavaScript 數組不是稀疏數組。并且，如果你確實碰到了稀疏數組，你的代碼很可能像對待非稀疏數組一樣來對待它們，只不過它們包含一些?`undefined`值。 ## [](https://github.com/stone0090/javascript-lessons/tree/master/1.8-ArrayObjects#數組長度)數組長度每個數組有一個?`length`?屬性，就是這個屬性使其區別于常規的 JavaScript 對象。針對稠密（也就是非稀疏）數組，`length`屬性值代表數組中元素的個數。其值比數組中最大的索引大1。例如： ~~~ [].length // 0，數組沒有元素 ['a','b','c'].length // 3，最大的索引為2，length 為3 ~~~ 當數組是稀疏的時，`length`?屬性值大于元素的個數。而且關于此我們可以說的一切也就是數組長度保證大于它每個元素的索引值。或者，換一種說法，在數組中（無論稀疏與否）肯定找不到一個元素的索引值大于或等于它的長度。為了維持此規則不變化，數組有兩個特殊的行為。 * 第一個如同上面的描述：如果為一個數組元素賦值，它的索引?`i`?大于或等于現有數組的長度時，`length`?屬性的值將設置為?`i+1`。 * 第二個特殊的行為就是設置?`length`?屬性為一個小于當前長度的非負整數?`n`?時，當前數組中那些索引值大于或等于?`n`?的元素將從中刪除。例如： ~~~ a = [1,2,3,4,5]; // 從5個元素的數組開始 a.length = 3; // 現在 a 為[1,2,3] a.length = 0; // 刪除所有的元素。a 為[ ] a.length = 5; // 長度為5，但是沒有元素，就像 new Array(5) ~~~ 還可以將數組的?`length`?屬性值設置為大于其當前的長度。實際上這不會向數組中添加新的元素，它只是在數組尾部創建一個空的區域。在 ECMAScript 5中，可以用?`Object.defineProperty()`?讓數組的?`length`?屬性變成只讀的。例如： ~~~ a = [1,2,3]; // 從3個元素的數組開始 Object.defineProperty(a, "length", {writable: false}); // 讓 length 屬性只讀 a.length = 0; // a 不會改變 ~~~ ## [](https://github.com/stone0090/javascript-lessons/tree/master/1.8-ArrayObjects#數組元素的添加和刪除)數組元素的添加和刪除我們已經見過添加數組元素最簡單的方法，為新索引賦值。例如： ~~~ a = [] // 開始是一個空數組 a[0] = "zero"; // 然后向其中添加元素 a[1] = "one"; ~~~ 也可以使用?`push()`?方法在數組末尾增加一個或多個元素。例如： ~~~ a = []; // 開始是一個空數組 a.push("zero"); // 在末尾添加一個元素。a = ["zero"] a.push("one", "two"); // 再添加兩個元素。a = ["zero", "one", "two"] ~~~ 可以像刪除對象屬性一樣使用?`delete`?運算符來刪除數組元素。例如： ~~~ a = [1,2,3]; delete a[1]; // a在索引1的位置不再有元素 1 in a // => false: 數組索引1并未在數組中定義 a.length // => 3: delete操作并不影響數組長度 ~~~ 注意，對一個數組元素使用?`delete`?不會修改數組的?`length`?屬性，也不會將元素從高索引處移下來填充已刪除屬性留下的空白。如果從數組中刪除一個元素，它就變成稀疏數組。 ## [](https://github.com/stone0090/javascript-lessons/tree/master/1.8-ArrayObjects#數組遍歷)數組遍歷使用?`for`?循環是遍歷數組元素最常見的方法。例如： ~~~ var keys = Object.keys(o); // 獲得 o 對象屬性名組成的數組 var values = [] // 在數組中存儲匹配屬性的值 for(var i = 0; i < keys.length; i++) { // 對于數組中每個索引 var key = keys[i]; // 獲得索引處的鍵值 values[i] = o[key]; // 在 values 數組中保存屬性值 } ~~~ 在嵌套循環或其他性能非常重要的上下文中，可以看到這種基本的數組遍歷需要優化，數組的長度應該只查詢一次而非每次循環都要查詢。例如： ~~~ for(var i = 0, len = keys.length; i < len; i++) { // 循環體仍然不變 } ~~~ 這些例子假設數組是稠密的，并且所有的元素都是合法數據。否則，使用數組元素之前應該先檢測它們。例如： ~~~ for(var i = 0; i < a.length; i++) { if (!a[i]) continue; // 跳過 null、undefined 和不存在的元素 if (!(i in a)) continue ; // 跳過不存在的元素 if (a[i] === undefined) continue; // 跳過 undefined 和不存在的元素 // 循環體 } ~~~ 還可以使用?`for/in`?循環處理稀疏數組。循環每次將一個可枚舉的屬性名（包括數組索引）賦值給循環變量，不存在的索引將不會遍歷到。例如： ~~~ for(var index in sparseArray) { var value = sparseArray[index]; // 此處可以使用索引和值做一些事情 } ~~~ 但由于?`for/in`?循環能夠枚舉繼承的屬性名，如添加到?`Array.prototype`?中的方法。基于這個原因，在數組上不應該使用`for/in`?循環，除非使用額外的檢測方法來過濾不想要的屬性。例如： ~~~ for(var i in a) { // 跳過繼承的屬性 if (!a.hasOwnProperty(i)) continue; // 跳過不是非負整數的 i if (String(Math.floor(Math.abs(Number(i)))) !== i) continue; } ~~~ `JavaScript`?規范允許?`for/in`?循環以不同的順序遍歷對象的屬性。通常數組元素的遍歷實現是升序的，但不能保證一定是這樣的。如果數組同時擁有對象屬性和數組元素，返回的屬性名很可能是按照創建的順序而非數值的大小順序。如何處理這個問題的實現，各個瀏覽器都不相同，如果算法依賴于遍歷的順序，那么最好不要使用?`for/in`?而用常規的?`for`?循環。 ECMAScript 5定義了一些遍歷數組元素的新方法，按照索引的順序按個傳遞給定義的一個函數。這些方法中最常用的就是`forEach()`?方法。例如： ~~~ var data = [1,2,3,4,5]; // 這是需要遍歷的數組 var sumOfSquares = 0; // 要得到數據的平方和 data.forEach(function(x) { // 把每個元素傳遞給此函數 sumOfSquares += x*x; // 平方相加 }); console.log(sumOfSquares); // 55，1 + 4 + 9 + 16 + 25 ~~~ ## [](https://github.com/stone0090/javascript-lessons/tree/master/1.8-ArrayObjects#數組檢測)數組檢測給定一個未知的對象，判定它是否為數組通常非常有用。在 ECMAScript 5中，可以使用?`Array.isArray()`?函數來做這件事情。例如： ~~~ Array.isArray([]) // true Array.isArray({}) // false ~~~ 但是，在 ECMAScript 5以前，要區分數組和非數組對象很困難。`typeof`?運算符對數組返回?`"object"`（并且對于除了函數以外的所有對象都是如此）。`instanceof`?操作符也只能用于簡單的情形。例如： ~~~ [] instanceof Array // true ({}) instanceof Array // false ~~~ 使用?`instanceof`?的問題是在 Web 瀏覽器中有可能有多個窗體存在。每個窗體都有自己的 JavaScript 環境，有自己的全局對象。并且，每個全局對象有自己的一組構造函數。因此一個窗體中的對象將不可能是另外窗體中的構造函數的實例。窗體之間的混淆不常發生，但這個問題足已證明?`instanceof`?操作符不能視為一個可靠的數組檢測方法。解決方案是檢查對象的類屬性，對數組而言該屬性的值總是?`"Array"`，因此在 ECMAScript 3中?`isArray()`?函數的代碼可以這樣書寫。例如： ~~~ var isArray = Array.isArray || function(o) { return typeof o === "object" && Object.prototype.toString.call(o) === "[object Array]"; }; ~~~ ## [](https://github.com/stone0090/javascript-lessons/tree/master/1.8-ArrayObjects#數組方法)數組方法 ECMAScript 3和 ECMAScript 5在?`Array.prototype`?中定義了一些很有用的操作數組的方法。 ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.8-ArrayObjects#轉換方法)轉換方法所有對象都具有?`toLocaleString()`、`toString()`?和?`valueOf()`?方法。其中，調用數組的?`toString()`?和?`valueOf()`?方法會返回相同的值，即由數組中每個值的字符串形式拼接而成的一個以逗號分隔的字符串。實際上，為了創建這個字符串會調用數組每一項的?`toString()`?方法。例如： ~~~ var colors = ["red", "blue", "green"]; // 創建一個包含3個字符串的數組 alert(colors.toString()); // red,blue,green alert(colors.valueOf()); // red,blue,green alert(colors); // red,blue,green ~~~ 在這里，我們首先顯式地調用了?`toString()`?和?`valueOf()`?方法，以便返回數組的字符串表示，每個值的字符串表示拼接成了一個字符串，中間以逗號分隔。最后一行代碼直接將數組傳遞給了?`alert()`。由于?`alert()`要接收字符串參數，所以它會在后臺調用?`toString()`?方法，由此會得到與直接調用?`toString()`?方法相同的結果。另外，`toLocaleString()`?方法經常也會返回與?`toString()`?和?`valueOf()`?方法相同的值，但也不總是如此。當調用數組的`toLocaleString()`?方法時，它也會創建一個數組值的以逗號分隔的字符串。而與前兩個方法唯一的不同之處在于，這一次為了取得每一項的值，調用的是每一項的?`toLocaleString()`?方法，而不是?`toString()`?方法。例如： ~~~ var person1 = { toLocaleString : function () { return "Nikolaos"; }, toString : function() { return "Nicholas"; } }; var person2 = { toLocaleString : function () { return "Grigorios"; }, toString : function() { return "Greg"; } }; var people = [person1, person2]; alert(people); // Nicholas,Greg alert(people.toString()); // Nicholas,Greg alert(people.toLocaleString()); // Nikolaos,Grigorios ~~~ 數組繼承的?`toLocaleString()`、`toString()`?和?`valueOf()`方法，在默認情況下都會以逗號分隔的字符串的形式返回數組項。而如果使用?`join()`?方法，則可以使用不同的分隔符來構建這個字符串。`join()`?方法只接收一個參數，即用作分隔符的字符串，然后返回包含所有數組項的字符串。例如： ~~~ var colors = ["red", "green", "blue"]; console.log(colors.join(",")); // red,green,blue console.log(colors.join("||")); // red||green||blue ~~~ 如果數組中的某一項的值是?`null`?或者?`undefined`，那么該值在?`join()`、`toLocaleString()`、`toString()`?和?`valueOf()`方法返回的結果中以空字符串表示。 ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.8-ArrayObjects#棧方法)棧方法棧是一種 LIFO（Last-In-First-Out，后進先出）的數據結構，也就是最新添加的項最早被移除。`push()`?方法可以接收任意數量的參數，把它們逐個添加到數組末尾，并返回修改后數組的長度。而?`pop()`?方法則從數組末尾移除最后一項，減少數組的`length`?值，然后返回移除的項。結合?`push()`?和?`pop()`?方法，就可以像棧一樣使用數組。例如： ~~~ var colors = []; // 創建一個數組 var count = colors.push("red", "green"); // 推入兩項 console.log(count); // 2，數組的長度 count = colors.push("black"); // 推入另一項 console.log(count); // 3，數組的長度 var item = colors.pop(); // 取得最后一項 console.log(item); // "black" console.log(colors.length); // 2，數組的長度 ~~~ ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.8-ArrayObjects#隊列方法)隊列方法隊列是一種 FIFO（First-In-First-Out，先進先出）的數據結構，隊列在列表的末端添加項，從列表的前端移除項。`shift()`?方法則從數組前端移除第一項，減少數組的?`length`?值，然后返回移除的項。結合?`push()`?和?`shift()`?方法，就可以像隊列一樣使用數組。例如： ~~~ var colors = []; // 創建一個數組 var count = colors.push("red", "green"); // 推入兩項 console.log(count); // 2，數組的長度 count = colors.push("black"); // 推入另一項 console.log(count); // 3，數組的長度 var item = colors.shift(); // 取得第一項 console.log(item); // "red" console.log(colors.length); // 2，數組的長度 ~~~ JavaScipt 還為數組提供了一個?`unshift()`?方法。顧名思義，`unshift()`?與?`shift()`?的用途相反，它能在數組前端添加任意個項并返回新數組的長度。因此，同時使用?`unshift()`?和?`pop()`?方法，可以從相反的方向來模擬隊列，即在數組的前端添加項，從數組末端移除項。 ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.8-ArrayObjects#重排序方法)重排序方法數組中有兩個重排序的方法：`reverse()`?和?`sort()`。`reverse()`?方法可以反轉數組元素的順序。例如： ~~~ var values = [1, 2, 3, 4, 5]; values.reverse(); console.log(values); //5,4,3,2,1 ~~~ `sort()`?方法可以按升序排列數組元素（即最小的值位于最前面，最大的值排在最后面）。`sort()`?方法在排序的過程中會調用每個數組元素的?`toString()`，然后比較得到的字符串，以確定如何排序。即使數組中的每一項都是數值，`sort()`?方法比較的也是字符串，例如： ~~~ var values = [0, 1, 5, 10, 15]; values.sort(); console.log(values); // 0,1,10,15,5 ~~~ 這種排序方式在很多情況下都不是最佳方案，因此?`sort()`?方法可以接收一個比較函數作為參數，以便我們指定哪個值位于哪個值的前面，以下就是一個簡單的比較函數。例如： ~~~ function compare(value1, value2) { if (value1 < value2) { return -1; } else if (value1 > value2) { return 1; } else { return 0; } } ~~~ 這個比較函數接收兩個參數，如果第一個參數應該位于第二個之前則返回一個負數，如果兩個參數相等則返回0，如果第一個參數應該位于第二個之后則返回一個正數。它可以適用于大多數情況，只要將其作為參數傳遞給?`sort()`?方法即可。例如： ~~~ var values = [10, 5, 1, 0, 15]; values.sort(compare); console.log(values); // 0,1,5,10,15 ~~~ 對于數值類型或者其?`valueOf()`?方法會返回數值類型的對象類型，可以使用一個更簡單的比較函數。這個函數只要用第二個值減第一個值即可。例如： ~~~ function compare(value1, value2){ return value2 - value1; } ~~~ 由于比較函數通過返回一個小于零、等于零或大于零的值來影響排序結果，因此減法操作就可以適當地處理所有這些情況。 ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.8-ArrayObjects#操作方法)操作方法 JavaScript 為操作已經包含在數組中的元素提供了很多方法。其中，`concat()`?方法可以基于當前數組中的所有項創建一個新數組。具體來說，這個方法會先創建當前數組一個副本，然后將接收到的參數添加到這個副本的末尾，最后返回新構建的數組。在沒有給?`concat()`?方法傳遞參數的情況下，它只是復制當前數組并返回副本。如果傳遞給?`concat()`?方法的是一或多個數組，則該方法會將這些數組中的每一項都添加到結果數組中。如果傳遞的值不是數組，這些值就會被簡單地添加到結果數組的末尾。例如： ~~~ var colors = ["red", "green", "blue"]; var colors2 = colors.concat("yellow", ["black", "brown"]); console.log(colors); // red,green,blue console.log(colors2); // red,green,blue,yellow,black,brown ~~~ 下一個方法是?`slice()`，它能夠基于當前數組中的一或多個項創建一個新數組。`slice()`?方法可以接受一或兩個參數，即要返回項的起始和結束位置。在只有一個參數的情況下，`slice()`?方法返回從該參數指定位置開始到當前數組末尾的所有項。如果有兩個參數，該方法返回起始和結束位置之間的項，但不包括結束位置的項。注意，`slice()`?方法不會影響原始數組。例如： ~~~ var colors = ["red", "green", "blue", "yellow", "purple"]; var colors2 = colors.slice(1); var colors3 = colors.slice(1,4); console.log(colors2); // green,blue,yellow,purple console.log(colors3); // green,blue,yellow ~~~ > 如果?`slice()`?方法的參數中有一個負數，則用數組長度加上該數來確定相應的位置。例如，在一個包含5項的數組上調用`slice(-2,-1)`?與調用?`slice(3,4)`?得到的結果相同。如果結束位置小于起始位置，則返回空數組。下一個方法是?`splice()`，它的主要用途是向數組的中部插入元素，主要有以下3種使用方式。 * 刪除：可以刪除任意數量的項，只需指定2個參數：起始位置和要刪除元素的數量。例如，`splice(0,2)`?會刪除數組中的前兩項。 * 插入：可以向指定位置插入任意數量的項，只需提供3個參數：起始位置、0（要刪除元素的數量）和要插入的元素。如果要插入多個元素，可以再傳入第四、第五，以至任意多個元素。例如，`splice(2,0,"red","green")`?會從當前數組的位置2開始插入字符串?`"red"`?和?`"green"`。 * 替換：可以向指定位置插入任意數量的項，且同時刪除任意數量的項，只需指定3個參數：起始位置、要刪除元素的數量和要插入的元素。插入的項數不必與刪除的項數相等。例如，`splice (2,1,"red","green")`會刪除當前數組位置2的項，然后再從位置2開始插入字符串?`"red"`?和?`"green"`。 `splice()`?方法始終都會返回一個數組，該數組中包含從原始數組中刪除的項（如果沒有刪除任何項，則返回一個空數組）。下面的代碼展示了上述3種使用?`splice()`?方法的方式。例如： ~~~ var colors = ["red", "green", "blue"]; var removed = colors.splice(0,1); // 刪除第一項 console.log(colors); // green,blue console.log(removed); // red，返回的數組中只包含一項 removed = colors.splice(1, 0, "yellow", "orange"); // 從位置1開始插入兩項 console.log(colors); // green,yellow,orange,blue console.log(removed); // 返回的是一個空數組 removed = colors.splice(1, 1, "red", "purple"); // 插入兩項，刪除一項 console.log(colors); // green,red,purple,orange,blue console.log(removed); // yellow，返回的數組中只包含一項 ~~~ ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.8-ArrayObjects#位置方法)位置方法 ECMAScript 5為數組實例添加了兩個位置方法：`indexOf()`?和?`lastIndexOf()`。這兩個方法都接收兩個參數：要查找的項和（可選的）表示查找起點位置的索引。其中，`indexOf()`?方法從數組的開頭（位置0）開始向后查找，`lastIndexOf()`?方法則從數組的末尾開始向前查找。這兩個方法都返回要查找的項在數組中的位置，或者在沒找到的情況下返回?`-1`。在比較第一個參數與數組中的每一項時，會使用全等操作符；也就是說，要求查找的項必須嚴格相等（就像使用?`===`?一樣）。例如： ~~~ var numbers = [1,2,3,4,5,4,3,2,1]; console.log(numbers.indexOf(4)); // 3 console.log(numbers.lastIndexOf(4)); // 5 console.log(numbers.indexOf(4, 4)); // 5 console.log(numbers.lastIndexOf(4, 4)); // 3 var person = { name: "Nicholas" }; var people = [{ name: "Nicholas" }]; var morePeople = [person]; console.log(people.indexOf(person)); // -1 console.log(morePeople.indexOf(person)); // 0 ~~~ ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.8-ArrayObjects#迭代方法)迭代方法 ECMAScript 5為數組定義了5個迭代方法。每個方法都接收兩個參數：要在每一項上運行的函數和（可選的）運行該函數的作用域對象。傳入這些方法中的函數會接收三個參數：數組項的值、該項在數組中的位置和數組對象本身。根據使用的方法不同，這個函數執行后的返回值可能會也可能不會影響訪問的返回值。以下是這5個迭代方法的作用。 * `every()`，對數組中的每一項運行給定函數，如果該函數對每一項都返回?`true`?，則返回?`true`。 * `filter()`，對數組中的每一項運行給定函數，返回該函數會返回?`true`?的項組成的數組。 * `forEach()`，對數組中的每一項運行給定函數。這個方法沒有返回值。 * `map()`，對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組。 * `some()`，對數組中的每一項運行給定函數，如果該函數對任一項返回?`true`?，則返回?`true`。以上方法都不會修改數組中的包含的值。在這些方法中，最相似的是?`every()`?和?`some()`，它們都用于查詢數組中的項是否滿足某個條件。對?`every()`?來說，傳入的函數必須對每一項都返回?`true`，這個方法才返回?`true`；否則，它就返回`false`。而?`some()`方法則是只要傳入的函數對數組中的某一項返回?`true`，就會返回?`true`。例如： ~~~ var numbers = [1,2,3,4,5,4,3,2,1]; var everyResult = numbers.every(function(item, index, array){ return (item > 2); }); console.log(everyResult); // false var someResult = numbers.some(function(item, index, array){ return (item > 2); }); console.log(someResult); // true ~~~ 下面再看一看?`filter()`?函數，它利用指定的函數確定是否在返回的數組中包含的某一項。例如： ~~~ var numbers = [1,2,3,4,5,4,3,2,1]; var filterResult = numbers.filter(function(item, index, array){ return (item > 2); }); console.log(filterResult); // [3,4,5,4,3] ~~~ `map()`?也返回一個數組，而這個數組的每一項都是在原始數組中的對應項上運行傳入函數的結果。例如，可以給數組中的每一項乘以2，然后返回這些乘積組成的數組。例如： ~~~ var numbers = [1,2,3,4,5,4,3,2,1]; var mapResult = numbers.map(function(item, index, array){ return item * 2; }); console.log(mapResult); // [2,4,6,8,10,8,6,4,2] ~~~ 最后一個方法是?`forEach()`，它只是對數組中的每一項運行傳入的函數。這個方法沒有返回值，本質上與使用?`for`?循環迭代數組一樣。例如： ~~~ var numbers = [1,2,3,4,5,4,3,2,1]; numbers.forEach(function(item, index, array){ //執行某些操作 }); ~~~ ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.8-ArrayObjects#縮小方法)　縮小方法 ECMAScript 5還新增了兩個縮小數組的方法：`reduce()`?和?`reduceRight()`。這兩個方法都會迭代數組的所有項，然后構建一個最終返回的值。其中，`reduce()`?方法從數組的第一項開始，逐個遍歷到最后。而?`reduceRight()`?則從數組的最后一項開始，向前遍歷到第一項。這兩個方法都接收兩個參數：一個在每一項上調用的函數和（可選的）作為縮小基礎的初始值。傳給?`reduce()`和`reduceRight()`?的函數接收4個參數：前一個值、當前值、項的索引和數組對象。這個函數返回的任何值都會作為第一個參數自動傳給下一項。第一次迭代發生在數組的第二項上，因此第一個參數是數組的第一項，第二個參數就是數組的第二項。使用?`reduce()`?方法可以執行求數組中所有值之和的操作。例如： ~~~ var values = [1,2,3,4,5]; var sum = values.reduce(function(prev, cur, index, array){ return prev + cur; }); console.log(sum); // 15 ~~~ 第一次執行回調函數，prev是1，cur是2。第二次，prev是3（1加2的結果），cur是3（數組的第三項）。這個過程會持續到把數組中的每一項都訪問一遍，最后返回結果。 `reduceRight()`?的作用類似，只不過方向相反而已。例如： ~~~ var values = [1,2,3,4,5]; var sum = values.reduceRight(function(prev, cur, index, array){ return prev + cur; }); console.log(sum); // 15 ~~~ 使用?`reduce()`?還是?`reduceRight()`，主要取決于要從哪頭開始遍歷數組。除此之外，它們完全相同。 ## [](https://github.com/stone0090/javascript-lessons/tree/master/1.8-ArrayObjects#關卡)關卡完成下面3個數組去重方法。 ~~~ // 挑戰一，一維數組 var arr = [2,3,4,2,3,5,6,4,3,2]; var unique = function(arr){ // 待實現方法體 } console.log(unique(arr)); // [2,3,4,5,6] ~~~ ~~~ // 挑戰二，二維數組 var arr = [2,3,4,[2,3,4,5],3,5,[2,3,4,2],4,3,6,2]; var unique = function(arr){ // 待實現方法體 } console.log(unique(arr)); // [2,3,4,5,6] ~~~ ~~~ // 挑戰三，三維數組或 n 維數組 var arr = [2,3,4,[2,3,[2,3,4,2],5],3,5,[2,3,[2,3,4,2],2],4,3,6,2]; var unique = function(arr){ // 待實現方法體 } console.log(unique(arr)); // [2,3,4,5,6] ~~~