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 方法跳出循环内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript高级程序设计 事件学习笔记

    JavaScript高级程序设计 事件学习笔记

    JavaScript高级程序设计 事件学习笔记,需要的朋友可以参考下。
    2011-09-09
  • JavaScript实现复制文章自动添加版权

    JavaScript实现复制文章自动添加版权

    自己辛辛苦苦写的文章,轻易就被别人复制-粘贴去了,是不是很伤心呢?小编今天给大家整理了两个方法,让别人复制自己的文章时,自动在文章的结尾添加自己的版权信息。
    2016-08-08
  • 微信小程序中weui用法解析

    微信小程序中weui用法解析

    这篇文章主要介绍了微信小程序中weui用法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • javascript查询字符串参数的方法

    javascript查询字符串参数的方法

    这篇文章主要介绍了javascript查询字符串参数的方法,实例分析了javascript获取URL中对应参数的使用技巧,需要的朋友可以参考下
    2015-01-01
  • js由下向上不断上升冒气泡效果实例

    js由下向上不断上升冒气泡效果实例

    这篇文章主要介绍了js由下向上不断上升冒气泡效果,实例分析了javascript操作鼠标事件、图片及样式的相关技巧,需要的朋友可以参考下
    2015-05-05
  • JS实现全屏的四种写法

    JS实现全屏的四种写法

    这篇文章主要为大家详细介绍了JS或jquery实现全屏的四种写法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 高效的jquery数字滚动特效

    高效的jquery数字滚动特效

    这篇文章主要介绍了高效的jquery数字滚动特效,灵活的进行数字滚动,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • JS中关于事件处理函数名后面是否带括号的问题

    JS中关于事件处理函数名后面是否带括号的问题

    JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动。有两种常见的形式,分别是DOM Level 0 和DOM Level 2。今天总结一个关于事件处理程序的小细节。感兴趣的朋友一起学习吧
    2016-11-11
  • JS+CSS实现下拉刷新/上拉加载插件

    JS+CSS实现下拉刷新/上拉加载插件

    这篇文章主要介绍了JS+CSS实现下拉刷新/上拉加载插件,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • JavaScript中常见加密解密方法总结

    JavaScript中常见加密解密方法总结

    这篇文章主要为大家详细介绍了JavaScript中常见加密解密方法的实现,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解一下
    2023-03-03

最新评论