JavaScript条件判断与循环语句怎么写？基础逻辑控制入门

在编写购物车结算功能时，程序经常需要处理两类典型操作：根据订单实付金额决定是否减免运费，以及遍历购物车里的所有商品逐项累加价格。如果代码只能从上到下一行接一行机械执行，就无法对不同输入做出区别对待，也无法高效处理批量数据。JavaScript 提供了条件判断（if-else、switch）与循环控制（for、while、do-while）两套核心语法，帮助开发者按需分流代码路径或重复执行指定逻辑。

一、条件分支：if、else if 与 else

条件判断语句允许程序在满足特定布尔条件时才执行指定代码块。最基础的形式是 if 语句，当括号内的表达式求值为 true 时，花括号包裹的代码才会触发。

// 基础 if...else 示例
let orderAmount = 88;
let shippingFee = 0;

if (orderAmount >= 99) {
  shippingFee = 0; // 满 99 包邮
} else {
  shippingFee = 10; // 不足 99 需付 10 元运费
}

// 示例输出：订单 88 元未满 99，shippingFee 为 10

当需要应对三种或更多互斥区间时，可以使用 else if 连续判断。JavaScript 会自上而下依次求值，一旦命中某个分支，执行完该分支代码后便会跳出整个判断结构，不再计算后续条件。

let score = 75;
let grade = '';

if (score >= 90) {
  grade = '优秀';
} else if (score >= 75) {
  grade = '良好';
} else if (score >= 60) {
  grade = '及格';
} else {
  grade = '不及格';
}

// 示例输出：score 为 75 时进入第二个分支，grade 结果为 "良好"

二、多值离散匹配：switch 语句

当判断条件是对单一变量的具体离散值（如支付方式、状态码、星期序号）进行等值匹配时，使用 switch 语句通常比一连串 else if 更加工整易读。

switch 内部采用全等匹配（即相当于 ===），不会发生隐式类型转换。每一个 case 对应一个可能的值，末尾务必使用 break 语句阻断代码向下穿透。

let paymentMethod = 'alipay';
let handlerDescription = '';

switch (paymentMethod) {
  case 'wechat':
    handlerDescription = '调起微信支付接口';
    break;
  case 'alipay':
    handlerDescription = '调起支付宝网页收银台';
    break;
  case 'card':
    handlerDescription = '调起银行卡网关';
    break;
  default:
    handlerDescription = '不支持的支付途径，提示用户更换';
    break;
}

// 示例输出：命中 'alipay' 分支，handlerDescription 为 "调起支付宝网页收银台"

如果不写 break，程序会无视接下来的 case 条件，继续执行后续语句，这被称为“穿透”（fall-through）。虽然在某些合并多状态的场景下是有意为之，但在大多数情况下属于初学者遗漏关键字导致的逻辑错误。

三、循环语句：for、while 与 do-while

循环用于按条件重复执行一段代码。JavaScript 提供了多种形式的循环语法，分别适用于不同迭代场景。

1. for 循环：已知次数或索引遍历

标准 for 循环通过三段式声明控制循环生命周期：初始化计数器、循环终止条件、单次循环后递增。

let items = [29, 99, 150];
let total = 0;

for (let i = 0; i < items.length; i++) {
  total += items[i];
}

// 示例输出：i 经历 0、1、2 三轮累加，total 最终计算结果为 278

2. while 循环：未知次数但有明确退出状态

while 在每次进入循环体前先判断条件。如果一开始条件就不成立，循环体一次都不会执行。

let balance = 100;
let ticketPrice = 30;
let count = 0;

while (balance >= ticketPrice) {
  balance -= ticketPrice;
  count++;
}

// 示例输出：购得 3 张票，剩余 balance 为 10 元

3. do-while 循环：至少执行一次

与 while 不同，do-while 会先无条件执行一次循环体，然后再在末尾判断布尔条件是否继续。这在需要先向用户索取一次输入或至少执行一次初始化探查时非常有用。

let attempts = 0;

do {
  attempts++;
  // 模拟发送心跳探测请求
} while (attempts < 3);

// 示例输出：心跳至少探测 1 次，当 attempts 累加至 3 时退出循环

四、循环控制与常见问题排查

在循环内部，有时不需要按部就班走完整体流程，JavaScript 提供了两个专有关键字用于改变迭代节奏：

• break：强制中断并彻底退出当前整个循环体，直接执行循环之后的语句。常用于搜索到目标后立即停下。
• continue：立即跳过本次迭代剩余的代码，直接推进计数器并进入下一次条件判断。常用于过滤无效数据。

let numbers = [10, -5, 20, 0, 35, 99];
let validSum = 0;

for (let i = 0; i < numbers.length; i++) {
  let val = numbers[i];
  
  if (val < 0) {
    continue; // 遇到负数，跳过当前项
  }
  
  if (val > 50) {
    break; // 遇到大于 50 的异常过大数字，停止后续累加
  }
  
  validSum += val;
}

// 示例输出：-5 被 continue 跳过，累计 10 + 20 + 0 + 35 = 65，遇到 99 时 break 退出

常见问题一：死循环（Infinite Loop）

如果循环的终止条件永远无法满足，浏览器或 Node.js 进程就会陷入死循环，造成页面卡死或 CPU 占用率 100%。死循环通常由以下两点原因引起：

• 漏写步进代码：例如在 while (count < 5) 中忘记编写 count++。
• 逻辑终止条件恒真：例如条件写为 i >= 0，而计数器却在持续递增 i++。

常见问题二：作用域与 var 声明问题

在 ES6 之前使用 var i = 0 声明循环变量时，由于 var 具备函数作用域且存在变量提升，如果在循环内部注册异步事件或定时器，变量 i 会被所有回调共享，导致输出值全是最大上限。现代 JavaScript 统一推荐使用具有块级作用域的 let 声明计数器。

五、综合实战与逻辑控制选型

下面通过一个处理用户权限与过滤消费数据的场景，将条件分支与循环控制综合串联起来：

// 综合场景：统计指定角色用户的有效消费金额
const records = [
  { user: 'Alice', role: 'admin', amount: 120 },
  { user: 'Bob', role: 'guest', amount: 45 },
  { user: 'Charlie', role: 'member', amount: -10 }, // 脏数据
  { user: 'David', role: 'member', amount: 80 }
];

let totalValidAmount = 0;

for (const record of records) {
  // 1. 数据校验与跳过
  if (record.amount <= 0) {
    continue;
  }
  
  // 2. 身份权限分类处理
  switch (record.role) {
    case 'admin':
    case 'member':
      totalValidAmount += record.amount;
      break;
    default:
      // guest 角色不计入会员统计
      break;
  }
}

// 示例输出：累加 Alice (120) 与 David (80)，totalValidAmount 结果为 200

六、总结与语法速查

掌握条件判断与循环语句是构建程序逻辑骨架的第一步。在实际开发中，保持分支判断扁平、及时使用 return、break 或 continue 提前收工，能够有效避免多层嵌套回调，让代码既易于排错，又具备良好的可读性与维护性。