如果您已經了解 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中文網其他相關文章!