如何在 JavaScript 中停止 forEach() 方法？
在 JavaScript 中，程序员可以使用 forEach() 方法遍历元素数组。我们可以调用一个回调函数，将其作为 forEach() 方法的参数传递给每个数组元素。
有时，我们可能需要在对某些元素执行回调函数后停止 forEach() 循环。我们可以在普通循环中使用"break"关键字来停止它，如下所示。
for(let i = 0; i < length; i++){
// code
if( some condition ){
break;
}
}
但是我们不能将"break"关键字与 forEach() 方法一起使用。
array.forEach(element => {
// code
if( some condition ){
break;
}
});
上述代码不会停止 forEach() 循环的执行。
本教程将教您如何在 JavaScript 中停止 forEach() 循环的各种方法。
使用 return 关键字
return 关键字会停止代码的执行。在 forEach() 循环中，它充当 continue 语句。
语法
用户可以按照以下语法使用 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) {
// 停止执行 for 循环
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"块中的 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() 方法的回调函数中，我们检查元素类型，如果发现任何元素具有"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>
在上面的输出中，用户可以观察到它在数组中找到数字类型元素后停止打印元素。
使用带有 break 关键字的普通 for 循环
停止执行 forEach() 方法的最佳解决方案是用普通 for 循环替换 forEach() 循环并使用 break 关键字停止其执行。
语法
用户可以按照以下语法使用带有 break 关键字的 for 循环。
for ( ){
if (condition) {
break;
}
}
在上述语法中，当特定条件变为真时，我们使用 break 关键字停止 for 循环的执行。
示例 3
在下面的示例中，我们定义了各种值的数组。我们使用普通的 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() 方法来提高性能。
