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

背景

这个问题平时工作中基本不会遇到,通常是面试时,有的面试官喜欢问这个,所以有了探讨的意义。 首先我们来看看 for 循环是怎么处理跳出的。

for循环

JavaScript中,for循环可以使用 breakcontinue 来跳出:

  • continue:跳出本次循环
  • break:结束循环
js 复制代码
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 如何跳出呢?

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

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

js 复制代码
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

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

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

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

另辟蹊径

除了上面的用法,前几天看有个文章的评论的时候,发现一个方法,大家也可以尝试一下。

js 复制代码
var list = [1, 2, 3, 4, 5]
list.forEach((v, index) => {
if (v == 3) {
  list = list.splice(0, index)
}

console.log(index)
})

在想要跳出循环的时候,将原数组的数量减少,这样就直接跳出了数组,可以说是非常巧妙了😂,大家也可以试试。

综上,使用 forEach 时,使用 return 跳出当前循环,使用 try catch 跳出整个循环,同时也可以试试上面的另类方法。

相关推荐
an__ya__几秒前
Vue数据响应式reactive
前端·javascript·vue.js
华仔啊16 分钟前
面试都被问懵了?CSS 的 flex:1 和 flex:auto 真不是一回事!90%的人都搞错了
前端·javascript
前端康师傅18 分钟前
JavaScript 函数详解
前端·javascript
葡萄城技术团队21 分钟前
从基础到实战:一文吃透 JS Tuples 与 Records 的所有核心用法
javascript
@小红花1 小时前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵1 小时前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲1 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
Hilaku2 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
weixin_456904272 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说2 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性