在 JavaScript 中跳出 ForEach 循环

2025年3月2日 | 阅读 12 分钟

引言

简要说明 JavaScript 中 forEach 方法的用法和适用场景,以扩展数组迭代的概念。强调 forEach 方法接收两个参数——条目的键和值,以及以参数形式传递的回调函数。

在开发 JavaScript 程序时,数组是管理数据集合的主要数据结构。这是数组的常见情况:开发人员构建循环来遍历它们。这里有许多内置的迭代构造方法;forEach 方法是一个非常有用的工具,可以遍历数组的每个值并对其进行各种操作。

这是一篇博文,我们将解释 forEach 方法是什么,它看起来是怎样的,以及它与传统的 for 循环等选项有何不同。在本讲座中,循环的分解将包括对其缺点的讨论,以及循环的优点;但是,重要的是要知道没有简单的方法可以中断循环。为了获得此类知识,您需要研究这些限制,并需要研究快速修复的解决方案。这将帮助您做出正确的决定,从而在项目中的数组迭代中获得最佳效果。

什么是 ForEach?

forEach 是 JavaScript 的数组方法之一,它提供了一种函数式风格来引用数组以及对数组元素执行函数。这个回调函数最多接收三个参数:使用情况检查:演示语句对于目的元素是否成立。这是一个基本示例

在本演示中使用的函数类型是 forEach,它接收 numbers 数组中每个数组元素的参数,并将该元素及其位置传递下去。

ForEach 的主要特点

  • 回调函数:对于数组中的每个元素,forEach 方法都会执行回调函数。它可以执行您想要的任何对数组元素的操作。
  • 无返回值:与大多数迭代方法不同,forEach 不返回新数组。它不为每个元素提供回调函数的选择,这意味着它只调用预定义的回调函数。
  • 无提前退出:此外,还有一个特别需要注意的地方是,没有内置的方法可以提前退出循环。这里的循环周期将持续到数组的最后一个元素。

使用 forEach 的优点

  • 简单性:它提供了一种简单明了的遍历数组的方法。语句的处理简单易懂。
  • 简洁性:从 each 循环的过渡将自然地产生尽可能简洁的提示。
  • 可读性:除了直观易懂之外,forEach 方法通常更具可读性和明确性。

何时使用 ForEach

当您需要对每个数组成员执行操作,并且该操作不限制进一步的迭代时,forEach 是一个不错的选择。举例来说,如果您想将每个元素注册到 DOM,操作 DOM 或对每个元素执行任何数学运算,那么 forEach 将是一个不错的选择。

forEach 的局限性

如前所述,arr.forEach() 甚至不提供在迭代结束前退出循环的方法。在某些情况下,沟通条件可能会失败,例如,当迭代是期望结果时。此外,forEach 不支持 break 语句,而在传统循环中,您可以使用它,因此,这是其中一个特性。

因此,那些知识渊博的人将 forEach 方法用作 JavaScript 中迭代数组的有用而强大的工具。其简单的语法和可读性是 Java 的主要特性,使其受到许多开发者的青睐。然而,偶尔,无法及时退出循环可能成为一个缺点。在本篇博文接下来的部分,我们将介绍其他成功用于防止在应用 forEach 方法时出现无限循环的方法。此外,我们将查看其他标识符特定的数组迭代方法,例如 `some` 和 `find`,它们可以为特定用例提供更好的灵活性。

绕过中断循环的方法

有时,在编程中,当您需要基于特定标准提前终止循环的执行时,您可能需要退出循环。JS 中的 forEach 方法是一种用于循环的“生活技巧”,除非您在中途停止,否则没有办法退出循环。

有一些解决方法和替代方式可以帮助您实现这一目标。在本篇博文中,我们将介绍这些解决方法以及如何利用这些 PHP 解决方法来实现高效的代码。

1. 使用异常

另一种停止正在执行的循环的方法是利用异常。使用循环中的 catch,当达到特定条件时,您可以逃离迭代周期。这是一个例子

在这一行中,由于满足参数 number === 3,循环很快就退出了。循环中断,以便可以执行 catch 块中的代码。这种方法在某种程度上是装饰性的;然而,它不是最优雅的方法,因为异常通常用于错误处理而不是循环控制。

2. 使用 Array. Prototype. Some

Some 方法具有内置的数组迭代方法,当数组中的任何元素匹配给定的函数条件(回调)时,它会返回 true,否则返回 false。当循环的复杂性主要是逻辑性的时,此技术最有用;在这种情况下,一旦测试函数返回 true,它就会停止迭代并提前停止循环。以下是您如何使用 some

在 number === 3 的情况下,此操作被中断。此条件语句的另一个优点是它更简单,并且消除了在中断循环时使用异常的需要。

3. 使用 Array. prototype. Find

另一个数组遍历方法,当您想查找或隔离第一个符合特定参数的元素时非常有用,它是 find 方法。该函数将匹配集合中的第一个元素,如果找不到,它将返回 undefined。由于循环在找到匹配项时停止,因此您可以使用此方法提前退出

在这种情况下,一旦条件 number === 3 成立,循环就会中断。当您需要检查一个特定元素并且需要提前停止迭代时,这是一种有用的方法。

4. 使用 Array. prototype. Every

另一个工具称为 every,它使用预设的测试函数并指示数组中的所有元素是否匹配它。它会不断调用操作符,直到找到一个打破测试的元素或检测到 false 值,并在第一次出现时返回 false。您可能会如何使用它

