《JavaScript 闖關記》之陣列

劼哥stone發表於2019-03-01

陣列是值的有序集合。每個值叫做一個元素,而每個元素在陣列中有一個位置,以數字表示,稱為索引。

JavaScript 陣列是無型別的,陣列元素可以是任意型別,並且同一個陣列中的不同元素也可能有不同的型別。陣列的元素甚至也可能是物件或其他陣列。

JavaScript陣列是動態的,根據需要它們會增長或縮減,並且在建立陣列時無須宣告一個固定的大小或者在陣列大小變化時無須重新分配空間。

JavaScript 陣列可能是稀疏的,陣列元素的索引不一定要連續的,它們之間可以有空缺。每個JavaScript陣列都有一個length屬性。針對非稀疏陣列,該屬性就是陣列元素的個數。針對稀疏陣列,length比所有元素的索引要大。

JavaScript 陣列是 JavaScript 物件的特殊形式,陣列索引實際上和碰巧是整數的屬性名差不多。通常,陣列的實現是經過優化的,用數字索引來訪問陣列元素一般來說比訪問常規的物件屬性要快很多。

陣列繼承自 Array.prototype 中的屬性,它定義了一套豐富的陣列操作方法。

建立陣列

可以使用陣列字面量和 new 關鍵字來建立陣列。

使用陣列字面量建立陣列(推薦)

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",];  // 不好的寫法複製程式碼

使用 new 關鍵字建立陣列

使用 new 關鍵字呼叫建構函式 Array() 是建立陣列的另一種方法,可以用三種方式呼叫建構函式。例如:

// 呼叫時沒有引數
var a = new Array();

// 呼叫時有一個數值引數,它指定長度
var a = new Array(10); 

// 顯式指定多個陣列元素或者陣列的一個非數值元素
var a = new Array(5, 4, 3, 2, 1, "testing");複製程式碼

陣列元素的讀和寫

使用 [] 操作符來訪問陣列中的一個元素。陣列的引用位於方括號的左邊。方括號中是一個返回非負整數值的任意表示式。使用該語法既可以讀又可以寫陣列的一個元素。例如:

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 值。

稀疏陣列

稀疏陣列就是包含從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 值。

陣列長度

每個陣列有一個 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 不會改變複製程式碼

陣列元素的新增和刪除

我們已經見過新增陣列元素最簡單的方法,為新索引賦值。例如:

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 屬性,也不會將元素從高索引處移下來填充已刪除屬性留下的空白。如果從陣列中刪除一個元素,它就變成稀疏陣列。

陣列遍歷

使用 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複製程式碼

陣列檢測

給定一個未知的物件,判定它是否為陣列通常非常有用。在 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]";
};複製程式碼

陣列方法

ECMAScript 3和 ECMAScript 5在 Array.prototype 中定義了一些很有用的運算元組的方法。

轉換方法

所有物件都具有 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() 方法返回的結果中以空字串表示。

棧方法

棧是一種 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,陣列的長度複製程式碼

佇列方法

佇列是一種 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() 方法,可以從相反的方向來模擬佇列,即在陣列的前端新增項,從陣列末端移除項。

重排序方法

陣列中有兩個重排序的方法: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;
}複製程式碼

由於比較函式通過返回一個小於零、等於零或大於零的值來影響排序結果,因此減法操作就可以適當地處理所有這些情況。

操作方法

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,返回的陣列中只包含一項複製程式碼

位置方法

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複製程式碼

迭代方法

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){
    //執行某些操作 
});複製程式碼

### 縮小方法

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(),主要取決於要從哪頭開始遍歷陣列。除此之外,它們完全相同。

關卡

完成下面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]複製程式碼

更多

關注微信公眾號「劼哥舍」回覆「答案」,獲取關卡詳解。
關注 github.com/stone0090/j…,獲取最新動態。

相關文章