掌控JavaScript中的跳跃：全面剖析break和continue

2024-01-21 09:03:43

一、break语句：精准中止循环

break语句用于提前终止循环。当遇到break语句时，当前循环将立即结束，控制权将转到循环体后的下一条语句。

for (var i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}

这段代码使用for循环遍历数字0到9。当i等于5时，遇到了break语句，因此循环立即中止。输出结果为0、1、2、3、4。

二、continue语句：跳过本次迭代

continue语句用于跳过当前循环的剩余部分，并继续执行循环的下一轮迭代。

for (var i = 0; i < 10; i++) {
  if (i % 2 === 0) {
    continue;
  }
  console.log(i);
}

这段代码使用for循环遍历数字0到9。当i为偶数时，遇到了continue语句，因此跳过本次迭代，直接执行下一轮迭代。输出结果为1、3、5、7、9。

三、终止外层循环：巧用标签

在嵌套循环中，如果想要终止外层循环，可以使用标签来实现。

outerLoop:
for (var i = 0; i < 10; i++) {
  for (var j = 0; j < 10; j++) {
    if (i === 5 && j === 5) {
      break outerLoop;
    }
    console.log(i, j);
  }
}

这段代码使用两个嵌套循环遍历数字0到9。当i和j都等于5时，遇到了break outerLoop语句，因此终止外层循环。输出结果为0,0、0,1、0,2、0,3、0,4、1,0、1,1、1,2、1,3、1,4、2,0、2,1、2,2、2,3、2,4、3,0、3,1、3,2、3,3、3,4、4,0、4,1、4,2、4,3、4,4。

四、实战演练：优化代码

在实际开发中，break和continue语句可以帮助我们优化代码，提高程序的效率。

例如，在处理数据时，如果遇到不符合要求的数据，可以使用continue语句跳过本次迭代，直接处理下一条数据。

var data = [1, 2, 3, 4, 5, null, 6, 7, 8, 9, 10];

var filteredData = [];

for (var i = 0; i < data.length; i++) {
  if (data[i] === null) {
    continue;
  }
  filteredData.push(data[i]);
}