Break 与 Continue：精准控制循环流程

在一场音乐会上，指挥有两个重要的手势：一个是"停止演奏"，另一个是"跳过这一小节"。第一个手势让整个乐曲终止，第二个手势让乐队跳过某些部分继续演奏。在 JavaScript 的循环世界中，break 和 continue 就是这样的指挥手势，让你能够精确控制循环的执行流程。

Break：立即跳出循环

break 语句用于立即终止循环，无论条件如何，程序会跳到循环后的第一条语句继续执行。就像紧急刹车，让循环戛然而止。

for (let i = 0; i < 10; i++) {
  console.log(i);

  if (i === 5) {
    break; // 当 i 等于 5 时，立即跳出循环
  }
}

console.log("Loop ended");

// 输出：
// 0
// 1
// 2
// 3
// 4
// 5
// Loop ended

注意输出中包含了 5，这是因为 break 在输出 5 之后才执行。一旦执行 break，循环立即结束，即使 i < 10 的条件仍然为真，后续的迭代也不会发生。

在不同循环中使用 Break

break 可以用于所有类型的循环：

// 在 while 循环中
let count = 0;
while (true) {
  count++;
  console.log(count);

  if (count === 3) {
    break; // 跳出无限循环
  }
}

// 在 for...of 循环中
let fruits = ["apple", "banana", "orange", "grape"];
for (let fruit of fruits) {
  console.log(fruit);

  if (fruit === "orange") {
    break; // 找到 orange 后停止
  }
}
// 输出: apple, banana, orange

// 在 do-while 循环中
let num = 0;
do {
  console.log(num);
  num++;

  if (num === 3) {
    break;
  }
} while (num < 10);
// 输出: 0, 1, 2

Break 在 Switch 语句中

我们之前已经见过 break 在 switch 语句中的使用，它用于防止 fall-through（穿透）：

let day = "Monday";

switch (day) {
  case "Monday":
    console.log("Start of work week");
    break; // 跳出 switch，不会继续执行下一个 case
  case "Friday":
    console.log("End of work week");
    break;
  default:
    console.log("Middle of the week");
}

虽然在 switch 中 break 很常见，但它和循环中的 break 原理相同：立即跳出当前结构。

Continue：跳过本次迭代

如果说 break 是"停止比赛"，那么 continue 就是"跳过这一轮"。continue 语句会跳过当前迭代的剩余代码，直接进入下一次迭代：

for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue; // 当 i 等于 2 时，跳过本次迭代
  }

  console.log(i);
}

// 输出：
// 0
// 1
// 3
// 4

注意 2 没有出现在输出中。当 i 等于 2 时，continue 被执行，console.log(i) 被跳过，循环直接进入下一次迭代（i 变为 3）。

Continue 的执行流程

在不同循环中，continue 的行为略有不同：

在 for 循环中：

for (let i = 0; i < 5; i++) {
  if (i % 2 === 0) {
    continue; // 跳过偶数
  }
  console.log(i); // 只输出奇数
}
// 输出: 1, 3

当 continue 执行时：

1. 跳过循环体的剩余代码
2. 执行更新表达式（i++）
3. 检查循环条件
4. 如果条件为真，开始下一次迭代

在 while 循环中：

let i = 0;
while (i < 5) {
  i++; // 必须在 continue 之前更新，否则会无限循环

  if (i === 3) {
    continue;
  }

  console.log(i);
}
// 输出: 1, 2, 4, 5

在 while 循环中使用 continue 时要特别小心。如果把 i++ 放在 continue 之后，当条件触发时，i 永远不会更新，导致无限循环：

// ❌ 错误示例：无限循环
let i = 0;
while (i < 5) {
  if (i === 2) {
    continue; // 跳过了 i++，导致 i 永远是 2
  }

  console.log(i);
  i++; // 永远执行不到这里
}

在 for...of 循环中：

let numbers = [10, 20, 30, 40, 50];

for (let num of numbers) {
  if (num === 30) {
    continue; // 跳过 30
  }

  console.log(num);
}
// 输出: 10, 20, 40, 50

实际应用场景

1. 过滤和筛选

使用 continue 跳过不符合条件的项：

let scores = [45, 78, 92, 55, 88, 34, 95];

console.log("Passing scores (>= 60):");
for (let score of scores) {
  if (score < 60) {
    continue; // 跳过不及格的分数
  }

  console.log(score);
}
// 输出: 78, 92, 88, 95

2. 提前终止搜索

使用 break 在找到目标后立即停止：

let users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" },
  { id: 4, name: "David" },
];

