英文 | https://javascript.plainenglish.io/12-javascript-array-methods-every-programmer-should-know-da42b0794f76
翻譯 | 楊小愛
目前，JavaScript 是開發人員中使用最廣泛的程式設計語言之一。它可用于 Web 開發、遊戲開發、移動應用程式等等。
與許多其他語言類似，JavaScript 允許您在數組中建立和存儲多個值。JavaScript 也有很多在開發過程中很有用的全局方法——我将在本文中介紹其中的一些。
在本文中，我将使用下面的示例數組來展示以下十二種數組方法中的每一種是如何工作的。
let farmAnimals = ["cow", "chicken", "pig", "horse", "sheep", "turkey"]; 1、filter()
filter() 方法用于按特定條件過濾現有數組，然後，根據結果建立新數組。它需要目前元素的值和一個函數來運作現有數組中的每個元素。您還可以包含目前值的索引和數組，但它是可選的。
這是一個過濾器示例，它檢視原始數組“farmAnimals”，檢查數組中每個項目的長度是否大于 5，如果有一個項目，則過濾器方法将項目推送到一個名為的新數組中 “newFarmAnimals”。
let newFarmAnimals = farmAnimals.filter((farmAnimal) => farmAnimal.length > 5);
console.log(newFarmAnimals); 控制台中的結果如下所示：
需要注意的是 filter() 方法不會影響原始數組。如果您還要控制台原始數組“farmAnimals”，它看起來像這樣：
2、 findIndex()
findIndex() 方法有點類似于上面的 filter() 方法，不同之處在于它傳回第一個通過特定條件的元素的索引，而不是每個通過條件的元素的新數組。
findIndex() 也不影響使用它的原始數組。
如果數組内的元素為空，則該方法不會運作。如果數組内沒有元素通過條件，則 findIndex() 方法傳回 -1。
在此示例中，該方法正在檢視原始數組以檢視哪個元素等于“pig”。一旦找到該元素，它就會傳回它的索引。請記住，數組從 0 開始，是以，即使它是數組中的第 3 項，它的索引也是 2。
let farmAnimalsIndex = farmAnimals.findIndex((farmAnimal) => farmAnimal === "pig")
console.log("farmAnimalsIndex: ", farmAnimalsIndex); 這是控制台内部的結果：
這是另一個例子，除了這方法是檢視原始數組以檢視哪個元素等于“dog”，原始數組中不存在的項目。
let farmAnimalsIndex = farmAnimals.findIndex((farmAnimal) => farmAnimal === "pig")
console.log("farmAnimalsIndex: ", farmAnimalsIndex); 如上所述，如果數組中沒有元素通過給定的條件，則 findIndex() 方法傳回 -1
3、 forEach()
forEach() 方法可用于為數組中的每個元素運作一個函數。如果您需要列出數組中的每個項目，則此方法非常有用。forEach() 方法要求您傳遞一個函數和目前元素的值。也可以選擇傳遞目前元素的索引或數組。
這是在原始“farmAnimals”數組中列出每個項目和項目索引的示例：
let farmAnimalsList = farmAnimals.forEach((farmAnimal, index) => console.log({index: index, animal: farmAnimal}))
console.log(farmAnimalsList); 這是控制台中的結果：
4、map()
map() 方法與上面描述的 forEach() 方法非常相似，除了 map() 根據傳遞的函數建立一個新數組。它不影響原始數組。
與 forEach() 類似，map() 要求您傳遞一個函數和目前元素的值。傳遞目前元素的索引或數組也是可選的。
這是一個周遊原始數組“farmAnimals”中每個項目的示例。每個項目都與其索引連接配接并添加到一個名為“farmAnimalsList”的新數組中：
let farmAnimalsList = farmAnimals.map((farmAnimal, index) => farmAnimal + "-" + index)
console.log(farmAnimalsList); 這是控制台中的輸出：
5、push()
push() 方法非常适合将新項目添加到數組的末尾。此方法将影響您的原始數組。您可以在 push() 方法中添加任意數量的項目，但您必須至少擁有一項。
假設您想向原始數組中添加一些新動物，以下是您可以如何執行此操作的示例：
farmAnimals.push("rabbit", "goat", "llama");
console.log(farmAnimals); 結果輸出将是：
6、pop()
pop() 方法與上面提到的 push() 方法有些相關，因為它删除數組的最後一個元素，而不是在數組末尾添加一個元素。運作後，pop() 方法将傳回它删除的項目。此方法也會影響您的原始數組。
下面是一個 pop() 的例子：
let removedFarmAnimal = farmAnimals.pop();
console.log("removedFarmAnimal: ", removedFarmAnimal);
console.log(farmAnimals); 這是顯示被删除的項目和原始數組的結果：
7、slice()
slice() 方法擷取原始數組中的標明項，将它們“切片”出來，然後傳回一個包含標明項的新數組。此方法不會更改原始數組。
slice() 方法接受一個“開始”和“結束”參數，告訴它從哪裡開始删除項目以及從哪裡停止，但它是可選的。但是，如果您選擇省略兩者；您将傳回原始數組。
如果我們隻想要原始數組中索引為 1-5 的項目，那麼，這些就是我們将在方法内部使用的參數。以下是使用 splice() 的示例：
let selectedFarmAnimals = farmAnimals.slice(1, 5);
console.log("selectedFarmAnimals: ", selectedFarmAnimals); 這是新數組：
8、splice()
splice() 方法允許您添加或删除數組中的項目。它需要一個索引，即您要添加或删除項目的位置。還可以選擇包含要删除的項目數量或要添加的元素。
使用 splice() 方法添加時，新數組傳回為空，但删除項時，将傳回删除的項。此方法将影響您的原始數組“farmAnimals”。
下面是 splice() 方法從原始數組中删除索引為 3 處的 2 個項目的示例：
let splicedFarmAnimals = farmAnimals.splice(3, 2);
console.log("splicedFarmAnimals: ", splicedFarmAnimals);
console.log(farmAnimals); 拼接後的數組結果：
原始數組：
下面是 splice() 方法在索引為 1 處從原始數組中添加 2 個項目的示例：
let splicedFarmAnimals = farmAnimals.splice(1, 0, "goat", "duck");
console.log("splicedFarmAnimals: ", splicedFarmAnimals);
console.log(farmAnimals); 拼接後的數組結果：
如上所述，使用 splice() 方法添加時，傳回的新數組為空。然而，原始數組；将包含您添加的新項目。
原始數組：
9、indexOf()
indexOf() 方法将傳回您傳遞的值的索引。value 或 item 是必需的，但您可以選擇添加 item 的開始索引。
該方法從您傳遞的值的索引開始，然後周遊數組的其餘部分。如果您希望該方法從您傳遞的索引向左而不是向右，您必須給出一個負的起始值。
與 findIndex() 方法類似，如果沒有找到值，則傳回 -1。indexOf() 方法不會影響原始數組。“農場動物”。
以下是使用 indexOf() 方法查找“pig”索引的示例：
let indexOfFarmAnimals = farmAnimals.indexOf("pig");
console.log("indexOfFarmAnimals: ", indexOfFarmAnimals); 這是控制台中的結果：
10、concat()
concat() 方法連接配接數組，然後傳回連接配接數組的新數組。在 concat() 方法中添加幾個數組是可選的，但您必須至少有一個。此方法不會影響原始數組。
這是向現有數組“farmAnimals”添加新數組“farmers”的示例。
let farmers = ["Tim", "Barb", "Sarah", "Joe"];
let joinedArrays = farmAnimals.concat(farmers);
console.log("joinedArrays: ", joinedArrays); 這是控制台中的新數組“joinedArrays”：
11、toString()
toString() 非常簡單。It 方法将傳回數組中每個項目的字元串。此方法不會更改原始數組“farmAnimals”。toString() 方法也不接受參數。
let farmAnimalsString = farmAnimals.toString();
console.log("farmAnimalsString: ", farmAnimalsString); 這是控制台中的結果：
12、sort()
sort() 方法将周遊數組并根據其内容按字母順序或數字升序對其元素進行排序。此方法将更改原始數組。
以下是用于原始方法“farmAnimals”的 sort() 方法示例：
let sortedFarmAnimals = farmAnimals.sort();
console.log("sortedFarmAnimals: ", sortedFarmAnimals); 由于原始數組“farmAnimals”由字元串組成，是以，按字母順序排序。這是控制台中的結果：
結論
剛開始時，可能會有些不知所措。沒有那個程式員會牢記這些方法，但知道這些方法，并且能夠搜尋文法是一個很好的開始！
與往常一樣，我建議您自己嘗試其中的一些。從小處着手，然後逐漸使用更大的數組和更困難的方法。
MDN Web Docs 中的 JavaScript 數組方法清單比我在這裡列出的要多得多。W3Schools 也是一個很好的資源，可以提供有關 JavaScript 數組方法的更多資訊。您可以做進一步的學習。
感謝您的閱讀，如果您覺得這篇文章對您有幫助，請記得給分享給您的朋友，也許也能夠幫助到他。
如果您喜歡我今天分享的内容，請點贊我，關注我。
學習更多技能
請點選下方公衆号