如何在 JavaScript 中使用數組方法：迭代方法
本文最初是為 DigitalOcean 編寫的 .
簡介
在 JavaScript 中，數組數據類型由元素列表組成。 JavaScript 開發人員可以使用許多有用的內置方法來處理數組。修改原始數組的方法稱為 mutator 方法和返回新值或表示的方法稱為 訪問器 方法。
還有第三類數組方法，稱為迭代 方法，它們是對數組中的每一項進行操作的方法，一次一個。這些方法與循環密切相關。在本教程中，我們將重點介紹迭代方法。
為了充分利用本教程，您應該對數組的創建、索引、修改和循環有一定的了解，您可以在教程中了解 JavaScript 中的數組。
在本教程中，我們將使用迭代方法遍歷數組，對數組中的每個項執行函數，過濾數組的所需結果，將數組項減少為單個值，並在數組中搜索以查找值或索引。
理解箭頭函數
本教程中的許多示例將使用 JavaScript 箭頭函數表達式，由等號後跟大於號表示：=> .
一個函數 是可以執行的可重用代碼塊。傳統上，可以使用以下語法編寫函數：
var example = function () {
// code to execute
}
example()撰寫本文時最新版本的 JavaScript 允許使用箭頭函數，可以使用以下語法編寫：
var example = () => {
// code to execute
}
example()任何一種情況下的括號都可以包含參數。當只有一個參數時，括號可以省略，如：
var example = (parameter1) => {
// code to execute
}在本教程的所有示例中，我們將使用箭頭函數語法。要閱讀和了解更多關於 JavaScript 中的函數，請閱讀 Mozilla 開發者網絡上的函數參考。
forEach()
forEach() 方法為數組中的每個元素調用一個函數。
讓我們從分配給變量 fish 的以下數組開始 ：
let fish = ['piranha', 'barracuda', 'cod', 'eel']
我們可以使用 forEach() 打印 fish 中的每個項目 數組到控制台。
// Print out each item in the array
fish.forEach((individualFish) => {
console.log(individualFish)
})完成後，我們將收到以下輸出：
piranha
barracuda
cod
eel
另一種方法是使用 for loop 關鍵字並針對數組的長度屬性對其進行測試。
// Loop through the length of the array
for (let i = 0; i < fish.length; i++) {
console.log(fish[i])
}
上面的代碼將具有與使用 forEach() 相同的輸出 方法。作為專門用於數組的迭代方法，forEach() 對於這個特定的任務來說更加簡潔明了。
map()
map() 方法創建一個新數組，其中包含對數組中每個元素的函數調用結果。
舉例說明如何使用迭代方法map() ，我們可以將循環的每次迭代打印到控制台。 map() 不會改變原始數組，而是返回一個新的數組值。不同於 forEach() , map() 方法必須分配給一個新的變量。
let fish = ['piranha', 'barracuda', 'cod', 'eel']
// Print out each item in the array
let printFish = fish.map((individualFish) => {
console.log(individualFish)
})
printFishpiranha
barracuda
cod
eel
我們也可以使用 map() 更改數組中每個項目的值。為了演示這一點，我們將添加一個 s 到 fish 中每個項目的末尾 將每個單詞複數的數組。
// Pluralize all items in the fish array
let pluralFish = fish.map((individualFish) => {
return `${individualFish}s`
})
pluralFish[ 'piranhas', 'barracudas', 'cods', 'eels' ]
原fish 變量不變，但 pluralFish 現在包含原始變量的修改版本。
filter()
filter() 方法創建一個新數組，其中包含通過給定測試結果的元素。
我們可以使用 filter() 返回一個新數組，該數組僅包含列表中以特定字母開頭的項目。為此，我們可以利用字符串索引來調用數組的每個字符串項中的第一項（或字母）。
let seaCreatures = ['shark', 'whale', 'squid', 'starfish', 'narwhal']
// Filter all creatures that start with "s" into a new list
let filteredList = seaCreatures.filter((creature) => {
return creature[0] === 's'
})
filteredList[ 'shark', 'squid', 'starfish' ]
我們測試了數組中的哪些項目具有 s 在 0 索引，並將結果賦值給一個新的變量。
filter() 是一種迭代方式，不會對原數組進行變異。
reduce()
reduce() 方法會將數組縮減為單個值。
這在數字中很常見，例如求數組中所有數字的總和。
let numbers = [42, 23, 16, 15, 4, 8]
// Get the sum of all numerical values
let sum = numbers.reduce((a, b) => {
return a + b
})
sum108
reduce() 也可以與字符串和其他數據類型一起使用。 reduce() 返回的值 可以是數字、字符串、數組或其他數據類型。 reduce() 是一種不改變原始數組的迭代方法。
find()
find() 方法返回數組中通過給定測試的第一個值。
例如，我們將創建一個海洋生物數組。
let seaCreatures = ['whale', 'octopus', 'shark', 'cuttlefish', 'flounder']
然後我們將使用 find() 方法來測試數組中的任何生物是否是頭足類動物。
// Check if a given value is a cephalopod
const isCephalopod = (cephalopod) => {
return ['cuttlefish', 'octopus'].includes(cephalopod)
}
seaCreatures.find(isCephalopod)octopus
自 octopus 是數組中滿足 isCephalopod() 中測試的第一個條目 函數，它是第一個返回的值。
find() 方法可以幫助您處理包含許多值的數組。
findIndex()
findIndex() 方法返回數組中通過給定測試的第一個索引。
我們可以使用相同的 seaCreatures find() 中的示例 方法。
let seaCreatures = ['whale', 'octopus', 'shark', 'cuttlefish', 'flounder']
使用 isCephalopod 測試，我們會找到索引號而不是第一個匹配的值。
// Check if a given value is a cephalopod
const isCephalopod = (cephalopod) => {
return ['cuttlefish', 'octopus'].includes(cephalopod)
}
seaCreatures.findIndex(isCephalopod)1
octopus 是第一個匹配測試的項目，索引為 1 ，因此它是返回的索引號。如果測試不滿足，findIndex() 將返回 -1 .
這種方法在處理包含許多項的數組時特別有用。
結論
在本教程中，我們回顧了 JavaScript 中主要的內置迭代數組方法。迭代方法對數組中的每一項進行操作，並且經常執行新功能。我們學習瞭如何遍歷數組、改變數組中每一項的值、過濾和減少數組，以及查找值和索引。
要查看數組的基礎知識，請閱讀了解 JavaScript 中的數組。要查看所有數組方法的完整列表，請查看 Mozilla 開發者網絡上的數組參考。