let targetId = 3;
let foundUser = null;

for (let user of users) {
  if (user.id === targetId) {
    foundUser = user;
    break; // 找到了就不再继续搜索
  }
}

if (foundUser) {
  console.log(`Found: ${foundUser.name}`);
} else {
  console.log("User not found");
}
// 输出: Found: Charlie

这比遍历整个数组更高效，尤其当数组很大时。

3. 验证和错误检查

let data = [10, 20, 30, -5, 40, 50];
let allValid = true;

for (let value of data) {
  if (value < 0) {
    console.log(`Invalid value found: ${value}`);
    allValid = false;
    break; // 发现错误数据就停止
  }
}

if (allValid) {
  console.log("All data is valid");
  // 继续处理数据
} else {
  console.log("Data validation failed");
}

4. 跳过特殊值

let temperatures = [20, 25, null, 28, undefined, 30, 22];
let validTemps = [];

for (let temp of temperatures) {
  if (temp === null || temp === undefined) {
    continue; // 跳过无效数据
  }

  validTemps.push(temp);
}

console.log(validTemps); // [20, 25, 28, 30, 22]

5. 处理批量操作

let files = [
  "document.pdf",
  "image.jpg",
  "data.csv",
  "video.mp4",
  "report.pdf",
];

console.log("Processing PDF files:");
for (let file of files) {
  if (!file.endsWith(".pdf")) {
    continue; // 只处理 PDF 文件
  }

  console.log(`Processing: ${file}`);
  // 执行 PDF 特定的操作
}
// 输出:
// Processing: document.pdf
// Processing: report.pdf

标签语句：控制嵌套循环

在嵌套循环中，break 和 continue 默认只影响最内层的循环。如果想跳出外层循环，需要使用标签（label）：

// 没有标签：只跳出内层循环
for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      break; // 只跳出内层循环
    }
    console.log(`i=${i}, j=${j}`);
  }
}

// 输出包含很多行，因为外层循环继续执行

使用标签可以跳出指定的循环：

// 定义标签
outerLoop: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      break outerLoop; // 跳出外层循环
    }
    console.log(`i=${i}, j=${j}`);
  }
}

console.log("Exited both loops");

// 输出：
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0
// Exited both loops

标签也可以用于 continue：

outerLoop: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (j === 1) {
      continue outerLoop; // 跳到外层循环的下一次迭代
    }
    console.log(`i=${i}, j=${j}`);
  }
}

// 输出：
// i=0, j=0
// i=1, j=0
// i=2, j=0

实际应用：查找二维数组

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

let target = 5;
let found = false;

searchLoop: for (let row = 0; row < matrix.length; row++) {
  for (let col = 0; col < matrix[row].length; col++) {
    if (matrix[row][col] === target) {
      console.log(`Found ${target} at [${row}][${col}]`);
      found = true;
      break searchLoop; // 找到后跳出全部循环
    }
  }
}

if (!found) {
  console.log(`${target} not found in matrix`);
}
// 输出: Found 5 at [1][1]

标签的注意事项

虽然标签很强大，但应该谨慎使用：

1. 可读性：过多使用标签会让代码难以理解，类似于 goto 语句的问题
2. 重构信号：如果需要频繁使用标签，可能是代码结构需要改进的信号
3. 替代方案：很多时候可以用函数和 return 来替代标签

// 使用标签
searchLoop: for (let i = 0; i < data.length; i++) {
  for (let j = 0; j < data[i].length; j++) {
    if (data[i][j] === target) {
      result = { i, j };
      break searchLoop;
    }
  }
}

// 使用函数（更清晰）
function findInMatrix(data, target) {
  for (let i = 0; i < data.length; i++) {
    for (let j = 0; j < data[i].length; j++) {
      if (data[i][j] === target) {
        return { i, j }; // 直接返回，函数结束
      }
    }
  }
  return null;
}

let result = findInMatrix(data, target);

函数方式更简洁，意图也更明确。

Break vs Continue vs Return

在循环中，有三种方式可以改变执行流程：

function demonstrateControlFlow() {
  console.log("=== Break ===");
  for (let i = 0; i < 5; i++) {
    if (i === 2) {
      break; // 跳出循环
    }
    console.log(i);
  }
  console.log("After break loop");

  console.log("\n=== Continue ===");
  for (let i = 0; i < 5; i++) {
    if (i === 2) {
      continue; // 跳过本次迭代
    }
    console.log(i);
  }
  console.log("After continue loop");

  console.log("\n=== Return ===");
  for (let i = 0; i < 5; i++) {
    if (i === 2) {
      return; // 跳出函数
    }
    console.log(i);
  }
  console.log("This won't print");
}

