如何在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()循环的执行。

本教程将教授停止forEach() 循环的多种方法。

使用return关键字

return关键字用于停止代码的执行。在 forEach() 循环中，它起到continue语句的作用。

语法

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

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

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

示例1

在下面的示例中，我们使用了一个包含字符串的数组的 forEach() 方法。我们为每个元素调用回调函数，打印出每个元素。我们使用了条件，如果索引> 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’ 块中捕获错误。我们可以在 ‘finally’ 块中执行我们需要执行的任何代码。

语法

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

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

在上述语法中，我们使用throw关键字抛出异常并中断forEach()方法的执行。

示例2

在下面的示例中，我们使用了try-catch语句与forEach()方法。在forEach()方法的回调函数中，我们检查元素的类型，如果找到任何类型为“number”的元素，就会抛出错误。

因此，它将停止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>

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

使用普通的for循环和break关键字

停止执行 forEach() 方法的最佳解决方案是将 forEach() 循环替换为普通的for循环，并使用break关键字来停止其执行。

语法

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

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

在上述语法中，当特定条件为真时，我们使用break关键字停止执行for循环。

例子三

在下面的例子中，我们定义了一个包含各种值的数组。我们使用普通的for循环遍历数组，如果数组值大于30，我们使用break关键字停止for循环的执行。

<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>

方法。第一种方法不会打断循环，但会像“continue”语句一样工作。第二种方法使用try-catch语句来打断 forEach() 方法。在实际开发中，我们不能抛出错误来打断 forEach() 循环，所以不建议使用第一种和第二种方法。

在第三种方法中，我们用普通的for循环替代了 forEach() 方法，并使用了break关键字。第三种方法可以正常工作，但普通的for循环比 forEach() 方法遍历元素的速度要慢。所以，用户也可以尝试使用 array.some() 和 array.each() 方法来提高性能。