如果您已經了解 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
*/
請注意我們如何使用小於運算子 (<<) 而不是小於或等於運算子 (<=<=) 作為迴圈結束條件。
在循環數組時使用 for 循環有兩個優點：它得到廣泛支持，並且允許您透過 break 和 continue 語句控制循環流程。一旦找到所需內容，您就可以退出循環。當您處理非同步程式碼時，for 迴圈也能很好地運作。
缺點是它有點冗長，您可能偶爾會犯一些小錯誤。
forEach() 方法進行迭代您也可以使用內建的 forEach() 方法在 JavaScript 中迭代陣列。此方法接受一個回呼函數作為其參數，該函數對每個數組元素執行一次。回調函數可以在其他地方定義，它可以是內聯函數或箭頭函數。
回呼函數可以接受三個不同的參數：
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中文網其他相關文章！
