在編程世界中，數(shù)組是指元素的集合。數(shù)組將數(shù)據(jù)作為元素進(jìn)行存儲(chǔ)，并在需要時(shí)將其取出。

在支持?jǐn)?shù)組的編程語言中廣泛地采用了這個(gè)數(shù)據(jù)結(jié)構(gòu)。

這個(gè)手冊(cè)會(huì)介紹 JavaScript 數(shù)組的所有知識(shí)。你將會(huì)學(xué)到復(fù)雜數(shù)據(jù)處理、解構(gòu)、常用數(shù)組方法等內(nèi)容。

我為什么寫這篇文章

網(wǎng)上已經(jīng)有很多介紹 JavaScript 數(shù)組的優(yōu)秀文章，那我為什么還要寫一篇相同主題的文章呢？動(dòng)機(jī)是什么？

多年來，通過和學(xué)員的交流，我意識(shí)到大多數(shù)初學(xué)者都需要這樣一個(gè)教程：通過示例從頭到尾徹底地介紹數(shù)組。

所以我決定編寫這樣一篇包含大量示例的文章。如果你是初學(xué)者，希望這篇文章對(duì)你有所幫助。

不過，這個(gè)手冊(cè)也能幫助有經(jīng)驗(yàn)的開發(fā)者梳理知識(shí)。我在寫作這篇文章的過程中，也重新學(xué)習(xí)了相關(guān)知識(shí)。我們開始吧。

JavaScript 中的數(shù)組是什么

在 JavaScript 中，一對(duì)方括號(hào)（[]） 表示一個(gè)數(shù)組，其中的所有元素以逗號(hào)（,） 分隔。

在 JavaScript 中，數(shù)組可以是任意類型元素組成的集合。這意味著，創(chuàng)建一個(gè)數(shù)組，它的元素類型可以是 String、Boolean、Number、Object，甚至是另一個(gè)數(shù)組。

示例中的數(shù)組包含 4 個(gè)元素，類型分別是：Number、Boolean、String 和 Object。

const?mixedTypedArray?=?[100,?true,?'freeCodeCamp',?{}];

元素在數(shù)組中的位置稱為索引（index），JavaScript 中的數(shù)組索引是從 0 開始計(jì)數(shù)的，每加入一個(gè)新元素，其對(duì)應(yīng)的索引加 1。

例如，上面的數(shù)組中，100 這個(gè)元素的位置是 索引 0，true 的位置是索引 1，'freeCodeCamp' 的位置是索引 2，以此類推。

數(shù)組中的元素?cái)?shù)量決定了數(shù)組長(zhǎng)度（length）。比如說，上面的數(shù)組長(zhǎng)度是 4。

有趣的是，JavaScript 數(shù)組的長(zhǎng)度是可變的，你可以隨時(shí)將它指定為一個(gè)非負(fù)整數(shù)值。我們稍后會(huì)學(xué)習(xí)更多相關(guān)知識(shí)。

如何創(chuàng)建數(shù)組

在 JavaScript 中有多種方式可以創(chuàng)建數(shù)組，最直接的方式是把數(shù)組字面量賦值給一個(gè)變量。

const?salad?=?['????',?'????',?'????',?'????',?'????',?'????',?'????'];

也可以使用 Array 構(gòu)造函數(shù)來創(chuàng)建數(shù)組。

const?salad?=?new?Array('????',?'????',?'????',?'????',?'????',?'????',?'????');

注意：new Array(2) 會(huì)創(chuàng)建一個(gè)長(zhǎng)度為 2 的空數(shù)組，然而 new Array(1,2) 則會(huì)創(chuàng)建一個(gè)包含兩個(gè)元素（1 和 2）的數(shù)組。

另外，Array.of() 和 Array.from() 方法，以及展開運(yùn)算符（...）也可以創(chuàng)建數(shù)組。我們后面會(huì)學(xué)習(xí)它們。

如何訪問數(shù)組元素

可以使用數(shù)組索引來獲取數(shù)組元素，訪問數(shù)組元素需要用到方括號(hào) []。

const?element?=?array[index];

根據(jù)使用場(chǎng)景，你可能需要一個(gè)一個(gè)地訪問數(shù)組元素或者使用循環(huán)來遍歷。

可以像這樣使用索引來訪問數(shù)組元素：

