三元运算符（? :）是JavaScript中用于根据条件返回不同值的简洁表达式，语法为condition ? exprIfTrue : exprIfFalse，适用于单值返回场景，不支持多语句、else if或异步操作。
条件运算符（也叫三元运算符 ? :）是 JavaScript 中简洁替代单行 if...else 的常用方式，适用于“根据条件返回不同值”的场景，但不能替代含多语句、副作用或复杂逻辑的分支。
基本语法与核心用法
格式为：condition ? exprIfTrue : exprIfFalse。它先计算 condition，若为真值则执行并返回 exprIfTrue，否则执行并返回 exprIfFalse。
- 只能返回一个值（表达式结果），不能直接执行语句（如
console.log()需包裹在括号中作为表达式） - 优先级低于大多数运算符，嵌套时建议加括号提高可读性
- 不支持
else if，连续判断需嵌套：a ? x : (b ? y : z)
典型适用场景举例
以下情况适合用三元运算符替代简单 if/else：
-
变量赋值：
const status = score >= 60 ? 'pass' : 'fail'; -
JSX 中控制渲染（React）：
{isLoggedIn ? <logoutbutton></logoutbutton> : <loginbutton></loginbutton>} -
字符串拼接中的动态片段：
`Hello ${user?.name ?? 'Guest'}${isPremium ? ' ★' : ''}` -
默认值回退：
const name = inputName || (isGuest ? 'Anonymous' : 'Unknown');（注意：这里用的是逻辑或，但三元也可实现更精确判断）
哪些情况不该硬套三元？
强行使用会降低可读性甚至引发错误：
立即学习“Java免费学习笔记（深入）”；
- 分支中包含多个操作（如修改多个变量、调用多个函数）——应保留
if语句 - 条件判断本身很复杂（如多层嵌套逻辑）——拆成独立变量或函数更清晰
- 需要
else if且选项超过两个——考虑switch或查找表（如对象映射） - 涉及异步操作（如
await）——三元运算符内不能直接await，需提前 await 或改用 async 函数
进阶技巧：结合空值合并与可选链
现代 JS 中常与 ?? 和 ?. 组合，写出更安全简练的条件表达式：
const title = user?.profile?.title ?? 'No title';const displayName = user?.firstName ? `${user.firstName} ${user.lastName}` : user?.username ?? 'Anonymous';- 避免冗长嵌套：
items?.length > 0 ? items[0].name : 'Empty list'比 if 更紧凑
三元运算符不是语法糖，而是表达式工具。用对地方能提升代码密度和可读性；滥用则适得其反。关键是判断：你是否真的只需要“一个值”？
