三元运算符适用于单行、无副作用、纯返回值的简单条件逻辑，用于赋值、返回值或React渲染控制，但需保持条件清晰、分支简短、避免嵌套与副作用。
三元运算符（condition ? exprIfTrue : exprIfFalse）适合替代单行、无副作用、纯返回值的简单 if-else 逻辑，能让核心业务代码更紧凑可读——但前提是条件清晰、分支简短、不嵌套过深。
适用场景：赋值与返回值判断
当你要根据条件给变量赋值，或从函数中直接返回不同结果时，三元运算符最自然：
- 代替
if (x > 0) y = "positive"; else y = "non-positive";→y = x > 0 ? "positive" : "non-positive"; - 代替
if (user.role === "admin") return true; else return false;→return user.role === "admin";（更优）或return user.role === "admin" ? true : false;（冗余，应简化） - React 中控制渲染：
{isLoading ? <spinner></spinner> : <content></content>}
关键原则：保持可读性优先
三元不是越短越好，而是“一眼能懂”。以下情况请果断退回 if 语句：
- 分支中含函数调用且有副作用（如
logError()、sendMetric()），三元会模糊执行意图 - 条件本身复杂（如多层逻辑运算），或分支表达式过长（超过一屏宽度）
- 需要处理三个及以上分支——不要链式三元（
a ? x : b ? y : z），它易出错且难调试；改用switch或提前 return
安全写法：避免常见陷阱
精简不等于冒险，注意这些细节：
- 括号不是装饰：对复杂条件或混合运算加括号，比如
(a && b) ? x : y比a && b ? x : y更明确 - 类型一致：两个分支最好返回同类型，否则可能引发隐式转换问题（如
count > 0 ? count : "no data"在强类型上下文中易埋坑） - 空值防护：在访问嵌套属性前做守卫，例如
user?.profile?.name ?? "Anonymous"比user && user.profile && user.profile.name ? user.profile.name : "Anonymous"更简洁安全
进阶技巧：组合与解构中自然嵌入
三元可在对象字面量、数组构造、解构默认值中无缝使用：
- 条件字段：
const config = { timeout: isProd ? 5000 : 3000, retry: enableRetry ? 3 : 0 }; - 条件数组项：
const items = [itemA, itemB, ...(showExtra ? [itemC] : [])]; - 解构默认值：
const { theme = isDarkMode ? "dark" : "light" } = props;
三元是表达式，不是控制流语句。用对地方，它让逻辑浮出水面；滥用则掩盖意图。真正精简代码的核心，是把“做什么”写清楚，而不是把“怎么写”压到最短。
