英文 | https://javascript.plainenglish.io/12-javascript-array-methods-every-programmer-should-know-da42b0794f76

翻譯 | 楊小愛

let farmAnimals = ["cow", "chicken", "pig", "horse", "sheep", "turkey"];

1、filter() 

filter() 方法用于按特定條件過濾現(xiàn)有數(shù)組，然后，根據(jù)結(jié)果創(chuàng)建新數(shù)組。它需要當(dāng)前元素的值和一個(gè)函數(shù)來運(yùn)行現(xiàn)有數(shù)組中的每個(gè)元素。您還可以包含當(dāng)前值的索引和數(shù)組，但它是可選的。

這是一個(gè)過濾器示例，它查看原始數(shù)組“farmAnimals”，檢查數(shù)組中每個(gè)項(xiàng)目的長度是否大于 5，如果有一個(gè)項(xiàng)目，則過濾器方法將項(xiàng)目推送到一個(gè)名為的新數(shù)組中 “newFarmAnimals”。

let newFarmAnimals = farmAnimals.filter((farmAnimal) => farmAnimal.length > 5);console.log(newFarmAnimals);

控制臺(tái)中的結(jié)果如下所示：

需要注意的是 filter() 方法不會(huì)影響原始數(shù)組。如果您還要控制臺(tái)原始數(shù)組“farmAnimals”，它看起來像這樣：

2、 findIndex()

findIndex() 方法有點(diǎn)類似于上面的 filter() 方法，不同之處在于它返回第一個(gè)通過特定條件的元素的索引，而不是每個(gè)通過條件的元素的新數(shù)組。

findIndex() 也不影響使用它的原始數(shù)組。

如果數(shù)組內(nèi)的元素為空，則該方法不會(huì)運(yùn)行。如果數(shù)組內(nèi)沒有元素通過條件，則 findIndex() 方法返回 -1。

在此示例中，該方法正在查看原始數(shù)組以查看哪個(gè)元素等于“pig”。一旦找到該元素，它就會(huì)返回它的索引。請(qǐng)記住，數(shù)組從 0 開始，因此，即使它是數(shù)組中的第 3 項(xiàng)，它的索引也是 2。

let farmAnimalsIndex = farmAnimals.findIndex((farmAnimal) => farmAnimal === "pig")console.log("farmAnimalsIndex: ", farmAnimalsIndex);

這是控制臺(tái)內(nèi)部的結(jié)果：

這是另一個(gè)例子，除了這方法是查看原始數(shù)組以查看哪個(gè)元素等于“dog”，原始數(shù)組中不存在的項(xiàng)目。

let farmAnimalsIndex = farmAnimals.findIndex((farmAnimal) => farmAnimal === "pig")console.log("farmAnimalsIndex: ", farmAnimalsIndex);

如上所述，如果數(shù)組中沒有元素通過給定的條件，則 findIndex() 方法返回 -1

3、 forEach()

forEach() 方法可用于為數(shù)組中的每個(gè)元素運(yùn)行一個(gè)函數(shù)。如果您需要列出數(shù)組中的每個(gè)項(xiàng)目，則此方法非常有用。forEach() 方法要求您傳遞一個(gè)函數(shù)和當(dāng)前元素的值。也可以選擇傳遞當(dāng)前元素的索引或數(shù)組。

這是在原始“farmAnimals”數(shù)組中列出每個(gè)項(xiàng)目和項(xiàng)目索引的示例：

let farmAnimalsList = farmAnimals.forEach((farmAnimal, index) => console.log({index: index, animal: farmAnimal}))console.log(farmAnimalsList);

這是控制臺(tái)中的結(jié)果：

4、map()

map() 方法與上面描述的 forEach() 方法非常相似，除了 map() 根據(jù)傳遞的函數(shù)創(chuàng)建一個(gè)新數(shù)組。它不影響原始數(shù)組。

與 forEach() 類似，map() 要求您傳遞一個(gè)函數(shù)和當(dāng)前元素的值。傳遞當(dāng)前元素的索引或數(shù)組也是可選的。

這是一個(gè)遍歷原始數(shù)組“farmAnimals”中每個(gè)項(xiàng)目的示例。每個(gè)項(xiàng)目都與其索引連接并添加到一個(gè)名為“farmAnimalsList”的新數(shù)組中：

let farmAnimalsList = farmAnimals.map((farmAnimal, index) => farmAnimal + "-" + index)console.log(farmAnimalsList);

這是控制臺(tái)中的輸出：

5、push()

push() 方法非常適合將新項(xiàng)目添加到數(shù)組的末尾。此方法將影響您的原始數(shù)組。您可以在 push() 方法中添加任意數(shù)量的項(xiàng)目，但您必須至少擁有一項(xiàng)。

假設(shè)您想向原始數(shù)組中添加一些新動(dòng)物，以下是您可以如何執(zhí)行此操作的示例：

farmAnimals.push("rabbit", "goat", "llama");console.log(farmAnimals);

結(jié)果輸出將是：

6、pop()

pop() 方法與上面提到的 push() 方法有些相關(guān)，因?yàn)樗鼊h除數(shù)組的最后一個(gè)元素，而不是在數(shù)組末尾添加一個(gè)元素。運(yùn)行后，pop() 方法將返回它刪除的項(xiàng)目。此方法也會(huì)影響您的原始數(shù)組。

下面是一個(gè) pop() 的例子：

let removedFarmAnimal = farmAnimals.pop();console.log("removedFarmAnimal: ", removedFarmAnimal);console.log(farmAnimals);

這是顯示被刪除的項(xiàng)目和原始數(shù)組的結(jié)果：

