JavaScript流程控制语句实例详解

流程控制语句概述

JavaScript中的流程控制语句用于控制代码的执行顺序，根据条件或循环逻辑决定代码块的执行路径。主要包括条件语句和循环语句两大类。

条件语句

条件语句通过判断给定条件的真假来决定执行哪部分代码。

根据条件执行不同代码块，核心是if...else和switch。

if语句 基础条件判断结构：

if (condition) {
  // 条件为真时执行的代码
}

解析：条件表达式结果为true时，执行花括号内的代码；否则跳过。

if-else语句 双向条件分支：

if (condition) {
  // 条件为真时执行
} else {
  // 条件为假时执行
}

解析：二选一执行，覆盖所有情况。

if-else if-else 多条件分支判断：

if (condition1) {
  // 条件1为真时执行
} else if (condition2) {
  // 条件2为真时执行
} else {
  // 所有条件为假时执行
}

解析：多条件分支，按顺序判断，匹配第一个true条件后执行对应代码，后续条件不再判断。

switch语句 多分支选择结构：

switch(expression) {
  case value1:
    // 匹配value1时执行
    break;
  case value2:
    // 匹配value2时执行
    break;
  default:
    // 默认执行
}

• 表达式与case值用 ** 严格相等（===）** 比较。
• break用于跳出switch，否则会继续执行后续case（“穿透” 现象）。
• default可选，无匹配时执行。

循环语句

循环语句用于重复执行代码块，直到满足特定条件。

重复执行代码块，核心是for、while、do...while。

for循环 已知迭代次数的循环：

for (initialization; condition; finalExpression) {
  // 循环体
}

• 初始化：只执行一次，通常声明循环变量（如let i = 0）。
• 条件判断：每次循环前执行，true则进入循环体。
• 更新：每次循环体执行后执行，通常更新循环变量（如i++）。

while循环 条件前置循环：

while (condition) {
  // 循环体
}

解析：先判断条件，true则执行循环体，适合循环次数不确定的场景。

do-while循环 条件后置循环（至少执行一次）：

do {
  // 循环体
} while (condition);

解析：先执行一次循环体，再判断条件，至少执行一次。

for-in循环 遍历对象属性：

for (const key in object) {
  // 使用object[key]访问属性值
}

for-of循环 遍历可迭代对象（ES6新增）：

for (const item of iterable) {
  // 使用item访问元素
}

跳转语句

控制流程跳转的特殊语句。

控制循环或分支的执行流程，包括break、continue、return。

break 终止当前循环或switch语句：

while (true) {
  if (condition) break; // 立即退出循环
}

作用：跳出当前循环（for/while）或switch语句

continue 跳过当前循环迭代：

for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) continue; // 跳过偶数次迭代
  console.log(i);
}

跳过当前循环的剩余代码，直接进入下一次循环。

return 从函数中返回：

function test() {
  return; // 提前退出函数
}

• 作用：终止函数执行并返回值，不仅用于流程控制，还能返回结果。

异常处理

通过try-catch结构处理运行时错误。

try-catch-finally 错误捕获和处理机制：

try {
  // 可能出错的代码
} catch (error) {
  // 错误处理
} finally {
  // 无论是否出错都会执行
}

throw 主动抛出异常：

throw new Error('自定义错误信息');

最佳实践

1. 条件语句中优先使用严格比较（===）
2. switch语句必须包含break或return避免穿透
3. 循环体内避免修改循环计数器
4. 嵌套循环不宜超过3层
5. 异常处理应具体化错误类型

这些流程控制语句组合使用可以实现复杂的程序逻辑，合理运用能显著提升代码可读性和执行效率。

注意事项

1. 死循环：条件永远为true且无break，会导致程序卡死（如while(true)无终止条件）。
2. 严格相等：switch的case匹配使用===，需注意类型（如1和"1"不匹配）。
3. 变量作用域：for循环中用let声明变量（块级作用域），避免var的变量提升问题。

通过流程控制语句，JavaScript 可以实现复杂的逻辑判断和重复操作，是编写交互逻辑的基础。

在实际开发中，JavaScript 流程控制语句的使用频率和场景高度依赖业务需求，以下是不同场景下的常用选择及实践经验：

一、条件判断：if...else if...else为主，switch为辅

1.if...else if...else：最常用

• 适用场景：
  • 条件为范围判断（如 score > 90、age >= 18）。
  • 条件为复杂表达式（如多个逻辑运算符组合 a && b || c）。
  • 分支逻辑不一致（每个分支执行不同类型的操作）。

2.switch：适合固定值匹配

• 适用场景：
  • 条件为单一值匹配（如状态码、枚举值、固定类型）。
  • 分支逻辑相对统一（如根据类型执行相似操作）。

二、循环语句：for/for...of为主，while/do...while为辅

1.for循环：最基础，适合已知循环次数

• 适用场景：遍历数组（通过索引）、固定次数的重复操作（如生成指定长度的数组）。

2.for...of：ES6+ 首选，遍历可迭代对象

• 适用场景：遍历数组、字符串、Map/Set 等，直接获取值而非索引，代码更简洁。

3.for...in：仅用于遍历对象属性（慎用）

• 适用场景：遍历普通对象的键名（需注意过滤原型链属性），不推荐遍历数组（可能遍历到非数字索引）。

4.while/do...while：适合循环次数不确定

• 适用场景：
  • 异步操作重试（如接口请求失败后重试 3 次）。
  • 读取流数据（直到数据读取完毕）。

三、跳转语句：break/continue/return按需使用

1.break：终止循环或switch

• 常用场景：
  • 遍历数组时找到目标值后终止循环。
  • 满足特定条件时退出循环（如用户取消操作）。

2.continue：跳过当前循环

• 常用场景：过滤数据（如跳过空值、无效数据）。

3.return：终止函数执行

• 常用场景：函数提前返回结果（如参数校验失败时直接返回错误）。

四、实战高频组合

1. if + for...of：处理数组过滤、转换（如筛选符合条件的数据）。
2. switch + break：状态机、类型判断（如根据操作类型执行不同逻辑）。
3. while + 异步：重试机制、轮询（如 WebSocket 重连）。
4. 循环嵌套：处理二维数据（如表格渲染、矩阵运算）。

五、开发建议

• 优先使用for...of而非for：代码更简洁，避免索引错误（尤其遍历数组）。
• 少用for...in遍历数组：可能遍历到数组的自定义属性或原型链属性。
• 复杂条件用if，固定值匹配用switch：提升代码可读性。
• 避免死循环：确保循环条件最终会变为false，或通过break终止。

总之，实际开发中没有绝对 “唯一” 的选择，需根据条件类型、循环场景和代码可读性综合判断，核心是让逻辑清晰、易于维护。

到此这篇关于JavaScript流程控制语句的文章就介绍到这了,更多相关js流程控制语句内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论