在编程的许多情况下,需要即兴发挥以有效地提前跳出循环,尽管在 JavaScript 的 forEach 方法的情况下,没有内置的方法可以做到这一点。然而,通过考虑所有这些,开发人员拥有实现此目标的无限方法。通过使用异常、array. Prototype. Some 或 Array. Prototype. 最重要的是,由于转换过程,您可以有效地提前退出,而不是运行迭代数组的长度。

在决定最佳方法时,请记住,所有代码要求都应与低代码可读性一起考虑。在大多数情况下,一种非经济且干净的方法是使用 "some" 和 "find",它们总是比 "exception" 更适合中断 "forEach" 循环。

与传统循环的比较

值得一提的是,在 JavaScript 中有多种遍历数组和其他集合的方法。一种普遍使用的技术是 forEach 方法,它允许对数组的每个元素执行操作。

然而,与 forEach 不同,后者只允许中断和跳过,而 for 和 while 等传统循环在我们需要提前停止循环或跳过迭代时提供了更多的功能和优势。在这里,我们将 forEach 方法与常规循环进行比较,并根据每种方法最适合的场景进行评估。

1. 传统循环

for、while 或 do...while 等模式不仅存在多年,而且在当今编程中仍然至关重要。它们提供了一种易于实现的循环创建选项,从而为开发人员提供了更多对迭代过程的控制,具体取决于当前的需求。以下是这些循环的简要概述

  • For 循环
    for 循环是一种强大的循环,它允许您在一行中指定这些步骤:初始化、条件和递增/递减步长。
    示例
  • While 循环
    while 循环将 `重复` 直到满足给定条件。
    示例
  • Do...while 循环
    do...while 循环与 while 循环相同,因为在检查条件是在执行循环体之后进行的,所以它必须至少执行一次。
    示例

2. 与 forEach 的比较

i. 对循环流的控制

  • forEach:循环启动后,它会重复遍历元素,而没有任何中断或跳过元素的可能性,具体取决于条件要求。
  • 传统循环:for 和 while 循环让您更全面地控制代码。另一种提前退出循环的方法是使用 break 语句。此外,您还可以选择使用 continue 语句来继续并跳到下一个迭代。

带 for 循环和 break 的示例

ii. 灵活性

  • forEach:该技术按顺序迭代数组的每个元素。
  • 传统循环:传统循环实现了对索引以及开始和结束点的控制,这反过来又允许它们被迭代。这使得系统能够更有效地微调过程,从而提高最终产品的质量。

iii. 性能

  • forEach:forEach 是一个函数调用,这些回调函数会因其多次迭代而产生开销。在大型循环中,这会消耗 CPU 性能。

iv. 列表

  • 传统循环:虽然传统循环的实现通常更快,因为每次迭代都不需要函数调用,但线性循环的时间复杂度取决于迭代次数。

v. 可读性

  • forEach:提供纯净易懂的代码,在大多数情况下,能够向其他开发人员完全表达其含义。
  • 传统循环:这可能比较冗长,尤其是在循环执行被 break 和 continue 控制中断的情况下。虽然这些循环结构可能被认为是危险的,但在某些困难的循环控制场景中,后者循环更容易理解。

vi. 作用域和闭包

  • forEach:为了演示,我们可以隔离和重用需要闭包的作用域,并在回调函数中使用变量时考虑作用域。这使得它们能够通过闭包在声明时有效地执行。
  • 传统循环:通常,重复操作使用在明确定义的域中引入的简单变量来定义,这更容易理解。

另一方面,尽管 forEach 方法很方便,并且对于需要迭代的简单任务来说,它是一种有效且可读性强的代码编写方式,但传统循环提供了更多的控制和灵活性,尤其是在您需要在运行时中断循环或跳过某些迭代的情况下。

这两种方法都有优点和缺点,选择最佳选项取决于应用程序案例和开发者的开发风格。深入了解权衡至关重要,这样您才能选择正确的方法来处理 JavaScript 代码。

示例和代码片段

任何技术演示都围绕核心组件构建,例如示例和代码片段,它们提供了概念的可视化,并使主题清晰易懂。

它们提供了更实际的方法,因此,读者将通过实践更好地理解理论,而不是仅仅通过文字。现在,让我们在关于 JavaScript forEach 循环问题的博文中探讨示例和代码片段的使用,以及它们如何帮助文章得出结论?

1. 说明 forEach 的局限性

使用一个简单的语句示例,说明为什么 forEach 无法在执行前终止循环。展示一个您想要获取数组中的第一个偶数并将其打印出来的场景。相反,每次遍历时,forEach 都会检查整个数组,而不管第一个偶数是否出现。

代码试图找出 numbers 数组中第一个偶数。它通过 forEach 循环遍历数组中的所有数字,然后使用 "typeof" 判断数字是否为偶数。如果除法区域不包含奇数,则将数字分配给已搜索的变量。由于循环直接逐个处理数组元素,因此找到的第一个偶数将被存储在 foundNumber 中。

2. 使用 Array. prototype. some

使用 Array. prototype. some 方法的示例,该方法是一种操作变体,可在特定条件发生时中断循环。

代码旨在找出第一个偶数的索引。该函数使用了 some() 方法来遍历数组。some() 方法一旦通过回调函数返回任何元素的 true 值,就会终止进一步的迭代,该回调函数现在正在处理第一个偶数。因此,一旦返回 true,循环可能需要提前停止。

3. 与传统循环的比较

实现传统 for 循环功能的逐项对照表,并展示它们在语法和操作方式上的差异。