const?salad?=?['????',?'????',?'????',?'????',?'????',?'????',?'????']; salad[0];?//?'????' salad[2];?//?'????' salad[5];?//?'????'

也可以利用數(shù)組長(zhǎng)度（length 屬性）值，反向遍歷訪問數(shù)組元素。

const?salad?=?['????',?'????',?'????',?'????',?'????',?'????',?'????']; const?len?=?salad.length; salad[len?-?1];?//?'????' salad[len?-?3];?//?'????'

可以使用一般的 for 循環(huán)或 forEach 方法來遍歷數(shù)組，也可以使用其它方式來遍歷。

const?salad?=?['????',?'????',?'????',?'????',?'????',?'????',?'????'];for(let?i=0;?i<salad.length;?i++)?{console.log(`Element?at?index?${i}?is?${salad[i]}`); }

結(jié)果如下：

如何向數(shù)組中添加元素

可以使用 push() 方法向數(shù)組中插入一個(gè)元素，它會(huì)將元素追加到數(shù)組的末尾。我們往沙拉中加入一些花生：

const?salad?=?['????',?'????',?'????',?'????',?'????',?'????',?'????']; salad.push('????');

現(xiàn)在沙拉數(shù)組看起來像這樣：

["????", "????", "????", "????", "????", "????", "????", "????"]

注意，push() 方法會(huì)把元素追加到數(shù)組末尾，如果想要在數(shù)組頭部插入一個(gè)元素，需要使用 unshift() 方法。

const?salad?=?['????',?'????',?'????',?'????',?'????',?'????',?'????']; salad.unshift('????');

現(xiàn)在沙拉數(shù)組看起來像這樣：

["????", "????", "????", "????", "????", "????", "????", "????"]

如何移除數(shù)組元素

移除單個(gè)數(shù)組元素的最簡(jiǎn)單方式是使用 pop() 方法。每次調(diào)用 pop() 方法，都會(huì)移除數(shù)組末尾的那個(gè)元素。pop() 方法的返回值是那個(gè)被移除的元素，這個(gè)方法會(huì)改變?cè)紨?shù)組。

const?salad?=?['????',?'????',?'????',?'????',?'????',?'????',?'????']; salad.pop();?//?????console.log(salad);?//?['????',?'????',?'????',?'????',?'????',?'????']

使用 shift() 方法可以移除數(shù)組頭部的一個(gè)元素。與 pop() 方法類似，shift() 方法會(huì)返回那個(gè)被移除的元素，并且會(huì)改變?cè)紨?shù)組。

const?salad?=?['????',?'????',?'????',?'????',?'????',?'????',?'????']; salad.shift();?//?????console.log(salad);?//?['????',?'????',?'????',?'????',?'????',?'????'];

如何克隆數(shù)組

可以使用 slice() 方法來克隆數(shù)組。注意，slice() 方法不改變?cè)紨?shù)組，而是創(chuàng)建一個(gè)原始數(shù)組的淺拷貝副本。

const?salad?=?['????',?'????',?'????',?'????',?'????',?'????',?'????']; const?saladCopy?=?salad.slice();console.log(saladCopy);?//?['????',?'????',?'????',?'????',?'????',?'????',?'????']salad?===?saladCopy;?//?returns?false

也可以使用展開運(yùn)算符來創(chuàng)建數(shù)組副本，我們很快會(huì)學(xué)到。

如何判斷某個(gè)值是不是數(shù)組

可以使用 Array.isArray(value) 方法來判斷某個(gè)值是不是數(shù)組，如果傳入的值是一個(gè)數(shù)組的話，它會(huì)返回 true。

Array.isArray(['????',?'????',?'????',?'????',?'????',?'????',?'????']);?//?returns?true Array.isArray('????');?//?returns?false Array.isArray({?'tomato':?'????'});?//?returns?false Array.isArray([]);?//?returns?true

數(shù)組解構(gòu)

ECMAScript 6（ES6）提供了一些新語法，可以一次性從數(shù)組中獲取多個(gè)元素并賦值給多個(gè)變量。它有助于保持代碼簡(jiǎn)潔明了。這個(gè)新語法被稱為解構(gòu)語法。

下面是使用解構(gòu)語法從數(shù)組中獲取多個(gè)元素的例子：

let?[tomato,?mushroom,?carrot]?=?['????',?'????',?'????'];

現(xiàn)在就可以使用這些變量了：

