在 JavaScript 中使用異常終止一個 forEach 迴圈
與其他程式語言不同，JavaScript 程式語言帶有各種 for 迴圈的變體，我們只能看到傳統的 for 迴圈，它由 3 件事組成-初始化，條件以及遞增或遞減。我們必須遵循這三個要素，以使傳統的 for 迴圈工作。這似乎很令人困惑，特別是如果你是程式設計新手。
JavaScript 為我們提供了一種編寫 for 迴圈的新方法，也就是 forEach 迴圈。forEach 迴圈用於遍歷陣列。許多開發人員更喜歡使用 forEach 迴圈而不是傳統的 for 迴圈來遍歷陣列，因為它更容易編寫且可讀性更高。
任何迴圈，無論是 for 迴圈還是 while 迴圈，都可以藉助 break 語句終止。使用 forEach 迴圈遍歷陣列的唯一缺點是無法使用 break 關鍵字終止它。有時在程式執行過程中某些特定條件成立（真或假）時，我們想終止 forEach 迴圈。因此，為此，我們可以使用異常處理。
使用 JavaScript 中的 try...catch 塊終止 forEach 迴圈
為了實現 array.forEach 迴圈中 break 語句提供的功能，我們可以使用 JavaScript 中提供的異常處理的概念。如果在執行程式時發生一些錯誤並避免不必要的程式崩潰，則異常處理就是處理異常情況。這是藉助 try...catch 塊完成的。
try 塊是編寫所有程式碼的地方。catch 塊將包含用於處理異常的程式碼。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<p id="errorMsg"></p>
<script>
var arr = [1, 2, 3, 4, 5]
try {
arr.forEach((element)=> {
if (element === 4) throw "number is equal to four";
console.log(element);
});
}
catch (e) {
errorMsg = document.getElementById('errorMsg');
errorMsg.innerHTML = "Error: " + e + ".";
}
</script>
</body>
</html>
輸出：
// The below output will be printed on the screen.
Error: number is equal to four.
// The below output will be printed inside the web browser console
1
2
3
這是我們的 HTML 5 文件。在 <body> 標籤內。我們有一個段落標籤，其中的 id 是 errorMsg。此段落標籤將用於顯示將由我們的 JavaScript 程式引發的錯誤訊息。
在 <script> 標籤內，我們有實際的程式。在這裡，首先，我們宣告瞭一個名為 arr 的陣列，其中包含從 1 到 5 的元素。這裡的主要目標是使用 forEach 迴圈對該陣列進行迭代，當它到達 arr 陣列中的元素 4 時中斷迴圈。
在 try 塊中，我們使用 forEach 迴圈遍歷此陣列。在此迴圈中，我們傳入了匿名函式（也稱為箭頭函式）。在該函式內部，我們有一個 if 語句來檢查陣列中特定位置的元素是否為 4。如果不是 4，它將在網路瀏覽器的控制檯中列印該元素。否則，將丟擲異常，顯示 number is equal to four。
try 塊引發的該異常將被 catch 塊捕獲，並儲存在變數 e 中。現在，藉助稱為 innerHTML 的 HTML 屬性，可以顯示 p 標籤內變數 e 內的錯誤訊息。這是在 JavaScript 中遍歷陣列時在 forEach 迴圈內實現 break 功能的整個過程。
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn