在JavaScript中终止forEach循环的三种方式

更新时间：2023年11月02日 09:04:12 作者：公号是前端必修课

如何终止forEach循环这个问题估计会难倒一部分同学,甚至会有人反问,forEach循环在JavaScript中能终止吗？本文小编给大家介绍了三种方式可以终止forEach循环,需要的朋友可以参考下

一、序言

这个问题估计会难倒一部分同学。甚至会有人反问，forEach循环在JavaScript中能终止吗？比如，我举个例子

const array = [ -3, -2, -1, 0, 1, 2, 3 ]

array.forEach((it) => {
  if (it >= 0) {
    console.log(it)
    // 0 1 2 3
    return // or break
  }
})

从这个例子来看，好像不管是通过return还是break都无法终止forEach循环。 forEach相当于就是函数的执行，比如下面这段代码，即使func1执行了return语句，仍然会打印出2。

const func1 = () => {
  console.log(1)
  return
}

const func2 = () => {
  func1()
  console.log(2)
}

func2()

二、方法

然而，我能想到三种方式可以终止forEach循环。

01. 抛出错误

当找到一个大于等于0的数字之后，return循环将终止执行，所以控制台只会输出数字0，代码如下：

const array = [ -3, -2, -1, 0, 1, 2, 3 ]

try {
  array.forEach((it) => {
    if (it >= 0) {
      console.log(it) // 输出：0
      throw Error(`We've found the target element.`)
    }
  })
} catch (err) {
  
}

02. 将数组长度设置成0

我们也能通过将数组长度设置成0来终止forEach循环。代码如下

const array = [ -3, -2, -1, 0, 1, 2, 3 ]

array.forEach((it) => {
  if (it >= 0) {
    console.log(it) // 输出：0
    array.length = 0
  }
})

03. 将数组元素移除

当满足条件时，使用splice方法将数组内元素移除，也能终止forEach循环。代码如下：

const array = [ -3, -2, -1, 0, 1, 2, 3 ]

array.forEach((it, i) => {
  if (it >= 0) {
    console.log(it) // 输出：0
    array.splice(i + 1, array.length - i)
  }
})

三、建议

建议使用for和some

在日常工作中，一般是不会出现一种情况是让你终止forEach循环的，如果有终止的情况，可以使用for和some方法。

for

const array = [ -3, -2, -1, 0, 1, 2, 3 ]

for (let i = 0, len = array.length; i < len; i++) {
  if (array[ i ] >= 0) {
    console.log(array[ i ])
    break
  }
}

some

const array = [ -3, -2, -1, 0, 1, 2, 3 ]

array.some((it, i) => {
  if (it >= 0) {
    console.log(it)
    return true
  }
})

到此这篇关于在JavaScript中终止forEach循环的三种方式的文章就介绍到这了,更多相关JavaScript终止forEach循环内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

javascript常用代码段搜集
这篇文章主要记录了本人搜集的几段javascript常用代码段，都是平时项目中需要用到的,需要的朋友可以参考下
2014-12-12
深入了解JavaScript阻塞渲染
阻塞渲染就是在页⾯中我们通常会引⽤外部⽂件，⽽浏览器在解析HTML页⾯是从上到下依次解析、渲染，如果<head>中引⽤了⼀个a.js⽂件，⽽这个⽂件很⼤或者有问题，需要2秒加载，那么浏览器会停⽌渲染页⾯，2秒后加载完成才会继续渲染，这个就是阻塞
2022-06-06
JavaScript正则替换HTML标签功能示例
这篇文章主要介绍了JavaScript正则替换HTML标签功能,结合完整实例形式详细分析了javascript正则替换字符串操作相关实现技巧,需要的朋友可以参考下
2017-03-03
JavaScript中for-in和for-of的不同之处及如何正确使用
这篇文章主要给大家介绍了关于JavaScript中for-in和for-of的不同之处及如何正确使用它们的相关资料,无论是for...in还是for...of语句都是迭代一些东西,它们之间的主要区别在于它们的迭代方式,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-05-05
JavaScript利用Immerjs实现不可变数据
Immerjs 是一个用于管理 JavaScript 不可变数据结构的库，它可以帮助我们更轻松地处理状态的变化，并减少冗余代码。本文就来带大家揭秘如何利用Immerjs实现不可变数据，感兴趣的可以了解一下
2023-04-04
JS利用原生canvas实现图形标注功能
这篇文章主要为大家详细介绍了JS如何利用原生canvas实现图形标注功能,支持矩形、多边形、线段、圆形等已绘制的图形进行缩放,移动,需要的可以参考下
2024-03-03
JavaScript代码异常监控实现过程详解
这篇文章主要介绍了JavaScript代码异常监控实现过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-02-02
Three.js材质与光照知识点总结(附详细代码)
随着人们对用户体验越来越重视,Web开发已经不满足于2D效果的实现,而把目标放到了更加炫酷的3D效果上,这篇文章主要介绍了Three.js材质与光照知识点的相关资料,需要的朋友可以参考下
2025-06-06
JS数组去掉重复数据只保留一条的实现代码
这篇文章主要介绍了JS数组去掉重复数据只保留一条的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-08-08
JavaScript实现钟表案例
这篇文章主要为大家详细介绍了JavaScript实现钟表案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01