迹忆客 专注技术分享

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

在 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> 标签内。我们有一个段落标签,其中的 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 功能的整个过程。

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

本文地址:

相关文章

Do you understand JavaScript closures?

发布时间:2025/02/21 浏览次数:108 分类:JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间:2025/02/21 浏览次数:178 分类:JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间:2025/02/21 浏览次数:150 分类:JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

用 jQuery 检查复选框是否被选中

发布时间:2024/03/24 浏览次数:102 分类:JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便