js 跳出多层循环（终止循环）

139 阅读 0 评论 92 点赞

我是靠谱客的博主舒适热狗，这篇文章主要介绍js 跳出多层循环（终止循环），现在分享给大家，希望可以做个参考。

看了一些文章，大概是以下2个方法：

1、throw new Error()

优点：可以中断循环执行；适用于各种形式（for循环，forEach循环等）
缺点：相当于强制抛错中断执行，不仅终止了循环，后续代码也不再执行

废话不多说，上例子，找出【第一个爱吃芒果】的人：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const arr = [
{
name: '张三',
fruit: ['苹果', '香蕉']
},
{
name: '李四',
fruit: ['梨', '芒果']
},
{
name: '王五',
fruit: ['樱桃', '西瓜']
},
{
name: '小红',
fruit: ['菠萝', '芒果']
},
]
let person = undefined
for (let i = 0; i < arr.length; i++) {
for (let j = 0; j < arr[i].fruit.length; j++) {
if (arr[i].fruit[j] === '芒果') {
console.log(arr[i].name, arr[i].fruit[j])
person = arr[i].name
// 在这里抛出异常
throw new Error('中断')
}
}
}
console.log('这里仍然可以执行', person)

在这里插入图片描述
看打印的结果：在找到第一个芒果之后，就抛出错，没有执行后续循环以及代码

【总结】

适用于验证拦截的情况，即没有后续代码。适用于各种循环形式
（但是抛个异常还是觉得怪怪的，不够完美啊）

2、为循环命名，跳出对应的循环

优点：多层循环时非常灵敏（想跳出哪一层，就跳出哪一层）；循环体后面的代码仍然执行
缺点：必须是for循环！

上同样的例子：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const arr = [
{
name: '张三',
fruit: ['苹果', '香蕉']
},
{
name: '李四',
fruit: ['梨', '芒果']
},
{
name: '王五',
fruit: ['樱桃', '西瓜']
},
{
name: '小红',
fruit: ['菠萝', '芒果']
},
]
let person = undefined
// 为紧邻的for循环命名
testLoop:
for (let i = 0; i < arr.length; i++) {
for (let j = 0; j < arr[i].fruit.length; j++) {
console.log(arr[i].name, arr[i].fruit[j])
if (arr[i].fruit[j] === '芒果') {
person = arr[i].name
// 跳出命名的循环
break testLoop
}
}
}
console.log('这里仍然可以执行', person)

在这里插入图片描述
看打印的结果，不仅阻断了命名循环的执行，而且执行命名循环后续的代码！这就很妙了~

【总结】

1、因为后续代码仍然执行，所以可用于多种逻辑情况
（比如循环次数非常非常多，你想优化执行速度，只要拿到想到的结果之后，立刻终止循环）
2、灵活，非常灵活，跳出指定命名的循环；
3、所以就只好不辞辛苦地写for循环了，不过我认为值得

【番外篇】

我在想，是只需要变量紧邻的循环用for就可以了，还是每层都得用for循环呢？？

机智（偷懒）的我，还是验证了一下，把第二层换成forEach

果不其然，现实给了我沉重的一击！

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
let person = undefined
testLoop2:
for (let i = 0; i < arr.length; i++) {
arr[i].fruit.forEach(item => {
if (item === '芒果') {
person = arr[i].name
break testLoop2
}
})
}
console.log('这里仍然可以执行', person)