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

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

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

作者：迹忆客最近更新：2024/03/17 浏览次数：

与其他编程语言不同，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> 标签内。我们有一个段落标签，其中的 id 是 errorMsg。此段落标签将用于显示将由我们的 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 功能的整个过程。

上一篇：在 JavaScript 中跟踪鼠标位置

下一篇：JavaScript 中的 setInterval 循环

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享