console.log(tomato,?mushroom,?carrot);?//?Output,???????????????

如果不使用解構(gòu)語法的話，代碼會(huì)是這樣：

let?vegetables?=?['????',?'????',?'????']; let?tomato?=?vegetables[0]; let?mushroom=?vegetables[1]; let?carrot=?vegetables[2];

所以，解構(gòu)語法能夠有助于減少代碼量、極大地提高生產(chǎn)力。

如何為變量指定默認(rèn)值

使用解構(gòu)語法時(shí)，可以為變量指定默認(rèn)值，當(dāng)數(shù)組中沒有對(duì)應(yīng)的元素或者元素的值為 undefined 時(shí)，就會(huì)使用默認(rèn)值。

下面的例子中，我們?yōu)?mushroom 變量指定了一個(gè)默認(rèn)值。

let?[tomato?,?mushroom?=?'????']?=?['????']; console.log(tomato);?//?'????' console.log(mushroom?);?//?'????'

如何跳過某個(gè)數(shù)組元素

使用解構(gòu)獲取數(shù)組元素時(shí)，可以跳過某個(gè)元素。比如說，你可能只關(guān)注數(shù)組的部分元素，這時(shí)候這個(gè)語法就派上用場(chǎng)了。

下面的例子中，我們跳過了“蘑菇”元素。注意表達(dá)式左邊變量聲明中的空格。

let?[tomato,?,?carrot]?=?['????',?'????',?'????'];console.log(tomato);?//?'????' console.log(carrot);?//?'????'

嵌套數(shù)組解構(gòu)

JavaScript 中，數(shù)組是可以嵌套的。這意味著一個(gè)數(shù)組的元素可以是另一個(gè)數(shù)組。數(shù)組可以嵌套任意深度。

例如，我們創(chuàng)建一個(gè)嵌套數(shù)組 fruits，其元素包含一些水果和一個(gè)“蔬菜”數(shù)組。

let?fruits?=?['????',?'????',?'????',?'????',?['????',?'????',?'????']];

要如何獲取以上數(shù)組中的 '????' 呢？同樣的，不使用解構(gòu)的話，可以這樣做：

const?veg?=?fruits[4];?//?returns?the?array?['????',?'????',?'????'] const?carrot?=?veg[2];?//?returns?'????'

或者，也可以使用簡(jiǎn)寫語法：

fruits[4][2];?//?returns?'????'

還可以使用解構(gòu)語法：

let?[,,,,[,,carrot]]?=?['????',?'????',?'????',?'????',?['????',?'????',?'????']];

如何使用展開語法（Spread Syntax）和剩余參數(shù)（Rest Parameter）

從 ES6 開始，通過 ...（連續(xù)的三個(gè)點(diǎn)）可以在數(shù)組解構(gòu)中使用展開語法和剩余參數(shù)。

• 使用剩余參數(shù)時(shí)，... 出現(xiàn)在解構(gòu)語法表達(dá)式的左邊。

• 使用展開語法時(shí)，... 出現(xiàn)在解構(gòu)語法表達(dá)式的右邊。

如何使用剩余參數(shù)

通過剩余參數(shù)，可以將剩下的元素映射到一個(gè)新的數(shù)組中。剩余參數(shù)必須是解構(gòu)語法中的最后一個(gè)變量。

下面的例子中，我們把數(shù)組的前兩個(gè)參數(shù)分別映射到了 tomato 和 mushroom 變量中，剩下的元素則使用 ... 映射到了 rest 變量中。rest 是一個(gè)新數(shù)組，其中包含了剩下的元素。

const?[tomato,?mushroom,?...rest]?=?['????',?'????',?'????',?'????',?'????',?'????',?'????'];console.log(tomato);?//?'????' console.log(mushroom);?//?'????' console.log(rest);?//?["????",?"????",?"????",?"????",?"????"]

如何使用展開運(yùn)算符

使用展開運(yùn)算符，可以這樣來克隆現(xiàn)有的數(shù)組：

const?salad?=?['????',?'????',?'????',?'????',?'????',?'????',?'????'];const?saladCloned?=?[...salad]; console.log(saladCloned);?//?["????",?"????",?"????",?"????",?"????",?"????",?"????"]salad?===?saladCloned?//?false

解構(gòu)的使用場(chǎng)景

