return,break,continue-傻傻分不清

对于前端初学者来说, 甚至说一些用了js蛮久的人来说, 对于如题所说的几个语句可能只是一知半解, 以至于有时候能达到预期目的, 有时候又有一些蜜汁结果, 今天就来捋它!

break

break 比较常用的用法, 就是用于终止循环, 可以用于终止 while 和 switch 循环, 如下所示:

// while循环, 如:
let l=0,r=5
while(l<r) {
    l++;
    // 当l===2时终止循环
    if(l===2) break;
    console.log(l+r)
    r--
}

// switch
let num=1, status=''
switch (num){
      case 1: 
          status = 'good'
          break
      case 0:
          status = 'bad'
          break
      default:
          status = 'unknown'
}
console.log(status)
// 如果你不写break, 则这句判断里面写的语句执行完它还会往下执行

// 反过来就是说, 如果多个switch条件都是相同的处理方式, 可以这么写
switch (num){
      case 1: 
          status = 'good'
          break;
      case 0:
      case 2:
      default:
          status = 'unknown'
}
// 除了num===1外的所有情况都执行status = 'unknown'操作
// 因为其他 case 条件下没有 break 语句,不会终止循环,会一直往下执行到 default 里面定义的操作

少见的情况是, break可以允许终止指定被标记语句, 也就是 break [label]

ps. 这里的语句不一定要循环语句, 可以是任何 {} 包括的块语句 (即你可以把几句语句定义为一个block)

// 终止 block
block1:{
  block2:{
    console.log ('1');
    break block1;      // 终止/跳出 block1
    console.log ('oops');    // 跳过
  }
  console.log ('2');        // 跳过
}

// switch示例
let num=1, status=''
switch1: switch (num){
      case 1: 
          status = 'good'
          // then break the labeled block
          break switch1
      case 0:
          status = 'bad'
          break
      default:
          status = 'unknown'
}

注意: 该语句必须是嵌套在被标记语句内部, 并且不能在函数内, 才能正常终止, 否则报错, 如下面这种写法

let l=0,r=5
while(l<r) {
    (function() {
        if(l===2) break;  // Uncaught SyntaxError: Illegal break statement
    })()
    l++;
    r--
}

continue

continue 的用法和限制都跟 break 类似, 但它是用于中止本轮循环, 继续执行下一轮的迭代, 如 for循环中控制流跳转到更新语句, while 循环中控制流跳转回条件判断

let l=0,r=5
while(l<r) {
    l++;
    // l===1的循环中止, 回到判断条件, 满足条件则继续往下执行下一轮循环
    if(l===1) continue;
    r--
}
// > 2,4
// > 3,3

也可以指定 label, 如 continue [label] 指定要中止的代码块

return

终止函数执行, 同时可以返回一个指定值, 如果省略该值, 则返回undefined

无论 return 藏得有多深, 只要执行 return , 函数就要终止

function test() {
  for (var i = 1; i<10 ; i++) {  // 10次循环
    console.log('a'+i); // 执行5次
    if (i === 5) {
      // 第5次循环会被 return 终止,直接终止函数执行, 包括函数内的所有未执行的满足条件的循环
      return;
    }
    console.log('b'+i);  // 执行4次
  }
  console.log('c'+i);  // 这是同步语句,需要等到for循环执行完才轮到它, 但是for循环没有执行完就被return终止掉了, 所以这句不会执行
}

test();
// > a1
// > b1
// > a2
// > b2
// > a3
// > b3
// > a4
// > b4
// > a5

❗ 例外:

return 用于 forEach 循环中时, 并不能跳出循环, 但是能起到 continue 的作用, 如:

const arr = [1,2,3,4,5]
arr.forEach((item, index) => {
    // return 没有跳出循环的功能,但是可以作为continue,转入下一次循环
    if (item < 2) return
    console.log(`index：${index}，value：${item}`)
})
console.log(arr)
// > index：1，value：2
// > index：2，value：3
// > index：3，value：4
// > index：4，value：5
// > [1,2,3,4,5]