demonstrateControlFlow();

// 输出：
// === Break ===
// 0
// 1
// After break loop
//
// === Continue ===
// 0
// 1
// 3
// 4
// After continue loop
//
// === Return ===
// 0
// 1

• break：跳出当前循环，继续执行循环后的代码
• continue：跳过本次迭代，继续下一次迭代
• return：立即跳出整个函数，后续代码都不执行

常见陷阱与最佳实践

1. 在 While 循环中使用 Continue

// ❌ 危险：可能导致无限循环
let i = 0;
while (i < 5) {
  if (i === 2) {
    continue; // i 没有更新，会一直是 2
  }
  console.log(i);
  i++;
}

// ✅ 正确：在 continue 之前更新
let i = 0;
while (i < 5) {
  i++; // 先更新

  if (i === 2) {
    continue;
  }

  console.log(i);
}

// ✅ 或者在 continue 前更新
let i = 0;
while (i < 5) {
  if (i === 2) {
    i++;
    continue;
  }

  console.log(i);
  i++;
}

2. 过度使用导致代码复杂

// ❌ 难以理解
for (let i = 0; i < data.length; i++) {
  if (condition1) continue;
  if (condition2) break;
  if (condition3) continue;
  if (condition4) break;
  // ... 实际逻辑
}

// ✅ 使用清晰的条件
for (let i = 0; i < data.length; i++) {
  let shouldProcess = !condition1 && !condition3;
  let shouldStop = condition2 || condition4;

  if (shouldStop) break;
  if (!shouldProcess) continue;

  // ... 实际逻辑
}

// ✅ 或者提取为函数
for (let item of data) {
  if (shouldStopProcessing(item)) break;
  if (!shouldProcess(item)) continue;

  processItem(item);
}

3. Break 不能用于非循环结构

// ❌ 错误：break 只能在循环或 switch 中使用
if (condition) {
  // break; // 语法错误！
}

// ✅ 使用 return 或其他控制流
function checkCondition() {
  if (condition) {
    return; // 跳出函数
  }
  // 继续执行
}

4. 优先考虑数组方法

对于很多场景，使用数组方法比手写循环更清晰：

// ❌ 使用 break/continue
let evenNumbers = [];
for (let num of numbers) {
  if (num % 2 !== 0) continue;
  evenNumbers.push(num);
}

// ✅ 使用 filter
let evenNumbers = numbers.filter((num) => num % 2 === 0);

// ❌ 使用 break 查找
let found = null;
for (let item of items) {
  if (item.id === targetId) {
    found = item;
    break;
  }
}

// ✅ 使用 find
let found = items.find((item) => item.id === targetId);

数组方法通常更简洁、更具声明性。

性能考量

在某些情况下，break 可以显著提升性能：

// 场景：在大数组中查找元素

let largeArray = new Array(1000000).fill(0);
largeArray[500000] = 1; // 目标在中间

// 不使用 break：总是遍历全部
console.time("Without break");
let found1 = false;
for (let i = 0; i < largeArray.length; i++) {
  if (largeArray[i] === 1) {
    found1 = true;
    // 没有 break，继续遍历剩余 500000 个元素
  }
}
console.timeEnd("Without break");

// 使用 break：找到后立即停止
console.time("With break");
let found2 = false;
for (let i = 0; i < largeArray.length; i++) {
  if (largeArray[i] === 1) {
    found2 = true;
    break; // 立即停止
  }
}
console.timeEnd("With break");

// "With break" 会快得多

在查找、验证等场景中，合理使用 break 能避免不必要的迭代。

总结

break 和 continue 是精确控制循环流程的强大工具，让你能够在循环中做出灵活的决策。break 用于完全跳出循环，continue 用于跳过当前迭代，两者配合使用可以优雅地处理各种复杂场景。

关键要点：

• break 立即终止循环，跳到循环后的代码
• continue 跳过当前迭代，进入下一次迭代
• 在 while 循环中使用 continue 时，确保循环变量会更新
• 使用标签可以控制嵌套循环，但应谨慎使用
• 优先考虑数组方法（filter、find 等）而不是手写循环
• 在查找和验证场景中，break 可以提升性能
• 过度使用会降低代码可读性，考虑重构为函数

掌握 break 和 continue 的正确用法，能让你的循环逻辑更加精准和高效。但要记住，清晰的代码结构往往比巧妙的控制流更重要。

---