条件分支：if...else - JavaScript 教程

讲解

if...else 让程序根据条件走不同的路。基本结构是 if (条件) { ... } else if (条件) { ... } else { ... }，条件依次判断，命中第一个真值条件就执行对应代码块并跳过后续所有分支。条件可以是任何表达式，引擎按真假值规则判定，但为了提高可读性，建议条件尽量写成明确的布尔表达式。

单分支的简单判断可以用三元运算符压成一行：const label = score >= 60 ? '及格' : '不及格'。三元适合「二选一赋值」，不适合塞复杂逻辑——嵌套三元是公认的反模式。另外函数里推荐「提前返回」（early return）风格：先处理异常情况逐个 return，主体逻辑保持在最外层不缩进，比层层嵌套的 if...else 金字塔清晰得多。

多个互斥条件做值映射时（比如状态码到文案的翻译），if...else if 链条会越来越长，这种场景其实更适合后面会学到的对象映射或 switch。选择标准：条件是对同一个值做离散匹配用 switch/映射，是范围判断或复合条件用 if...else。

示例

function gradeLabel(score) {
  if (score >= 90) return '优秀';
  if (score >= 75) return '良好';
  if (score >= 60) return '及格';
  return '不及格';
}
console.log(gradeLabel(95), gradeLabel(80), gradeLabel(61), gradeLabel(30));

// 三元运算符做二选一赋值
const age = 20;
const ticketType = age >= 18 ? '成人票' : '儿童票';
console.log('票种：', ticketType);

// 提前返回代替嵌套
function checkout(user, cart) {
  if (!user) return '请先登录';
  if (cart.length === 0) return '购物车是空的';
  return '下单成功，共 ' + cart.length + ' 件商品';
}
console.log(checkout(null, [1]));
console.log(checkout({ name: '小明' }, []));
console.log(checkout({ name: '小明' }, ['书', '笔']));

常见坑

赋值 = 与比较 === 写混：if (x = 5) 是赋值，条件恒真（除非赋假值），且改写变量。 linter 一般会报警，但根本对策是习惯把常量写左边时代的防御已不必要——直接用 === 并写对。
条件依赖隐式转换：if (count) 会把 0 当 false，想表达「有数据」时若 0 是合法值就会出 bug，显式写 count !== undefined && count !== null 或更精确的条件。
else if 顺序错误：把 score >= 60 放在 score >= 90 前面，90 分永远进不了「优秀」分支。范围条件要从严到宽排列。
忘记大括号：if (x) doA(); doB(); 中 doB() 不受 if 控制，永远执行。单行分支也建议加大括号，避免维护时踩坑。

小结

if...else if...else 按顺序命中分支，三元处理简单二选一，函数内多用提前返回压平嵌套。下一节看处理离散多分支的 switch。