JS流程控制指南：条件判断与循环语句的用法

编写JavaScript程序时，代码默认从上至下顺序执行。然而，实际业务中充斥着各种状态决策与重复数据处理需求：例如判断用户权限、校验输入有效性、遍历数据集合以及执行批量计算。掌握条件分支与循环控制，是构建程序分支走向、掌控执行秩序的核心基本功。本文将全面梳理条件判断语句（if-else、switch、三元运算）与循环语句（for、while、for...of/for...in）的具体语法规范、核心应用场景与关键避坑要点。

一、条件分支语句的理解与运用

条件控制的核心在于“根据真假值执行不同代码段”。JavaScript提供了多种条件表达方式，合理选型不仅能提升代码可读性，还能避免多层嵌套产生的维护难题。

1. if-else 及其多重分支

if 语句是通用性最强的条件分支工具。括号内的表达式无论类型如何，都会被隐式转换为布尔值进行真值测试（Truthiness Test）。

function evaluateScore(score) {
  if (score >= 90) {
    return "优秀";
  } else if (score >= 60) {
    return "及格";
  } else {
    return "不及格";
  }
}

// 示例调用输出
console.log(evaluateScore(85)); // 输出: "及格"

当处理多层判断时，建议提倡“尽早返回（Guard Clauses）”模式，避免嵌套过深。例如在函数开头检测非法边界参数并直接 return，使核心代码在扁平结构中展开。

2. switch-case 结构

当面对针对单一变量的多个具体离散值匹配时，switch 语句的语义更为清晰。需要注意：switch 内部比较采用严格全等对比（===），不会发生隐式类型转换。

function handleOrderStatus(status) {
  switch (status) {
    case "PENDING":
      console.log("订单待支付");
      break;
    case "PAID":
      console.log("订单已支付，等待发货");
      break;
    case "SHIPPED":
      console.log("商品已发货");
      break;
    default:
      console.log("未知订单状态");
  }
}

// 示例调用输出
handleOrderStatus("PAID"); // 输出: "订单已支付，等待发货"

3. 三元运算符与短路求值

三元运算符 条件 ? 表达式1 : 表达式2 是条件语句的表达式形式，通常用于快速变量赋值或行内文本展示，但不宜嵌套使用以免降低可读性。逻辑运算符 && 和 || 则可用于轻量短路取值。

// 三元运算符赋值
const userRole = isAdmin ? "Administrator" : "User";

// 短路运算赋默认值
const port = process.env.PORT || 3000;

二、循环语句的机制与实践规范

循环负责按规则重复执行代码块，直到预设条件不再满足。JavaScript提供了计数型、条件判定型以及对象/集合遍历型循环。

1. 标准 for 循环

标准 for (初始化; 条件判断; 步进递增) 循环是最经典的计次工具，能够精细控制循环计数器、步长与退出节点。

const items = ["Apple", "Banana", "Cherry"];

for (let i = 0; i < items.length; i++) {
  console.log(`索引: ${i}, 内容: ${items[i]}`);
}

// 示例输出:
// 索引: 0, 内容: Apple
// 索引: 1, 内容: Banana
// 索引: 2, 内容: Cherry

在循环体内部，声明循环变量时请始终使用 let，以便在每次迭代中生成独立的块级作用域闭包，避免旧式 var 导致的变量提升污染与异步回调陷阱。

2. while 与 do...while 循环

当迭代次数无法预知、仅依赖特定动态状态改变时，使用 while 循环最为直接：

let attempts = 0;
let isConnected = false;

while (!isConnected && attempts < 3) {
  attempts++;
  console.log(`第 ${attempts} 次尝试建立连接...`);
  // 模拟在第二次成功连接
  if (attempts === 2) {
    isConnected = true;
  }
}

console.log(`连接最终状态: ${isConnected}`);
// 示例输出:
// 第 1 次尝试建立连接...
// 第 2 次尝试建立连接...
// 连接最终状态: true

do...while 与 while 的唯一区别在于：它先执行一次循环体，再校验条件。因此无论条件初始是否成立，循环体至少会执行一次。

3. modern 遍历：for...of 与 for...in

现代JavaScript推行声明式与语义更强的集合遍历语法：

• for...of：用于遍历任何可迭代对象（Iterable），如 Array、String、Map、Set 等，直接获取元素的值。
• for...in：用于遍历对象的键名（Key）。注意它会枚举原型链上的可枚举属性，且遍历数组时不保证顺序，因此绝不要用 for...in 遍历数组。

const scores = [88, 92, 79];

// 使用 for...of 直接获取数组元素
for (const score of scores) {
  console.log(`得分: ${score}`);
}

const config = { host: "localhost", port: 8080 };
// 使用 for...in 遍历对象自有属性
for (const key in config) {
  if (Object.prototype.hasOwnProperty.call(config, key)) {
    console.log(`${key}: ${config[key]}`);
  }
}

三、中断与跳转控制：break 与 continue

在循环执行期间，常常需要根据即时计算结果变更循环路径。JavaScript提供了 break 与 continue 两种指令：

• break：立即强制终止整个循环，跳出当前循环体，执行循环结构后面的代码。
• continue：跳过本次迭代中尚未执行的剩余代码，直接前进到下一次迭代判定中。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8];

for (const num of numbers) {
  // 过滤偶数：直接跳往下一轮
  if (num % 2 === 0) {
    continue;
  }

  // 达到阈值：直接终止整个循环
  if (num > 5) {
    break;
  }

  console.log(`有效奇数: ${num}`);
}

// 示例输出:
// 有效奇数: 1
// 有效奇数: 3
// 有效奇数: 5

四、流程控制核心原则与综合选型总结

掌握流程控制的语法并不复杂，但在大型项目中保持代码清晰、健壮与高效，需要遵循以下工程准则：

1. 防止无限循环（死循环）：使用 while 或无条件 for (;;) 时，必须确保在循环体内存在必定能触发退出条件的修改逻辑，或设立硬性最大迭代次数兜底。
2. 避免在循环条件中重复计算属性：例如在 for (let i = 0; i < domList.length; i++) 中，若集合较大或属于动态DOM实时集合，建议缓存长度 const len = domList.length。
3. 优先选用数组内置高阶方法替代繁琐的手动循环：当业务目标是纯粹的映射转换、过滤筛选或累加汇总时，map、filter、reduce 等函数式方法往往比显式命令式循环更加简洁不易出错；而在需要提前 break 终止遍历的场景下，保持使用 for...of 则是最优解。