首頁 > web前端 > js教程 > 主體

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

王林
發布: 2023-09-04 08:25:02
原創
678 人瀏覽過

比较 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
*/
登入後複製

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

在循環數組時使用 for 循環有兩個優點:它得到廣泛支持,並且允許您透過 breakcontinue 語句控制循環流程。一旦找到所需內容,您就可以退出循環。當您處理非同步程式碼時,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() 非常適合對陣列進行簡單迭代。但是,不能使用 breakcontinue 中途退出循環並更改程式流程。使用 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 建構進行迭代有很多優點。例如,您也可以使用它來迭代其他內建可迭代類型。除此之外,它允許您使用 breakcontinue 語句跳出迴圈並控製程式流程。

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

使用 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 迴圈來迭代陣列。它允許您借助 breakContinue 關鍵字來控製程式流程,同時也支援非同步程式碼。另一方面,它確實要求您小心差一錯誤。

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

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

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

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

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板