三元运算符是JavaScript中简化单行if...else的表达式，适用于有明确返回值、逻辑简单、仅两种分支的场景；它可赋值、返回、拼接，但不可执行副作用、嵌套过深或处理异步。
三元运算符（? :）是 JavaScript 中简化单行 if...else 的最常用方式，适用于**有明确返回值、逻辑简单、分支只有两种结果**的场景。
基本语法：condition ? exprIfTrue : exprIfFalse
它等价于：
if (condition) { return exprIfTrue;} else { return exprIfFalse;}
注意：三元运算符本身是一个**表达式**，能直接参与赋值、返回、拼接等操作，而 if...else 是语句，不能直接赋值。
常见简化用法
-
给变量赋值：
const status = score >= 60 ? 'pass' : 'fail';
替代：let status;if (score >= 60) status = 'pass'; else status = 'fail'; -
在模板字符串或 JSX 中动态插入内容：
`Hello ${isLoggedIn ? name : 'Guest'}`<button disabled true : false>Submit</button>（还可进一步简写为disabled={isLoading}） -
返回函数结果：
function getGrade(score) { return score >= 90 ? 'A' : score >= 80 ? 'B' : 'C'; }
（支持嵌套，但建议不超过一层，否则可读性下降）
使用时要注意什么？
-
别用来执行副作用操作（如调用函数、修改状态），虽然语法允许，但违背表达式本意，也降低可读性：
❌isLoggedIn ? doLogin() : doLogout();→ 应该用if...else
✅const action = isLoggedIn ? 'logout' : 'login'; -
条件必须是布尔值或能转为布尔的表达式，但要小心假值（
0、''、null等）被误判；必要时显式比较：value != null ? value : 'default'比value ? value : 'default'更安全 -
嵌套三元要谨慎，超过一层建议拆成
if...else if...else或用查找表（如对象映射）
什么时候不该用三元？
- 分支中包含多个语句（比如要执行两个函数、更新多个变量）
- 逻辑复杂，需要注释说明每一步意图
- 条件判断涉及异步操作（如
await）——三元运算符内部不能直接await，需提前 await 或改用 async 函数 + if
