使用 .forEach() 迭代 JavaScript 中的元素

Alex Dulcianu 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 .forEach() 為陣列中的每個元素執行一個函式
  2. 如果 JavaScript 中不滿足某些條件,則對每個元素執行檢查以中斷執行
使用 .forEach() 迭代 JavaScript 中的元素

迭代是每個編碼人員的武器庫中最強大的工具之一,這就是為什麼大多數語言都有與不同型別的邏輯迴圈相關的各種方法的原因。

JavaScript 有多種這樣的方法,具體取決於你要實現的目標。在這種情況下,.forEach() 方法比簡單的 for 迴圈更有效,主要是因為它允許你為迭代的每個元素執行特定的函式。

當然,如果你將所需的函式呼叫巢狀在迴圈中的某個地方,你也可以使用常規迴圈來實現相同的目的,但是 .forEach() 大大簡化了程式碼。此外,它也可能在以後更容易維護,並且也提高了可讀性。

對於初學者,這裡是 .forEach() 如何在你的程式碼中使用:

在 JavaScript 中使用 .forEach() 為陣列中的每個元素執行一個函式

演示 .forEach() 有用性的最簡單方法是在遍歷元素陣列時檢視它的實際效果。

const myArray = ["element1", "element2", "element3"];

myArray.forEach(element => console.log(element));

輸出:

"element1"
"element2"
"element3"

上面的示例使用箭頭符號,但這不是唯一的選擇。使用內聯回撥函式可以實現相同的結果,如下所示:

const myArray = ["element1", "element2", "element3"];

myArray.forEach(function(element) {
    console.log(element);
})

輸出:

"element1"
"element2"
"element3"

這種方法有點冗長,這意味著它需要更多的鍋爐電鍍。話雖如此,如果你與團隊合作並希望使你的程式碼儘可能簡單,那麼冗長有時是一件好事。

如果 JavaScript 中不滿足某些條件,則對每個元素執行檢查以中斷執行

你們中的一些人可能已經注意到,在使用 .forEach() 時,總是為陣列中的每個元素執行關聯的函式。這並不總是可取的,特別是如果所討論的函式需要大量處理能力並且執行時間很長。

對於這些情況,最好滿足一些條件才能執行函式。要實現這一點,你所要做的就是引入一個 if 語句,並在條件評估為 false 時返回一些內容。

以下是實際效果:

const myArray = ["element1", "element2", "element3"];

myArray.forEach(function(element) {
    if (element === "element2") {
        return;
    }
    else {
        console.log(element);
    }
});

輸出:

"element1"
"element3"

如你所見,該函式跳過了滿足我們設定的條件的陣列元素。但是,迭代繼續使用陣列中的以下元素,這是預期的行為。

此方法在執行關聯函式之前評估陣列中的每個專案,因為在某些情況下你可能不希望執行該函式。通過這樣做,你可以消除預先過濾陣列的步驟。