你可以終止 forEach 嗎？

林恒發表於2024-07-08

🧑‍💻 寫在開頭

點贊 + 收藏 === 學會🤣🤣🤣

理解 forEach

JavaScript 的forEach方法是一種流行的陣列迭代工具。它為每個陣列元素執行一次提供的函式。但是，與傳統的for 和 while迴圈不同，forEach它被設計為對每個元素執行該函式，沒有內建機制來提前停止或中斷迴圈。

 const fruits = ["apple", "banana", "cherry"];
 fruits.forEach(function (fruit) {
    console.log(fruit); //apple banana cherry
 });

傳統的方式無法終止 forEach

01：利用 break

forEach 的一個關鍵限制是無法使用傳統的控制語句（如break或return）來停止或中斷迴圈。 如果你嘗試在 forEach 中使用break，您將遇到語法錯誤，因為break在回撥函式中不適用。

const numbers = [1, 2, 3, 4, 5];  
numbers.forEach(number => {  
  if (number > 3) {  
    break; //Syntax Error: Illegal break statement  
  }  
  console.log(number);  
});

02：利用 return

在其他迴圈或函式中，return 語句退出迴圈或函式，並返回一個值（如果指定）。

在 forEach 的上下文中，return 不會跳出迴圈。 相反，它只是退出回撥函式的當前迭代並移至陣列中的下一個元素。

const numbers = [1, 2, 3, 4, 5];  
numbers.forEach(number => {  
  if (number === 3) {  
    return; //Exits only the current iteration  
  }  
  console.log(number); //1、2、4、5  
});

return 跳過 3 的列印，但迴圈繼續處理剩餘元素。

使用 Error 終止 forEach

雖然不建議這麼使用，但從技術上講，可以透過丟擲異常來停止 forEach 迴圈。 這種方法雖然是非正統的，並且由於影響程式碼可讀性和錯誤處理而通常建議不要這樣做，但它可以有效地停止迴圈。

const numbers = [1, 2, 3, 4, 5];  
try {  
  numbers.forEach(number => {  
    if (number > 3) {  
      throw new Error('迴圈停止');  
    }  
    console.log(number);  
  });  
} catch (e) {  
  console.log('出現異常，迴圈已停止');  
}  
// 輸出: 1, 2, 3, 出現異常，迴圈已停止

在此示例中，當滿足條件時，將引發異常，從而提前退出 forEach 迴圈。 但是，需要注意，你得正確處理此類異常以避免產生意外的副作用。

使用 for...of 迴圈 代替 forEach

ES6 (ECMAScript 2015) 中引入的 for...of 迴圈提供了一種現代、乾淨且可讀的方式來迭代可迭代物件，例如陣列、字串、對映、集合等。

與 forEach 相比，它的主要優勢在於它與 Break 和 continue 等控制語句的相容性，為迴圈控制提供了更大的靈活性。

const numbers = [1, 2, 3, 4, 5];  
  
for (const number of numbers) {  
  if (number > 3) {  
    break; // 成功終止迴圈  
  }  
  console.log(number); // 1 2 3  
}

在此示例中，迴圈迭代numbers 陣列中的每個元素。 一旦遇到大於3的數字，它就會使用break語句退出迴圈。 forEach 無法實現這種級別的控制。

總結

雖然 JavaScript 中的 forEach 方法提供了一種簡單的陣列迭代方法，但它缺乏中斷或停止中迴圈的靈活性。

幸運的是，像 for...of 迴圈這樣的替代方法，以及像 some() 和 every() 這樣的方法，可以替代 forEach。

如果對您有所幫助，歡迎您點個關注，我會定時更新技術文件，大家一起討論學習，一起進步。

你可以終止 forEach 嗎？

相關文章