我們一起來看看數(shù)組解構(gòu)、展開運(yùn)算符和剩余參數(shù)的一些激動(dòng)人心的使用場(chǎng)景。

使用解構(gòu)交換變量值

使用數(shù)組解構(gòu)語法可以很輕松地交換兩個(gè)變量的值。

let?first?=?'????'; let?second?=?'????'; [first,?second]?=?[second,?first];console.log(first);??//?'????' console.log(second);?//?'????'

合并數(shù)組

我們可以通過合并兩個(gè)數(shù)組的所有元素來創(chuàng)建一個(gè)新數(shù)組（不改變?cè)紨?shù)組）。假設(shè)現(xiàn)在有兩個(gè)數(shù)組——一個(gè)包含一些笑臉，另一個(gè)包含一些蔬菜。

const?emotion?=?['????',?'????']; const?veggies?=?['????',?'????',?'????',?'????'];

現(xiàn)在，我們要把它們合并成一個(gè)新數(shù)組。

const?emotionalVeggies?=?[...emotion,?...veggies]; console.log(emotionalVeggies);?//?["????",?"????",?"????",?"????",?"????",?"????"]

JavaScript 數(shù)組方法

到目前為止，我們已經(jīng)了解了一些數(shù)組屬性和方法。我們做一個(gè)簡(jiǎn)單的回顧：

• push() – 在數(shù)組末尾插入一個(gè)元素。

• unshift() – 在數(shù)組頭部插入一個(gè)元素。

• pop() – 移除數(shù)組末尾的最后一個(gè)元素。

• shift() – 移除數(shù)組頭部的第一個(gè)元素。

• slice() – 創(chuàng)建數(shù)組的淺拷貝副本。

• Array.isArray() – 判斷某個(gè)值是不是數(shù)組。

• length – 數(shù)組的長(zhǎng)度。

現(xiàn)在我們將通過示例來學(xué)習(xí)其它重要的數(shù)組方法。

如何創(chuàng)建數(shù)組、刪除數(shù)組元素、更新數(shù)組元素以及訪問數(shù)組元素

這一節(jié)，我們要學(xué)習(xí)用于創(chuàng)建新數(shù)組、移除數(shù)組元素及清空數(shù)組、訪問數(shù)組元素等操作的方法。

concat() 方法

concat() 方法可以將多個(gè)數(shù)組合并在一起并返回合并后的數(shù)組。這是一個(gè)不可變方法，意味著它不會(huì)改變現(xiàn)有的數(shù)組。

拼接兩個(gè)數(shù)組：

const?first?=?[1,?2,?3]; const?second?=?[4,?5,?6];const?merged?=?first.concat(second);console.log(merged);?//?[1,?2,?3,?4,?5,?6] console.log(first);?//?[1,?2,?3] console.log(second);?//?[4,?5,?6]

使用 concat() 方法也可以拼接兩個(gè)以上的數(shù)組。我們可以這樣拼接任意數(shù)量的數(shù)組：

array.concat(arr1,?arr2,..,..,..,arrN);

示例如下：

const?first?=?[1,?2,?3]; const?second?=?[4,?5,?6]; const?third?=?[7,?8,?9];const?merged?=?first.concat(second,?third);console.log(merged);?//?[1,?2,?3,?4,?5,?6,?7,?8,?9]

join() 方法

join() 方法使用一個(gè)分隔符將數(shù)組的所有元素拼接成一個(gè)字符串，并返回這個(gè)字符串。默認(rèn)的分隔符是逗號(hào)（,）。

const?emotions?=?['????',?'????',?'????',?'????'];const?joined?=?emotions.join(); console.log(joined);?//?"????,????,????,????"

可以傳入一個(gè)自定義分隔符用于拼接數(shù)組元素。下面是一個(gè)使用自定義分隔符拼接數(shù)組元素的例子：

const?joined?=?emotions.join('<=>'); console.log(joined);?//?"????<=>????<=>????<=>????"

在空數(shù)組上調(diào)用 join() 方法，返回一個(gè)空字符串：

[].join()?//?returns?""

fill() 方法

fill() 方法使用一個(gè)固定值填充數(shù)組。可以使用這個(gè)固定值填充整個(gè)數(shù)組，也可以只覆蓋選定的元素。注意，fill() 方法會(huì)改變?cè)紨?shù)組。

const?colors?=?['red',?'blue',?'green'];colors.fill('pink'); console.log(colors);?//?["pink",?"pink",?"pink"]

