JavaScript forEach 方法跳出循环的操作方法

 更新时间:2024年01月03日 09:28:32   作者:easylee  
这篇文章主要介绍了JavaScript forEach 方法跳出循环的操作方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

for循环

JavaScript中,for循环可以使用 break 和 continue 来跳出:

  • continue:跳出本次循环
  • break:结束循环
for (let i = 0; i < 10; i++) {
  if (i === 1) {
    // 跳出本次循环,不会打印1
    continue
  }
  if (i === 3) {
    // 结束循环,不会打印3和之后的数字
    break
  }
  // 输出0 2
  console.log(i)
}

forEach循环

除了for循环,常用的forEach如何退出呢?

const numbers = [1, 2, 3, 4, 5]
numbers.forEach(number => {
  if (number === 2) {
    // 跳出整个循环
    break  // SyntaxError: Illegal break statement
  }
    console.log(number)
})

可以看到,直接使用break,会报非法中断语句错误

再试试 continue :

numbers.forEach(number => {
  if (number === 2) {
    // 跳出当前循环
    continue  // SyntaxError: Illegal continue statement: no surrounding iteration statement
  }
    console.log(number)
})

可以看到同样报错,continue不能在非循环语句中,原因是forEach的参数是一个回调函数,并不是循环语句,所以无法执行continue语句
具体可以参考:SyntaxError: continue must be inside loop - JavaScript | MDN

里面也提到了解决方法,使用 return 退出当前循环,以及使用 for of代替forEach

numbers.forEach(number => {
  if (number === 2) {
    // 跳出当前循环
    return 
  }
  console.log(number) // 1 3 4 5
}
for (const number of numbers) {
  if (number === 2) {
    continue
  }
  console.log(number) // 1 3 4 5
}

但是就想使用 forEach 来跳出循环应该如何操作呢,上面文档中没有提到,但可以使用 try catch来实现:

try {
  numbers.forEach(number => {
    if (number === 2) {
      throw new Error()
    }
    console.log(number) // 1
  })
} catch (error) {
  console.log('捕获到错误')
}

综上,使用forEach时,使用 return 跳出当前循环,使用 try catch 跳出整个循环。

到此这篇关于JavaScript forEach 方法跳出循环的文章就介绍到这了,更多相关JavaScript forEach 方法跳出循环内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • RequireJS用法简单示例

    RequireJS用法简单示例

    这篇文章主要介绍了RequireJS用法,结合简单实例形式分析了RequireJS项目文件结构、相关操作技巧与注意事项,需要的朋友可以参考下
    2018-08-08
  • 监控微信小程序中的慢HTTP请求过程详解

    监控微信小程序中的慢HTTP请求过程详解

    这篇文章主要介绍了监控微信小程序中的慢HTTP请求过程详解,Fundebug 的微信小程序监控插件在 0.5.0 版本已经支持监控 HTTP 请求错误,在小程序中通过wx.request发起 HTTP 请求,如果请求失败,会被捕获并上报,需要的朋友可以参考下
    2019-07-07
  • layui使用templet格式化表格数据的方法

    layui使用templet格式化表格数据的方法

    今天小编就为大家分享一篇layui使用templet格式化表格数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js实现滚动条滚动到页面底部继续加载

    js实现滚动条滚动到页面底部继续加载

    这篇文章主要为大家详细介绍了js实现滚动条滚动到页面底部继续加载,原理很简单,就是为window添加一个scroll事件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • js中url对象化管理分析

    js中url对象化管理分析

    这篇文章主要介绍了js中url对象化管理的相关知识以及用法介绍,有需要的朋友跟着小编一起学习下。
    2017-12-12
  • 深入浅出es6模板字符串

    深入浅出es6模板字符串

    这篇文章主要介绍了深入浅出es6模板字符串,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JavaScript直播评论发弹幕切图功能点集合效果代码

    JavaScript直播评论发弹幕切图功能点集合效果代码

    这篇文章主要介绍了JavaScript直播评论发弹幕切图功能点集合效果代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • js函数排序的实例代码

    js函数排序的实例代码

    这篇文章介绍了js函数排序的代码,有需要的朋友可以参考一下
    2013-07-07
  • js jquery数组介绍

    js jquery数组介绍

    js jquery数组介绍,数组时编程中比较常用的处理,需要的朋友可以参考下
    2012-07-07
  • 你可能不知道的typescript实用小技巧

    你可能不知道的typescript实用小技巧

    作为前端程序员,TS已经成为一项必不可少的技能,本文旨在介绍 TS中的一些实用技巧,提高大家对这门语言更深的认知,这篇文章主要给大家介绍了关于typescript实用小技巧的相关资料,需要的朋友可以参考下
    2021-08-08

最新评论