JavaScript break 和 continue 语句（长文讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在 JavaScript 开发中，循环是处理重复任务的核心工具。然而，当需要根据特定条件提前终止循环或跳过当前迭代时，break 和 continue 语句就显得尤为重要。无论是初学者还是中级开发者，掌握这两个语句的用法，不仅能提升代码效率，还能让逻辑更加清晰。本文将通过循序渐进的方式，结合实际案例和代码示例，深入解析 break 和 continue 的核心功能与应用场景。

一、基础概念：循环与流程控制

在讲解 break 和 continue 之前，需要先理解循环的基本结构。JavaScript 中的循环（如 for、while、do...while）用于重复执行一段代码，直到满足终止条件。然而，在实际开发中，我们常常需要根据动态条件调整循环的执行路径：

• 提前终止循环：当某个条件达成时，立即退出循环（如找到目标值、遇到错误等）。
• 跳过当前迭代：在满足特定条件时，忽略当前循环的剩余代码，直接进入下一次迭代。

此时，break 和 continue 就像“交通信号灯”一样，控制循环的流程方向。

二、break 语句：立即终止循环

1. break 的基本语法

break 语句用于完全退出当前循环，并继续执行循环后的代码。其语法如下：

break;  

2. break 的典型应用场景

案例 1：找到目标值后退出循环

假设需要在一个数组中寻找第一个大于 10 的元素，找到后立即停止循环：

const numbers = [3, 7, 12, 5, 18];  
for (let i = 0; i < numbers.length; i++) {  
  if (numbers[i] > 10) {  
    console.log(`找到目标值：${numbers[i]}，索引为 ${i}`);  
    break; // 找到后立即退出循环  
  }  
}  
// 输出：找到目标值：12，索引为 2  

案例 2：处理错误或异常

在循环中，当检测到无效数据时，使用 break 终止后续操作：

function validateData(arr) {  
  for (let item of arr) {  
    if (typeof item !== "number") {  
      console.log("数据包含非数字类型，终止循环");  
      break;  
    }  
    // 后续处理逻辑  
  }  
}  
validateData([1, 2, "error", 4]); // 输出：数据包含非数字类型，终止循环  

3. break 的扩展：标签与多重循环

JavaScript 允许通过标签（label）指定 break 退出的循环层级。例如，在嵌套循环中，可以标记外层循环并直接跳出：

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}`);  
  }  
}  
// 输出结果仅包含 i=0 的所有 j 值  

三、continue 语句：跳过当前迭代

1. continue 的基本语法

continue 用于跳过当前循环的剩余代码，直接进入下一次迭代。其语法如下：

continue;  

2. continue 的典型应用场景

案例 1：跳过不符合条件的元素

例如，遍历数组时忽略偶数：

for (let i = 0; i < 5; i++) {  
  if (i % 2 === 0) {  
    continue; // 跳过偶数的后续代码  
  }  
  console.log(i); // 输出 1, 3  
}  

案例 2：数据过滤与处理

在处理用户输入时，跳过空值或无效数据：

const inputs = ["apple", "", "banana", null, "cherry"];  
for (let i = 0; i < inputs.length; i++) {  
  if (!inputs[i]) {  
    continue; // 跳过空值或 null  
  }  
  console.log(`处理输入：${inputs[i]}`);  
}  
// 输出：处理输入：apple, 处理输入：banana, 处理输入：cherry  

3. continue 的扩展：标签与多层循环

类似 break，continue 也可以通过标签指定跳转层级。例如，在嵌套循环中，跳过内层循环的当前迭代：

outerLoop:  
for (let i = 0; i < 2; i++) {  
  innerLoop:  
  for (let j = 0; j < 2; j++) {  
    if (j === 1) {  
      continue innerLoop; // 跳过内层循环的当前 j=1 的迭代  
    }  
    console.log(`i=${i}, j=${j}`);  
  }  
}  
// 输出：i=0,j=0 和 i=1,j=0  

四、break 和 continue 的对比

下表总结了两者的核心区别：

五、实战案例：结合真实场景的应用

案例 1：表单验证中的条件跳过

在表单验证时，使用 continue 跳过已验证通过的字段，集中处理错误：

const formFields = {  
  username: "user123",  
  email: "invalid_email",  
  password: "123456"  
};  

for (const field in formFields) {  
  if (field === "email" && !formFields[field].includes("@")) {  
    console.log(`错误：${field} 格式不正确`);  
    break; // 遇到错误后终止验证  
  }  
  console.log(`验证通过：${field}`);  
}  
// 输出：验证通过：username，错误：email 格式不正确  

案例 2：计算平均分，忽略零分

在计算成绩平均值时，使用 continue 跳过零分项：

const scores = [85, 0, 90, 70, 0, 88];  
let total = 0;  
let count = 0;  

for (const score of scores) {  
  if (score === 0) {  
    continue; // 跳过零分  
  }  
  total += score;  
  count++;  
}  

const average = total / count;  
console.log(`有效平均分：${average.toFixed(2)}`); // 输出：85.67  

六、常见误区与最佳实践

1. 误区：break 只能跳出一层循环

如果不使用标签，break 默认仅退出最近的循环。例如：

for (let i = 0; i < 2; i++) {  
  for (let j = 0; j < 2; j++) {  
    if (j === 1) break; // 只跳出内层循环  
    console.log(`i=${i}, j=${j}`);  
  }  
}  
// 输出：i=0,j=0 和 i=1,j=0  

2. 误区：continue 会执行循环条件判断

即使使用 continue，循环的条件判断仍会执行。例如：

let i = 0;  
while (i < 3) {  
  i++;  
  if (i === 2) continue; // 跳过 i=2 的后续代码  
  console.log(i); // 输出 1 和 3  
}  

3. 最佳实践

• 明确标注标签：在嵌套循环中，使用标签提升代码可读性。
• 避免过度使用：过多的 break 和 continue 可能导致逻辑混乱，建议优先通过条件判断优化循环结构。
• 结合返回语句：在函数中，可结合 return 替代 break，直接返回结果。

结论

通过本文的讲解，可以发现 break 和 continue 是 JavaScript 中控制循环流程的利器。无论是提前终止循环还是跳过特定迭代，这两个语句都能让代码更加简洁高效。

对于初学者，建议通过实际案例逐步练习，例如在遍历数组、表单验证或数据过滤中应用这两个语句。对于中级开发者，则可以深入理解它们在嵌套循环和复杂逻辑中的高级用法。

掌握 JavaScript break 和 continue 语句，不仅能解决日常开发中的常见问题，还能为编写更优雅、可维护的代码打下坚实基础。希望本文能成为你深入理解这两个语句的起点！