下面是一個(gè)使用 fill() 方法覆蓋數(shù)組的最后兩個(gè)元素的例子：

const?colors?=?['red',?'blue',?'green'];colors.fill('pink',?1,3);?//?["red",?"pink",?"pink"]

這個(gè)例子中，fill() 方法的第一個(gè)參數(shù)是用來填充數(shù)組的值，第二個(gè)參數(shù)是替換的起始索引（從 0 開始計(jì)算），最后一個(gè)參數(shù)是終止索引（最大值可以是 colors.length）。

請(qǐng)查看這個(gè) Twitter 主題以了解 fill() 方法的實(shí)際用法。

你也可以查看這個(gè)示例項(xiàng)目：https://github.com/atapas/array-fill-color-cards。

includes() 方法

可以使用 includes() 方法來判斷一個(gè)數(shù)組中是否包含某個(gè)元素，如果包含則返回 true，否則返回 false。

const?names?=?['tom',?'alex',?'bob',?'john'];names.includes('tom');?//?returns?true names.includes('july');?//?returns?false

indexOf() 方法

可以使用 indexOf() 方法找到某個(gè)元素在數(shù)組中的索引位置。它返回這個(gè)元素在數(shù)組中首次出現(xiàn)的索引，如果沒有找到這個(gè)元素則返回 -1。

const?names?=?['tom',?'alex',?'bob',?'john'];names.indexOf('alex');?//?returns?1 names.indexOf('rob');?//?returns?-1

還有一個(gè) lastIndexOf() 方法，可以找出某個(gè)元素在數(shù)組中最后出現(xiàn)的位置。與 indexOf() 類似，lastIndexOf() 在找不到這個(gè)元素時(shí)也返回 -1。

const?names?=?['tom',?'alex',?'bob',?'tom'];names.indexOf('tom');?//?returns?0 names.lastIndexOf('tom');?//?returns?3

reverse() 方法

顧名思義，reverse() 方法將數(shù)組中元素的位置顛倒，最后一個(gè)元素變成第一個(gè)、第一個(gè)元素變成最后一個(gè)。

const?names?=?['tom',?'alex',?'bob'];names.reverse();?//?returns?["bob",?"alex",?"tom"]

reverse() 方法會(huì)改變?cè)紨?shù)組。

sort() 方法

sort() 方法可能是最常用的數(shù)組方法之一。sort() 方法默認(rèn)會(huì)把元素轉(zhuǎn)換為字符串再對(duì)它們進(jìn)行排序。默認(rèn)的排序方式是升序排列。sort() 方法會(huì)改變?cè)紨?shù)組。

const?names?=?['tom',?'alex',?'bob'];names.sort();?//?returns?["alex",?"bob",?"tom"]

sort() 方法接收一個(gè)可選的比較器函數(shù)作為參數(shù)，可以編寫一個(gè)比較器函數(shù)傳入 sort() 方法來覆蓋默認(rèn)的排序行為。

假設(shè)現(xiàn)在有一個(gè)數(shù)字?jǐn)?shù)組，我們使用比較器函數(shù)將它按升序和降序排序：

const?numbers?=?[23,?5,?100,?56,?9,?13,?37,?10,?1]

首先，調(diào)用 sort() 方法，并觀察結(jié)果：

numbers.sort();

現(xiàn)在，排序后的數(shù)組為 [1, 10, 100, 13, 23, 37, 5, 56, 9]。這并不是我們預(yù)期的結(jié)果。得到這個(gè)結(jié)果是因?yàn)?sort() 方法默認(rèn)會(huì)將元素轉(zhuǎn)換為字符串，再基于字符串諸個(gè)字符對(duì)應(yīng)的 UTF-16 編碼值進(jìn)行比較。

為了解決這個(gè)問題，我們編寫一個(gè)比較器函數(shù)。這是用于升序排序的：

function?ascendingComp(a,?b){return?(a-b); }

把比較器函數(shù)傳入 sort() 方法：

numbers.sort(ascendingComp);?//?retruns?[1,?5,?9,?10,?13,?23,?37,?56,?100]/*?也可以使用行內(nèi)函數(shù)：numbers.sort(function(a,?b)?{return?(a-b); });或者使用箭頭函數(shù)的寫法：numbers.sort((a,?b)?=>?(a-b));*/

