如何在 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() 方法来提高性能。