js中跳出循环return和break的区别
更新时间: 2022-05-05 13:40:06
使用for循环的时候经常会遇到需要跳出循环或者终止循环的情况，那么break,return,continue究竟有什么不同，它们都有什么效果呢。
# break
break 语句用于退出 switch 语句或循环语句(for, for ... in, while, do ... while)。
当 break 语句用于 switch 语句中时，会跳出 switch 代码块，终止执行代码。
当 break 语句用于循环语句时，会终止执行循环，并执行循环后代码(如果有的话)。
break 语句同样可用于可选的标签引用，用于跳出代码块
# break语句终止循环
var i = 0;
while (i < 5) {
console.log(i)
i++;
if (i == 3) {
break;
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
执行结果：
0
1
2
1
2
3
2
3
for循环中使用break会终止后面的循环，后面的代码不会再执行了
# break语句终止嵌套循环
for(let i = 0;i<5;i++) {
console.log("i=",i)
for(let j = 0;j < 5;j++) {
console.log("j=",j)
if(j == 3) {
break;
}
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
这种情况不会终止掉外层循环，内层循环会被终止
正确的方式是使用break + label
flag:
for(let i = 0;i<5;i++) {
console.log("i=",i)
for(let j = 0;j < 5;j++) {
console.log("j=",j)
if(j == 2) {
break flag;
}
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
执行结果：
i= 0
j= 0
j= 1
j= 2
1
2
3
4
2
3
4
可以看到使用break+label的方式，将外层循环中断掉了
break可以结束掉forEach，map,filter,for...in这种循环吗
答：只有for...in可以，其它的都会有语法错误。
# continue
continue 用于跳过循环中的一个迭代，并继续执行循环中的下一个迭代。
continue 与 break 语句的区别是， break 是结束整个循环体，continue是结束单次循环。
但是，在执行 continue 语句时，表现出了两种不同类型的循环：
- 在 while 循环中，会先判断条件，如果条件为 true，循环再执行一次。
- 在 for 循环中，自增长表达式 (如：i++) 会先计算，然后再判断条件是否为true，再决定是否执行迭代。
var i = 0;
while (i < 5) {
i++;
if (i == 3) {
continue;
}
console.log(i)
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
执行结果：
1
2
4
5
1
2
3
4
2
3
4
# return
return语句用于指定函数返回的值。return语句只能出现在函数体内，出现在代码中的其他任何地方都会造成语法错误。
前面提到的结束多重循环的问题，用return也可以解决。
(function (){
for(let i = 0;i<5;i++) {
console.log("i=",i)
for(let j = 0;j < 5;j++) {
console.log("j=",j)
if(j == 2) {
return
}
}
}
})()
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
执行结果：
i= 0
j= 0
j= 1
j= 2
1
2
3
4
2
3
4