降序排序：

numbers.sort((a,?b)?=>?(b-a));

查看這個(gè) GitHub 倉庫以獲取更多排序示例和技巧：https://github.com/atapas/js-array-sorting。

splice() 方法

splice() 方法可以幫助你向數(shù)組中添加元素、更新數(shù)組元素以及移除數(shù)組元素。剛開始接觸這個(gè)方法可能會(huì)令人困惑，不過只要你理解了它的正確用法，就能夠掌握。

splice() 方法的主要目標(biāo)是從數(shù)組中移除元素。它會(huì)返回由被移除的元素組成的數(shù)組，并且會(huì)改變?cè)紨?shù)組。你也可以用它來向數(shù)組中添加元素或者替換數(shù)組中的元素。

使用 splice() 方法向數(shù)組中添加一個(gè)元素，需要傳入插入的目標(biāo)位置、從目標(biāo)位置算起想要?jiǎng)h除的元素?cái)?shù)量以及要插入的元素。

下面的例子中，我們?cè)谒饕秊?1 的位置上插入了一個(gè)元素 zack，沒有刪除任何元素。

const?names?=?['tom',?'alex',?'bob'];names.splice(1,?0,?'zack');console.log(names);?//?["tom",?"zack",?"alex",?"bob"]

看看下面的例子，我們移除了索引 2 位置之后的一個(gè)元素（即第三個(gè)元素），并添加了一個(gè)元素 zack。splice() 方法返回一個(gè)由移除掉的元素——bob——組成的數(shù)組。

const?names?=?['tom',?'alex',?'bob'];const?deleted?=?names.splice(2,?1,?'zack');console.log(deleted);?//?["bob"] console.log(names);?//?["tom",?"alex",?"zack"]

查看這個(gè) Twitter 主題以了解如何使用 splice() 方法清空數(shù)組。

靜態(tài)數(shù)組方法

在 JavaScript 中，數(shù)組有三個(gè)靜態(tài)方法。我們已經(jīng)討論過 Array.isArray()，接下來要探討其余兩個(gè)方法。

Array.from() 方法

假設(shè)有以下 HTML 代碼片段，其中包含一個(gè) div 和一些列表元素：

<div?id="main"><ul><ol?type="1"><li>...</li><li>...</li><li>...</li><li>...</li><li>...</li><li>...</li><li>...</li><li>...</li><li>...</li><li>...</li></ol></ul>? </div>

我們使用 getElementsByTagName() 方法獲取這些列表元素。

document.getElementsByTagName('li');

它返回如下 HTMLCollection 對(duì)象：

HTMLCollection 是類數(shù)組對(duì)象

它和數(shù)組類似，我們?cè)囍褂?forEach 來遍歷它：

