切換語言為:簡體

如何終止 JavaScript 種的 forEach 迴圈?

  • 爱糖宝
  • 2024-06-17
  • 2103
  • 0
  • 0

理解 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。

0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.