写在前面

        提到在一段程序中如果碰到需要终止,结束一个循环,函数或者一段代码,一般会想到以下这几个关键字returncontinuebreak

简述一下三者的区别:

  • break: 终止整个循环(有内层循环时终止的是内层循环),退出switch语句;只能用于循环或者switch语句中,其他地方使用会报错
  • continue:与break相似,不同之处在于结束的是本次循环,相当于跳过本次循环执行下一次循环;只能用于while,do/while,for,for/in循环中,其他地方使用会报错
  • return: return false截断语句之后的代码执行,如果用于函数中,可以返回一个特点的值,做完函数的返回值;不能用在循环中

回到正题——break/continue只能针对普通循环跳出,当碰到forEach循环时,就不会奏效

为啥不奏效?

  • forEach每一个循环实际上是一个匿名函数,所以使用break,continue你发现会报错

        fc

  •  使用return false截断的是本次循环匿名函数语句下方的代码执行,继续执行下一次遍历函数

具体实现

        方法一:改用普通for循环,这样就可以使用break,continue

let arr = [1, 2, 3, 4, 5];
for(let i = 0; i < arr.length; i++){
    if(i === 2) break; // 或continue
    console.log(arr[i])
}

// 结果
1
2

// continue
1
2
4
5

        方法二:利用try...catch在特定时机抛出异常达到跳出循环的效果

let arr = [1, 2, 3, 4, 5],
    key;
try {
    arr.forEach(item => {
        if(item === 2) {
            key = item; // 记录跳出循环时机
            throw Error()
        }
        console.log(item)
    })
} catch(error) {
  // 跳出循环后要做的操作
  ...
}
console.log('跳出循环时机:'+:key)

// 结果
1
2
跳出循环时机:2

ok!虽然知识点虽小,但不积跬步无以至千里,而且好记性不如烂笔头,特写下来增加记忆。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