document.getElementsByTagName('li').forEach(()?=>?{//?Do?something?here.. })

猜猜會(huì)輸出什么？會(huì)報(bào)出以下錯(cuò)誤：

在類數(shù)組對(duì)象上調(diào)用 forEach 發(fā)生錯(cuò)誤

為什么會(huì)這樣？這是因?yàn)?HTMLCollection 并不是數(shù)組，而是 類數(shù)組 對(duì)象，所以不能使用 forEach 來遍歷它。

其原型（proto）是 Object

這里就需要用到 Array.from() 方法了，Array.from() 能將類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組，進(jìn)而能夠在它上面執(zhí)行所有數(shù)組操作。

const?collection?=?Array.from(document.getElementsByTagName('li'))

這里的 collection 是一個(gè)數(shù)組：

其原型為 Array

Array.of() 方法

Array.of() 可以使用任意數(shù)量任意類型的元素創(chuàng)建一個(gè)新數(shù)組。

Array.of(2,?false,?'test',?{'name':?'Alex'})

輸出如下：

Array.of() 方法的輸出結(jié)果

數(shù)組迭代器方法

現(xiàn)在我們要學(xué)習(xí)數(shù)組迭代器方法。這些方法在執(zhí)行數(shù)組迭代、計(jì)算、做判斷、過濾元素等操作時(shí)很有用。

到目前為止，我們還沒見過對(duì)象數(shù)組的示例。在這一節(jié)，我們將會(huì)使用下面的對(duì)象數(shù)組來解釋和演示這些迭代器方法。

這個(gè)數(shù)組包含了一些訂閱各種付費(fèi)課程的學(xué)生的信息：

let?students?=?[{'id':?001,'f_name':?'Alex','l_name':?'B','gender':?'M','married':?false,'age':?22,'paid':?250,??'courses':?['JavaScript',?'React']},{'id':?002,'f_name':?'Ibrahim','l_name':?'M','gender':?'M','married':?true,'age':?32,'paid':?150,??'courses':?['JavaScript',?'PWA']},{'id':?003,'f_name':?'Rubi','l_name':?'S','gender':?'F','married':?false,'age':?27,'paid':?350,??'courses':?['Blogging',?'React',?'UX']},{'id':?004,'f_name':?'Zack','l_name':?'F','gender':?'M','married':?true,'age':?36,'paid':?250,??'courses':?['Git',?'React',?'Branding']}? ];

讓我們開始吧。所有數(shù)組迭代器方法都接收一個(gè)函數(shù)作為參數(shù)，需要在這個(gè)函數(shù)中聲明迭代邏輯。

filter() 方法

filter() 方法用所有滿足過濾條件的元素來創(chuàng)建一個(gè)新數(shù)組。我們要找出女學(xué)生，所以過濾條件應(yīng)該是 gender === 'F'。

const?femaleStudents?=?students.filter((element,?index)?=>?{return?element.gender?===?'F'; })console.log(femaleStudents);

輸出如下：

結(jié)果是正確的，名為 Rubi 的學(xué)生是目前唯一的女學(xué)生。

map()方法

map() 方法遍歷整個(gè)數(shù)組，依次對(duì)數(shù)組元素執(zhí)行回調(diào)函數(shù)并用這些返回值創(chuàng)建一個(gè)新數(shù)組。我們將會(huì)創(chuàng)建一個(gè)由 students 數(shù)組中所有學(xué)生的全名組成的新數(shù)組。

const?fullNames?=?students.map((element,?index)?=>?{return?{'fullName':?element['f_name']?+?'?'?+?element['l_name']} });console.log(fullNames);

輸出如下：

這里我們可以看到由包含 fullName 屬性的對(duì)象組成的數(shù)組，fullName 是由 student 對(duì)象的 f_name 和 l_name 屬性計(jì)算得到的。

reduce() 方法

reduce() 方法對(duì)每個(gè)數(shù)組元素執(zhí)行 reducer 函數(shù)，并將其結(jié)果匯總為單個(gè)返回值。我們將會(huì)在 students 數(shù)組中應(yīng)用一個(gè) reducer 函數(shù)來計(jì)算所有學(xué)生支付的總額。

const?total?=?students.reduce((accumulator,?student,?currentIndex,?array)?=>?{accumulator?=?accumulator?+?student.paid;return?(accumulator);},? 0);console.log(total);?//?1000

在上面的代碼中，

• 我們將累加器（accumulator）初始化為 0。

• 我們對(duì)每個(gè) student 對(duì)象執(zhí)行 reduce 方法，讀取 paid 屬性值并把它累加在累加器上。

• 最后，返回累加器。

some() 方法

some() 方法返回一個(gè)布爾值（true/false），其返回值取決于數(shù)組中是否至少有一個(gè)元素符合回調(diào)函數(shù)中的判斷條件。我們來看看是否有學(xué)生的年齡小于 30 歲。

let?hasStudentBelow30?=?students.some((element,?index)?=>?{return?element.age?<?30; });console.log(hasStudentBelow30);?//?true

是的，我們看到至少有一個(gè)學(xué)生的年齡是小于 30 歲的。

find() 方法

使用 some() 方法，我們已經(jīng)看到有一個(gè) 30 歲以下的學(xué)生。讓我們找出這個(gè)學(xué)生。

為此，我們會(huì)用到 find() 方法，它會(huì)返回?cái)?shù)組中第一個(gè)滿足判斷條件的元素。

還有另一個(gè)相關(guān)的方法 findIndex()，這個(gè)方法返回我們使用 find() 方法找到的元素的索引，如果沒有符合條件的元素則返回 -1。

下面的例子中，我們向 find() 方法中傳入了一個(gè)函數(shù)用來判斷學(xué)生的年齡，它會(huì)返回滿足判斷條件的學(xué)生。

const?student?=?students.find((element,?index)?=>?{return?element.age?<?30; });console.log(student);

輸出如下：

可以看到，他就是 22 歲的 Alex，我們找到他了。

