服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 三种在JavaScript中终止forEach循环的方式

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

2023-12-20 17:07web前端开发 js教程

面试官:你能停止 JavaScript 中的 forEach 循环吗?这是我在面试中曾被问到的一个问题,我当初的回答是:“不,我不能这样做。”

面试官:你能停止 JavaScript 中的 forEach 循环吗?这是我在面试中曾被问到的一个问题,我当初的回答是:“不,我不能这样做。”

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

不幸的是,我的回答导致面试官突然结束了面试,对的,是突然结束的!

我对结果感到沮丧,问面试官:“为什么?实际上可以停止 JavaScript 中的 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循环。

1. 抛出错误

当找到一个大于等于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) {


}

2. 将数组长度设置成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
  }
})

3. 将数组元素移除

当满足条件时,使用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
  }
})

最后,3种关于在JavaScript中终止forEach循环的方法就先介绍到这里了,希望对你有所帮助,感谢你的阅读,编程快乐!

原文地址:https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649140662&idx=3&sn=e1593349b0555d88b1b8deba4411c525

延伸 · 阅读

精彩推荐
  • js教程微信小程序请求前置的方法详解

    微信小程序请求前置的方法详解

    这篇文章主要给大家介绍了关于微信小程序请求前置的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需...

    ok同学10032022-02-15
  • js教程相比Javascript, Typescript有哪些优点?

    相比Javascript, Typescript有哪些优点?

    TypeScript 也有一些相对于 JavaScript 的缺点,例如学习成本增加、项目初始设置可能更复杂等。在选择是否使用 TypeScript 时,需要根据项目需求和团队经验做...

    金木讲编程8142023-12-01
  • js教程CocosCreator通用框架设计之网络

    CocosCreator通用框架设计之网络

    这篇文章主要介绍了CocosCreator通用框架设计之网络,详细讲解了WebSocket的原理和使用方法,对WebSocket感兴趣的同学,一定要看一下...

    weixin_397524349122022-03-01
  • js教程Nest.js散列与加密实例详解

    Nest.js散列与加密实例详解

    这篇文章主要给大家介绍了关于Nest.js散列与加密的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    淮城一只猫11212022-01-22
  • js教程JavaScript实现滚动加载更多

    JavaScript实现滚动加载更多

    这篇文章主要为大家详细介绍了JavaScript实现滚动加载更多,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    予倾10042021-12-20
  • js教程JavaScript代码优化技巧示例详解

    JavaScript代码优化技巧示例详解

    这篇文章主要为大家介绍了JavaScript代码优化技巧示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪...

    俺是谁6182022-08-15
  • js教程mapboxgl实现带箭头轨迹线的代码

    mapboxgl实现带箭头轨迹线的代码

    这篇文章主要介绍了mapboxgl实现带箭头轨迹线的代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...

    GIS兵器库9552021-12-27
  • js教程js+Html实现表格可编辑操作

    js+Html实现表格可编辑操作

    这篇文章主要为大家详细介绍了js+Html实现表格可编辑操作,能动态添加删除行,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可...

    qqliang131411752022-03-08