JavaScript 如何停止forEach()方法

在JavaScript中，程序员可以使用forEach()方法来迭代数组中的元素。我们可以调用一个回调函数，我们可以把它作为forEach()方法的参数传递给每个数组元素。

有时，我们可能需要在对某些元素执行回调函数后停止forEach()循环。我们可以使用’break’关键字来停止一个正常的循环，如下图所示。

for(let i = 0; i < length; i++){
   // code
   if( some condition ){
      break;
   }
}

但是我们不能在forEach()方法中使用’break’关键字。

array.forEach(element => {
   // code
   if( some condition ){
      break;
   }
});

上述代码不会停止forEach()循环的执行。

本教程将讲授在JavaScript中停止forEach()循环的各种方法。

使用return关键字

return关键字会停止代码的执行。在forEach()循环中，它可以作为一个继续语句使用。

语法

用户可以按照下面的语法，使用return关键字来停止forEach()方法的执行。

array.forEach(function (element, index) {
   if (condition) {
      return; 
   }
});

在上面的语法中，如果条件变为真，就不会执行该元素的回调函数的代码。

示例1

在下面的例子中, 我们使用forEach()方法来处理字符串数组.我们为每个元素调用回调函数，打印出每个元素。我们使用的条件是，如果index>2，它将从回调函数中返回。所以它不会打印这个元素。

<html>
<body>
   <h2>Using the <i>return keyword</i> to stop the execution of the forEach() loop.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let array = ["string1", "string2", 10, 20, false, true];
      function callback(element, index) {
         // stop execution of for-loop
         if (index > 2) {
            return; // works like a continue statement
         }
         output.innerHTML += "The array element is " + element + "<br/>";
      }
      array.forEach(callback);
   </script>
</body>
</html>

return “关键字不会破坏forEach()方法，但是如果条件变成真的话，它可以作为一个连续的关键字。

通过抛出异常来停止forEach()循环的执行

另一种停止forEach()循环执行的方法是使用try-catch语句。当我们想停止forEach()方法的执行时，我们可以抛出错误。同时，我们可以在’catch’块中捕获错误。我们可以在’final’块中执行我们需要在forEach()方法之后执行的任何代码。

语法

用户可以按照下面的语法来使用try-catch语句停止forEach()方法。

try {
   array.forEach((ele) => {
      if (condition) {
         throw new Error("Break the loop.")
      }
   })
} catch (error) {
}

在上面的语法中，我们使用了throw关键字来抛出异常，并打破forEach()方法。

示例2

在下面的例子中，我们使用了forEach()方法和try-catch语句。在forEach()方法的回调函数中，我们检查元素的类型，如果发现任何元素的类型是 “数字”，我们就抛出错误。

因此，它将停止forEach()方法的执行。

<html>
<body>
   <h2>Using the <i>try-catch statement</i> to stop the execution of the forEach() loop.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let array = ["Cpp", "c", "Java", "JavaScript", 06, true, 43, false];
      try {
         array.forEach((ele) => {
            if (typeof ele == "number") {
               throw new Error("Break the loop.")
            }
            output.innerHTML += "Element value is " + ele + "<br/>";
         })
      } catch (error) {
         output.innerHTML += "Exception thrown from the forEach loop. " + error;
      }
   </script>
</body>
</html>

在上面的输出中，用户可以观察到，它在找到数组中的数字类型元素后就停止了打印元素。

使用带有break关键字的普通for-loop

停止forEach()方法执行的最佳方案是用普通的for-loop代替forEach()循环，并使用break关键字来停止其执行。

语法

用户可以按照下面的语法来使用带有break关键字的for-loop。

for ( ){
   if (condition) {
      break;
   }
}

在上面的语法中，当一个特定的条件为真时，我们用break关键字停止for-loop的执行。

示例3

在下面的例子中，我们已经定义了各种数值的数组。我们使用正常的for-loop来遍历数组，如果数组的值变得大于30，我们就使用break关键字来停止for-loop的执行。

<html>
<body>
   <h2>Using the normal for-loop with break keyword to stop the execution of for-loop. </h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let arrayElements = [10, 20, 30, 40, 50, 60, 70, 80, 90];
      output.innerHTML += "Some array elements are "
      for (let k = 0; k < arrayElements.length; k++) {
         if (arrayElements[k] > 30) {
            break;
         }
         output.innerHTML += arrayElements[k] + " , ";
      }
   </script>
</body>
</html>