every() 方法

every() 方法檢查是否數(shù)組的每個(gè)元素都滿足給定的判斷條件。讓我們檢查一下是不是所有學(xué)生都訂閱了至少兩門課程。

const?atLeastTwoCourses?=?students.every((elements,?index)?=>?{return?elements.courses.length?>=?2; });console.log(atLeastTwoCourses);?//?true

正如預(yù)期，我們看到結(jié)果為 true。

提案中的方法

截至 2021 年 5 月，ECMAScript 提案中有一個(gè)新的數(shù)組方法，即 at() 方法。

at() 方法

提案中的 at() 方法可以讓你使用負(fù)數(shù)索引來訪問數(shù)組元素（譯注：使用負(fù)數(shù)索引即從數(shù)組末尾開始訪問元素，-1 表示最后一個(gè)元素、-2 表示倒數(shù)第二個(gè)元素……以此類推）。截至目前，這個(gè)方法還不可用。現(xiàn)在只能使用正數(shù)索引從數(shù)組開頭訪問元素。

目前想從數(shù)組末尾開始訪問數(shù)組元素要借助 length 屬性。通過引入 at() 方法，就可以在單個(gè)方法里面使用正數(shù)索引或者負(fù)數(shù)索引來訪問元素。

const?junkFoodILove?=?['????',?'????',?'????',?'????',?'????',?'????',?'????',?'????'];junkFoodILove.at(0);?//????? junkFoodILove.at(3);?//????? junkFoodILove.at(-1);?//????? junkFoodILove.at(-5);?//????? junkFoodILove.at(-8);?//????? junkFoodILove.at(10);?//?undefined

這是一個(gè)簡(jiǎn)單示例：

JavaScript at() 方法示例

在 at() 方法加入 JavaScript 語言之前，你可以使用這個(gè) polyfill 來獲得它的功能。查看這個(gè) GitHub 倉庫以獲取 at() 方法的示例：https://github.com/atapas/js-array-at-method。

結(jié)束之前......

希望你覺得這篇文章有價(jià)值，也希望它能夠幫助你更好地理解 JavaScript 數(shù)組。請(qǐng)多多練習(xí)文中的示例，以便更好地掌握它們。你可以在我的 GitHub 倉庫中找到所有代碼示例。

保持聯(lián)系，我平時(shí)活躍在 Twitter (@tapasadhikary)，歡迎關(guān)注我。

推薦閱讀：

• 為什么需要了解類數(shù)組對(duì)象？

• 關(guān)于 JavaScript 排序方法（sort）的 5 個(gè)實(shí)用技巧

• JavaScript 中清空數(shù)組的各種方式及其后果

• 使用 map、reduce、filter 和其它數(shù)組迭代器增強(qiáng)你的 JavaScript 水平

• 為什么需要了解 JavaScript 數(shù)組的 at() 方法？

---

原文鏈接：https://www.freecodecamp.org/news/the-javascript-array-handbook/

作者：TAPAS ADHIKARY

譯者：Humilitas

---

最近組建了一個(gè)江西人的前端交流群，如果你是江西人可以加我微信?ruochuan12?私信 江西?拉你進(jìn)群。

---

推薦閱讀

我在阿里招前端，該怎么幫你（可進(jìn)面試群）
畢業(yè)年限不長(zhǎng)的前端焦慮和突破方法

前端搶飯碗系列之Vue項(xiàng)目如何做單元測(cè)試
老姚淺談：怎么學(xué)JavaScript？

·················?若川簡(jiǎn)介?·················

你好，我是若川，畢業(yè)于江西高校。現(xiàn)在是一名前端開發(fā)“工程師”。寫有《學(xué)習(xí)源碼整體架構(gòu)系列》多篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會(huì)寫一篇年度總結(jié)，已經(jīng)寫了7篇，點(diǎn)擊查看年度總結(jié)。
同時(shí)，活躍在知乎@若川，掘金@若川。致力于分享前端開發(fā)經(jīng)驗(yàn)，愿景：幫助5年內(nèi)前端人走向前列。

點(diǎn)擊上方卡片關(guān)注我、加個(gè)星標(biāo)

今日話題

略。歡迎分享、收藏、點(diǎn)贊、在看我的公眾號(hào)文章~

總結(jié)

以上是生活随笔為你收集整理的JavaScript 数组 API 全解析的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。