在 JavaScript 中使用异常终止一个 forEach 循环

Sahil Bhosale 2021年9月22日
在 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> 标签内。我们有一个段落标签,其中的 iderrorMsg。此段落标签将用于显示将由我们的 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 Bhosale
Sahil Bhosale avatar Sahil Bhosale avatar

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

相关文章 - JavaScript Loop