比較 JavaScript 中迭代數組的 4 種方法

如果您已經了解 JavaScript 陣列的基礎知識，那麼是時候透過更高級的主題將您的技能提升到新的水平了。在本系列教程中，您將探索在 JavaScript 中使用陣列進行程式設計的中級主題。

幾乎在每個涉及數組的項目中，我們都必須執行迭代或循環數組的操作。您可能需要循環數組的原因有很多，例如將數組資料顯示為輸出或對其進行轉換。

您可以使用許多方法在 JavaScript 中迭代陣列。在本教程中，我們將了解所有這些，同時詳細討論每個的優點或缺點。

方法			優點	缺點
for迴圈			可以使用 break 提前退出，適用於非同步程式碼，通用瀏覽器支援	冗長且容易出錯
forEach()方法			簡潔易讀	沒有非同步支持，沒有提前退出 break
for...of迴圈	#		與其他可迭代類型一起使用，允許提前退出，語法減少錯誤	舊版瀏覽器支援較少
for...in迴圈			在稀疏數組上高效，允許提前退出	可能傳回意外的繼承元素

方法	帶有中斷和繼續的流控制？	可以使用非同步程式碼嗎？	瀏覽器支援	註解
for迴圈	是	是	所有瀏覽器	更詳細的語法，一對一錯誤
forEach()方法	沒有	沒有	現代瀏覽器	簡潔並連結在其他函數之後（即map）
for...of迴圈	#是的	是	現代瀏覽器	簡單的語法減少錯誤
for...in迴圈	是	是	所有瀏覽器	對於稀疏數組有效，可以傳回意外的（繼承的）元素

存取陣列元素的基礎知識

讓我們從使用索引存取陣列元素的基礎知識開始。 JavaScript 中的陣列索引從 0 開始。這意味著可以透過在程式碼中使用 array_name[0] 來存取第一個元素。同樣，對於包含 n 元素的數組，可以使用 array_name[n - 1] 存取最後一個元素。

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];

let first = animals[0];

let last = animals[4];

console.log(first);
// Outputs: Fox

console.log(last);
// Outputs: Zebra

使用 for 迴圈進行迭代

循環數組最常見的方法之一是 for 循環。 for 迴圈將迭代變數初始化為 0，以從第一個元素開始迴圈。由於我們想要迭代整個數組，因此需要計算數組的長度，這可以使用 length 屬性輕鬆完成。然後可以使用 array_name[length - 1] 存取陣列中的最後一個元素。

以下程式碼片段向我們展示如何使用 for 循環順序循環遍歷數組：

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];

let animal_count = animals.length;

for(let i = 0; i < animal_count; i++) {
  console.log(animals[i]);
}
/* Outputs:
Fox
Dog
Lion
Cat
Zebra
*/

請注意我們如何使用小於運算子 () 而不是小於或等於運算子 (<code>) 作為迴圈結束條件。

在循環數組時使用 for 循環有兩個優點：它得到廣泛支持，並且允許您透過 break 和 continue 語句控制循環流程。一旦找到所需內容，您就可以退出循環。當您處理非同步程式碼時，for 迴圈也能很好地運作。

缺點是它有點冗長，您可能偶爾會犯一些小錯誤。

使用 forEach() 方法進行迭代

您也可以使用內建的 forEach() 方法在 JavaScript 中迭代陣列。此方法接受一個回呼函數作為其參數，該函數對每個數組元素執行一次。回調函數可以在其他地方定義，它可以是內聯函數或箭頭函數。

回呼函數可以接受三個不同的參數：

1. 當前元素本身
2. 當前元素的索引
3. 我們呼叫 forEach() 方法的陣列

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];

animals.forEach(animal => console.log(animal));
/* Outputs:
Fox
Dog
Lion
Cat
Zebra
*/

如您所見，使用 forEach() 方法使我們的程式碼更加簡潔。這是使用回調函數的第二個參數的另一個範例。

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];

animals.forEach((animal, idx) => {
  console.log(`Animal ${idx + 1}: ${animal}`);
});
/* Outputs:
Animal 1: Fox
Animal 2: Dog
Animal 3: Lion
Animal 4: Cat
Animal 5: Zebra
*/

使用 forEach() 非常適合對陣列進行簡單迭代。但是，不能使用 break 和 continue 中途退出循環並更改程式流程。使用 forEach() 的另一個缺點是您無法透過此方法使用非同步程式碼。

使用 for...of 迴圈進行迭代

ES6標準為JavaScript增加了許多新功能。其中之一是迭代器和可迭代物件的概念。您可以使用 for...of 迴圈來迭代實作 @@iterator 方法的任何物件中的值。內建類型（例如 Array、String、Set 或 Map）可以使用 for...of 迴圈來迭代它們的值。

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];

for(let animal of animals) {
  console.log(animal);
}
/* Outputs:
Fox
Dog
Lion
Cat
Zebra
*/

使用 for...of 建構進行迭代有很多優點。例如，您也可以使用它來迭代其他內建可迭代類型。除此之外，它允許您使用 break 或 continue 語句跳出迴圈並控製程式流程。

唯一的潛在缺點是瀏覽器支援稍少，但這完全取決於您的目標受眾。

使用 for...in 迴圈進行迭代

您也可以使用 for...in 語句循環遍歷陣列。這將循環遍歷物件的所有可枚舉字串屬性。這也包括繼承的可枚舉屬性。

我想在這裡提一下，不建議使用 for...in 語句來迭代循環。這是因為，正如我之前提到的，該語句將迭代所有整數和非整數屬性，即使它們是繼承的。當我們迭代數組時，我們通常只對整數鍵感興趣。

for...in 迴圈的遍歷順序定義良好，它從非負整數鍵的遍歷開始。非負整數鍵按值升序遍歷。然後按照創建的順序遍歷其他字串鍵。

稀疏數組是一種可以用 for...in 迴圈比其他方法更好地遍歷的陣列類型。例如， for...of 迴圈將迭代稀疏數組中的所有空槽，而 for...in 迴圈則不會。

這是使用 for...in 迴圈迭代稀疏數組的範例：

let words = new Array(10000);

words[0] = "pie";
words[548] = "language";
words[3497] = "hungry";

for(let idx in words) {
  if(Object.hasOwn(words, idx)) {
    console.log(`Position ${idx}: ${words[idx]}`);
  }
}
/* Outputs:
Position 0: pie
Position 548: language
Position 3497: hungry
*/

您可能已經注意到，我們使用了一個名為 Object.hasOwn() 的靜態方法來檢查查詢物件的指定屬性是否確實是其自己的屬性。

最終想法

您始終可以使用常規 for 迴圈來迭代陣列。它允許您借助 break 和 Continue 關鍵字來控製程式流程，同時也支援非同步程式碼。另一方面，它確實要求您小心差一錯誤。

forEach() 方法提供了一種更短的循環數組的方法，但它不適用於非同步程式碼。您也無法使用 break 和 continue 跳出迴圈或控製程式流程。

for...of 迴圈給了我們兩全其美的好處。我們可以完全控製程式流程，而且它也適用於非同步程式碼。也無需擔心差一錯誤。

最後，for...in 迴圈不是迴圈陣列的推薦方法。但是，如果您正在遍歷的陣列非常稀疏，那麼它可能會很有用。

本文的縮圖是使用 OpenAI 的 DALL-E 2 產生的。

以上是比較 JavaScript 中迭代數組的 4 種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！