7、slice() 

slice() 方法獲取原始數(shù)組中的選定項(xiàng)，將它們“切片”出來，然后返回一個(gè)包含選定項(xiàng)的新數(shù)組。此方法不會(huì)更改原始數(shù)組。

slice() 方法接受一個(gè)“開始”和“結(jié)束”參數(shù)，告訴它從哪里開始刪除項(xiàng)目以及從哪里停止，但它是可選的。但是，如果您選擇省略兩者；您將返回原始數(shù)組。

如果我們只想要原始數(shù)組中索引為 1-5 的項(xiàng)目，那么，這些就是我們將在方法內(nèi)部使用的參數(shù)。以下是使用 splice() 的示例：

let selectedFarmAnimals = farmAnimals.slice(1, 5);console.log("selectedFarmAnimals: ", selectedFarmAnimals);

這是新數(shù)組：

8、splice()

splice() 方法允許您添加或刪除數(shù)組中的項(xiàng)目。它需要一個(gè)索引，即您要添加或刪除項(xiàng)目的位置。還可以選擇包含要?jiǎng)h除的項(xiàng)目數(shù)量或要添加的元素。

使用 splice() 方法添加時(shí)，新數(shù)組返回為空，但刪除項(xiàng)時(shí)，將返回刪除的項(xiàng)。此方法將影響您的原始數(shù)組“farmAnimals”。

下面是 splice() 方法從原始數(shù)組中刪除索引為 3 處的 2 個(gè)項(xiàng)目的示例：

let splicedFarmAnimals = farmAnimals.splice(3, 2);console.log("splicedFarmAnimals: ", splicedFarmAnimals);console.log(farmAnimals);

拼接后的數(shù)組結(jié)果：

原始數(shù)組：

下面是 splice() 方法在索引為 1 處從原始數(shù)組中添加 2 個(gè)項(xiàng)目的示例：

let splicedFarmAnimals = farmAnimals.splice(1, 0, "goat", "duck");console.log("splicedFarmAnimals: ", splicedFarmAnimals);console.log(farmAnimals);

拼接后的數(shù)組結(jié)果：

如上所述，使用 splice() 方法添加時(shí)，返回的新數(shù)組為空。然而，原始數(shù)組；將包含您添加的新項(xiàng)目。

原始數(shù)組：

9、indexOf()

indexOf() 方法將返回您傳遞的值的索引。value 或 item 是必需的，但您可以選擇添加 item 的開始索引。

該方法從您傳遞的值的索引開始，然后遍歷數(shù)組的其余部分。如果您希望該方法從您傳遞的索引向左而不是向右，您必須給出一個(gè)負(fù)的起始值。

與 findIndex() 方法類似，如果沒有找到值，則返回 -1。indexOf() 方法不會(huì)影響原始數(shù)組?！稗r(nóng)場動(dòng)物”。

以下是使用 indexOf() 方法查找“pig”索引的示例：

let indexOfFarmAnimals = farmAnimals.indexOf("pig");console.log("indexOfFarmAnimals: ", indexOfFarmAnimals);

這是控制臺(tái)中的結(jié)果：

10、concat()

concat() 方法連接數(shù)組，然后返回連接數(shù)組的新數(shù)組。在 concat() 方法中添加幾個(gè)數(shù)組是可選的，但您必須至少有一個(gè)。此方法不會(huì)影響原始數(shù)組。

這是向現(xiàn)有數(shù)組“farmAnimals”添加新數(shù)組“farmers”的示例。

let farmers = ["Tim", "Barb", "Sarah", "Joe"];let joinedArrays = farmAnimals.concat(farmers);console.log("joinedArrays: ", joinedArrays);

這是控制臺(tái)中的新數(shù)組“joinedArrays”：

11、toString()

toString() 非常簡單。It 方法將返回?cái)?shù)組中每個(gè)項(xiàng)目的字符串。此方法不會(huì)更改原始數(shù)組“farmAnimals”。toString() 方法也不接受參數(shù)。

let farmAnimalsString = farmAnimals.toString();console.log("farmAnimalsString: ", farmAnimalsString);

這是控制臺(tái)中的結(jié)果：

12、sort() 

sort() 方法將遍歷數(shù)組并根據(jù)其內(nèi)容按字母順序或數(shù)字升序?qū)ζ湓剡M(jìn)行排序。此方法將更改原始數(shù)組。

以下是用于原始方法“farmAnimals”的 sort() 方法示例：

let sortedFarmAnimals = farmAnimals.sort();console.log("sortedFarmAnimals: ", sortedFarmAnimals);

由于原始數(shù)組“farmAnimals”由字符串組成，因此，按字母順序排序。這是控制臺(tái)中的結(jié)果：

結(jié)論

剛開始時(shí)，可能會(huì)有些不知所措。沒有那個(gè)程序員會(huì)牢記這些方法，但知道這些方法，并且能夠搜索語法是一個(gè)很好的開始！

與往常一樣，我建議您自己嘗試其中的一些。從小處著手，然后逐步使用更大的數(shù)組和更困難的方法。

MDN Web Docs 中的 JavaScript 數(shù)組方法列表比我在這里列出的要多得多。W3Schools 也是一個(gè)很好的資源，可以提供有關(guān) JavaScript 數(shù)組方法的更多信息。您可以做進(jìn)一步的學(xué)習(xí)。

感謝您的閱讀，如果您覺得這篇文章對(duì)您有幫助，請(qǐng)記得給分享給您的朋友，也許也能夠幫助到他。

如果您喜歡我今天分享的內(nèi)容，請(qǐng)點(diǎn)贊我，關(guān)注我。

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)