如何在 JavaScript 中使用陣列方法：迭代方法

介紹

在JavaScript中，陣列資料型別由一系列元素組成。JavaScript開發者可以使用許多有用的內建方法來處理陣列。修改原始陣列的方法稱為變異(mutator)方法，而返回新值或表示的方法則稱為存取器(accessor)方法。

還有一類陣列方法被稱為迭代(iteration)方法，這些方法會逐一操作陣列中的每個項目。這些方法與迴圈密切相關。在本教程中，我們將專注於迭代方法。

為了從本教程中獲取最大的收益，您應該對創建、索引、修改和遍歷陣列有一定的了解，您可以在教程了解JavaScript中的陣列中進行複習。

在這個教程中，我們將使用迭代方法來循環遍歷數組，在數組中對每個項目執行函數，過濾數組的所需結果，將數組項目減少到單個值，並搜索數組以查找值或索引。

理解箭頭函數

這個教程中的許多示例將使用JavaScript的箭頭函數表達式，它們由等號後跟一個大於號表示：=>。

A function is a block of reusable code that can be executed. Traditionally, a function can be written with the following syntax:

var example = function() {
  // 要執行的程式碼
}

example();

在撰寫時的最新JavaScript版本允許使用箭頭函數，其語法如下：

var example = () => {
  // 要執行的程式碼
}

example();

在任一情況下，括號中都可以包含參數。當只有一個參數時，括號可以省略，如下所示：

var example = parameter1 => {
  // 要執行的程式碼
}

在本教程的示例中，我們將使用箭頭函數語法。要閱讀並更多了解JavaScript中的函數，請參閱 Mozilla 開發者網絡上的函數參考。

forEach()

forEach()方法對數組中的每個元素調用一次函數。

讓我們從分配給變量 fish 的以下數組開始：

let fish = [ "piranha", "barracuda", "cod", "eel" ];

我們可以使用 forEach()將 fish 數組中的每個項目打印到控制台。

 //打印出數組中的每個項目
fish.forEach(individualFish => {
	console.log(individualFish);
})

一旦我們這樣做，我們將收到以下輸出：

Output
piranha
barracuda
cod
eel

另一種方法是使用 for 循環關鍵字並將其與數組的長度屬性進行測試。

 //循環遍歷數組的長度
for (let i = 0; i < fish.length; i++) {
	console.log(fish[i]);
}

上面的代碼將與使用 forEach()方法具有相同的輸出。作為專門用於與數組一起使用的迭代方法，對於這個特定任務， forEach()更加簡潔和直接。

map()

map()方法在數組中的每個元素上調用一個函數並返回結果組成的新數組。

舉例來說，要使用迭代方法map()，我們可以將循環的每個迭代結果打印到控制台。map()不會改變原始數組，而是返回一個新的數組值。

let fish = [ "piranha", "barracuda", "cod", "eel" ];

// 打印數組中的每個項目
let printFish = fish.map(individualFish => {
	console.log(individualFish);
});

printFish;

Output
piranha
barracuda
cod
eel

我們還可以使用map()來更改數組中每個項目的值。為了演示這一點，我們將在fish數組中的每個項目末尾添加一個s以使每個單詞變為複數形式。

// 對fish數組中的所有項目進行複數化處理
let pluralFish = fish.map(individualFish => {
	return `${individualFish}s`;
});

pluralFish;

Output
[ 'piranhas', 'barracudas', 'cods', 'eels' ]

原始的fish變量保持不變，但pluralFish現在包含了原始變量的修改版本。

filter()

filter()方法創建一個新的數組，其中包含通過給定測試的元素。

我們可以使用filter()來返回一個新的數組，其中僅包含以特定字母開頭的項目。為此，我們可以利用字符串索引來調用數組中每個字符串項目的第一個項目（或字母）。

let seaCreatures = [ "shark", "whale", "squid", "starfish", "narwhal" ];

// 將所有以"s"開頭的生物過濾到新列表中
let filteredList = seaCreatures.filter(creature => {
  return creature[0] === "s";
});

filteredList;

Output
[ 'shark', 'squid', 'starfish' ]

我們測試了數組中哪些項目在0索引處有s，並將結果賦值給一個新變量。

filter()是一種迭代方法，不會改變原始數組。

reduce()

reduce()方法將將數組減少為單個值。

這在數字中很常見，比如找到數組中所有數字的總和。

let numbers = [ 42, 23, 16, 15, 4, 8 ];

// 獲取所有數值的總和
let sum = numbers.reduce((a, b) => {
	return a + b;
});

sum;

Output
108

reduce()也可以與字符串和其他數據類型一起使用。 reduce()返回的值可以是數字、字符串、數組或其他數據類型。 reduce()是一種迭代方法，不會改變原始數組。

find()

find()方法返回通過給定測試的陣列中的第一個值。

舉例來說，我們將創建一個海洋生物的陣列。

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

然後我們將使用find()方法來測試陣列中是否有頭足類生物。

// 檢查給定值是否是頭足類生物
const isCephalopod = cephalopod => {
	return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.find(isCephalopod);

Output
octopus

由於章魚是在isCephalopod()函數中首次滿足測試的項目，因此它是要返回的第一個值。

find()方法可以幫助您處理包含許多值的陣列。

findIndex()

findIndex()方法返回通過給定測試的陣列中的第一個索引。

我們可以使用與find()方法相同的seaCreatures示例。

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

使用isCephalopod測試，我們將找到索引號，而不是第一個匹配項的值。

// 檢查給定值是否是頭足類生物
const isCephalopod = cephalopod => {
	return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.findIndex(isCephalopod);

Output
1

章魚是第一個符合測試且索引為1的項目，因此返回的是索引號碼。

如果测试不符合要求，findIndex() 将返回 -1。

const isThereAnEel = eel => {
    return [ "eel" ].includes(eel);
}

seaCreatures.findIndex

Output
-1

findIndex() 方法在处理包含许多项的数组时特别有用。

结论

在本教程中，我们回顾了JavaScript中的主要内置迭代数组方法。迭代方法对数组中的每一项进行操作，并经常执行新函数。我们讨论了如何遍历数组，改变数组中每一项的值，过滤和减少数组，并查找值和索引。

要复习数组的基础知识，请阅读JavaScript中的数组理解。有关JavaScript语法的更多信息，请参阅我们关于“理解JavaScript中的语法和代码结构”的教程。