怎么用JS三元表达式简化if-else判断

一、核心认知：语句与表达式的本质差异

想要准确运用三元表达式，首先必须厘清 JavaScript 中语句（Statement）与表达式（Expression）的区别。很多初学者只把三元运算符看作 if-else 的缩写，容易在不恰当的场景滥用。

传统的 if-else 属于流程控制语句，语句本身并不产生任何求值结果。如果需要根据不同条件为同一个变量赋予不同内容，开发者必须先在外部使用 let 声明一个空变量，然后在不同的分支块内部通过副作用为该变量重新赋值：

// 示例：传统 if-else 过程控制
let userRole;
if (isAdmin) {
  userRole = '管理员';
} else {
  userRole = '普通成员';
}

这种写法不仅占用了 6 行代码，还带来两个潜在缺陷：一是必须放开变量的可变性限制（使用 let 而非 const），增加了后续意外修改变量的风险；二是分支逻辑内部可能掺杂无关的局部变量，增加了作用域混淆的可能。

相比之下，三元运算符是 JavaScript 中唯一的三元表达式。表达式的特质是一定会求值并返回一个结果。因此，它可以直接把求值结果无缝交付给常量声明、函数参数或模板字符串：

// 示例：三元表达式直接绑定不可变常量
const userRole = isAdmin ? '管理员' : '普通成员';

二、重构推导：四步完成标准转换

并非所有的分支代码都能盲目套用三元表达式。将一个现有的 if-else 语句块安全重构为三元表达式，通常遵循以下四个标准操作步骤：

1. 识别目标模式：检查两个分支是否属于“单一结果出口”。即 if 分支和 else 分支内部，是否仅分别执行了一次对同一个变量的赋值，或者直接执行了 return 操作。
2. 提取公共受体：把重复出现的变量赋值受体（如 result =）或返回关键字（return）提取到判断逻辑的最左侧，并尽可能将变量类型由 let 改写为更安全的 const。
3. 提炼条件并紧跟问号：取下原 if (...) 中的布尔判断条件，去掉两边的括号（除非条件复杂需要优先级明确），在其右侧添加问号 ?。
4. 映射分支结果：将 if 块内部的真实求值结果紧跟在 ? 后面，加入冒号 :，随后放置 else 块内部的对应结果。

下面以函数内部返回值的重构为例，观察提取前后的变化：

// 重构前：重复的 return 关键字
function getDiscount(isVip) {
  if (isVip) {
    return 0.8;
  } else {
    return 1.0;
  }
}

// 重构后：return 提取至最左侧，清晰表达返回值映射
function getDiscount(isVip) {
  return isVip ? 0.8 : 1.0;
}

// 配合箭头函数可进一步收敛为一行纯函数
const getDiscount = isVip => (isVip ? 0.8 : 1.0);

三、三元表达式的三大高频实用场景

在理解了表达式求值的特性后，三元运算符最能发挥优势的地方，往往是那些只接受表达式、不接受语句的代码位置。

1. 保证状态不可变：直接初始化 const 常量

在现代 JavaScript 编码规范中，优先使用 const 是防御意外状态篡改的重要准则。通过三元表达式，可以在声明常量的瞬间完成条件初始化，无需任何后续重赋值操作：

const responseStatus = isSuccess ? 200 : 500;
const greeting = hour < 12 ? '早上好' : '您好';

2. 模板字符串（Template Literals）与类名内联计算

在 ES6 反引号模板字符串或前端组件（如 React JSX、Vue 模板表达式）中，花括号内只能解析表达式，无法写入 if-else 语句。三元表达式在这里能够自然地内联生成动态字符：

// 示例：动态组装样式类名与文案
const buttonHtml = `<button class="btn ${isActive ? 'btn-primary' : 'btn-default'}">
  ${isSubmitting ? '保存中...' : '提交'}
</button>`;

3. 函数调用中的条件实参传递

当调用某个第三方 API 或工具函数时，某些入参可能根据当前状态微调。直接在传参位置使用三元表达式，免去为了组装参数而临时定义额外变量：

// 示例：根据网络状态传递不同的超时阈值
fetchData(userId, { timeout: isSlowNetwork ? 10000 : 3000 });

四、边界与禁区：什么时候不要使用三元表达式？

代码首先是写给人读的，其次才是给机器执行的。三元表达式的目的是提升简洁度，如果使用不当，极易反向恶化代码的可读性与可维护性。以下三种情况应坚决避免使用三元表达式：

禁区 1：严禁多层嵌套三元表达式（嵌套地狱）

当遇到三路甚至更多条件分支时，部分开发者习惯层层套用 ? ... : ... ? ... : ...。这种代码在缺少括号包裹时极易引发运算符优先级歧义，且视觉层级极差：

// ✕ 反面模式：晦涩难懂的多层嵌套三元
const level = score > 90 ? '优' : score > 80 ? '良' : score > 60 ? '及格' : '不及格';

// ✓ 优化方案：改用清晰的 switch 语句或键值映射对象
function getLevel(score) {
  if (score > 90) return '优';
  if (score > 80) return '良';
  if (score > 60) return '及格';
  return '不及格';
}

禁区 2：分支包含复杂副作用或多条操作

三元表达式的设计初衷是计算并返回一个数据。如果分支需要做的是打印日志、触发分析埋点、操作 DOM 或抛出异常，强行用逗号运算符塞进三元表达式会严重破坏语义：

// ✕ 反面模式：利用三元表达式执行副作用与控制流
isValid ? (trackLog(), submitForm()) : alert('请检查表单');

// ✓ 优化方案：保持诚实，使用语义直观的 if-else 语句块
if (isValid) {
  trackLog();
  submitForm();
} else {
  alert('请检查表单');
}

禁区 3：单分支判断强行补充 null 或 undefined

如果在某个条件不满足时什么都不需要做，强行写三元并在假值处填写 null、undefined 或 false 是冗余的做法。单分支场景应优先使用逻辑与运算符（&&）或单纯的 if 语句：

// ✕ 不推荐：强行补充无意义的假分支
hasAuth ? showPanel() : null;

// ✓ 推荐：直接使用逻辑与短路运算，或者普通 if
hasAuth && showPanel();

五、决策总结与速查指南

在编写条件分支时，只需跟随下图所示的判断路径，即可在 5 秒内确定最适合当前业务场景的语法形式：