JS中break、continue、return跳出循环的用法和区别


字数:517 阅读时长:2分钟 阅读:85

在前端开发中,使用循环遍历操作肯定不可避免。常用的循环语句如:for、do/while、while、for/in、for/of、forEach、map 等等,日常开发时经常会遇到遍历某些值要跳过循环、或者中断循环,这时就要用到 break、return、continue 等关键词来区别处理。

break && return && continue

一、break

作用: 立刻退出包含在最内层的循环或者退出一个 switch 语句。

使用特点:

  1. switch 判断语句
  2. 循环语句:for、do/while、while、for/in、for/of
  3. 不能在 forEach、map 遍历中使用,否则会报错:Uncaught SyntaxError: Illegal break statement

例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function fn() {
let arr = [1,2,3,4,5]
for (let item of arr) {
if (item===3) {
break
}
console.log(item)
}
}

fn()

/* 输出: */
// 1
// 2

二、continue

作用: continue 语句和 break 语句相似,不同的是,continue 不退出循环,只跳过当前循环。

使用特点:

  1. switch 判断语句
  2. 循环语句:for、do/while、while、for/in、for/of
  3. continuedo/whilewhile 循环体中使用,会出现 死循环,引起程序崩溃,一定要慎之又慎

例: 以下循环只跳过了 i === 3 时的这一次迭代。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function fn() {
for(var i = 0; i < 5; i++) {
if(i === 3) {
continue
}
console.log(i)
}
}

fn()

/* 输出: */
// 0
// 1
// 2
// 4

三、return

作用: return 用于返回函数的返回值,因此 return 语句只能出现在函数体内,否则会报错:Uncaught SyntaxError: Illegal return statement

使用特点:

  1. 只能用在 function 函数体内
  2. for、do/while、while、for/in、for/of 中会退出循环,类似 break 的效果
  3. forEach、map 遍历中,只跳过当前循环,会继续下次迭代,类型 continue 的效果

例1:while 中当执行到 i === 3 ,会退出循环。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function fn() {
let i = 0
while (i<5) {
if (i===3) {
return
}
console.log(i)
i ++
}
}

fn()

/* 输出: */
// 0
// 1

例2:forEach 循环中只跳过了 i === 2 时的这一次迭代。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function fn() {
let arr = Array(5).fill(1)
arr.forEach((item, index)=>{
if (index===2) {
return
}
console.log(index)
})
}

fn()

/* 输出: */
// 0
// 1
// 3
// 4

欢迎访问:天问博客

本文作者: Tiven
发布时间: 2022-07-08
最后更新: 2022-07-08
本文标题: JS中break、continue、return跳出循环的用法和区别
本文链接: https://www.tiven.cn/p/6195dbbd/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^