故事从一个“选择困难症”开始

有一天，我在公司楼下买咖啡。我对咖啡师说：“今天加班，加个奶吧。”

咖啡师问了我一句改变世界的问题：“要全脂，还是脱脂？”

那一瞬间，我脑子里飞快运转：

• 如果今天已经胖了 → 脱脂

• 如果今天心情不好 → 全脂

• 如果明天还要加班 → 再来一杯

你看，这不就是一个条件判断吗？现实世界里，我们每天都在做选择：

• 如果下雨 → 带伞

• 如果饿了 → 点外卖

• 如果老板在 → 假装很忙

而在 JavaScript 的世界里，这些“如果……否则……”的逻辑，通常由两种东西来完成：

• if...else

• 条件操作符（Conditional Operator）

今天的主角，就是后者。

条件操作符是什么？一句话版本

先给一个最“教科书”的定义：

条件操作符是 JavaScript 中唯一一个需要三个操作数的操作符，因此也叫三元操作符。

它的语法长这样：

condition ? valueIfTrue : valueIfFalse

翻译成大白话就是：

如果 condition 成立，就返回 valueIfTrue，否则返回 valueIfFalse

是不是像极了我们刚才买咖啡的场景？

isFat ? "脱脂奶" : "全脂奶"

用“红绿灯”理解条件操作符

我一直觉得，条件操作符最像什么？红绿灯。

• 条件：现在是红灯还是绿灯？

• 结果一：绿灯 → 走

• 结果二：红灯 → 停

light === "green" ? "走" : "停"

这里面有三个角色：

为什么要有条件操作符？if...else 不香吗？

很多刚学 JavaScript 的同学都会问我：

“小米啊，有 if...else 了，为什么还要三元运算符？”

我一般会反问一句：

“你觉得红绿灯写成一本说明书，合适吗？”

1、if...else：适合“长篇大论”

清晰、好读、适合复杂逻辑。

2、条件操作符：适合“一眼定生死”

let result = score >= 60 ? "及格" : "不及格";

短、直接、像口头判断。条件操作符不是用来“替代 if”，而是用来表达简单选择结果。

条件操作符的真实价值：它是“表达式”

这是很多人第一次真正理解条件操作符时的“顿悟时刻”。

if 是语句，条件操作符是表达式

什么意思？

1、if 不能直接赋值

2、条件操作符可以

let a = x > 0 ? 1 : -1;

因为它本身就会返回一个值。

条件操作符 ≈ 会思考的“自动售货机”

想象一个自动售货机：

• 投币成功 → 出可乐

• 投币失败 → 退钱

let drink = hasCoin ? "可乐" : "退钱";

你不会关心内部怎么判断，只关心最终拿到什么。这正是条件操作符最擅长的事：根据条件，直接给你一个结果。

条件操作符里的“坑”，面试官最爱问

故事讲到这里，我们得稍微严肃一点了。因为在面试中，条件操作符是一个高频翻车点。

1、条件不是布尔值，也能用？

可以。JavaScript 会进行隐式类型转换。

let result = value ? "真" : "假";

规则和 if 一模一样：

所以这段代码：

let name = userName ? userName : "游客";

本质是在说：如果 userName 是“真值”，就用它，否则用“游客”。

2、条件操作符可以嵌套吗？

可以，但慎用。

这是合法的吗？是的。

好读吗？一般。

我常跟新人说一句话：嵌套三元，写的时候爽，看的人想报警。

什么时候该用？什么时候不该用？

这是一个成熟工程师必须回答的问题。

1、适合用条件操作符的场景

• 简单二选一

• 结果是一个值

• 不涉及复杂副作用

const statusText = isLogin ? "已登录" : "未登录";

const price = isVip ? 80 : 100;

2、不适合的场景

• 多分支逻辑

• 包含复杂计算

• 包含大量函数调用

isReady ? doA() : doB();

这种时候，if...else 更清晰。

条件操作符 vs 逻辑操作符（顺便提一嘴）

有些人会把三元写成这样：

let result = a && b || c;

看起来好像也能“二选一”。但这不是条件操作符，而是逻辑运算的副作用。问题在于：

• 可读性差

• 容易踩坑

• 面试官会追问你为什么这么写

三元是为“选择结果”而生的，逻辑运算符不是。

一个真实的业务小故事

最后，我用一个真实业务场景收尾。有一次我在写一个订单页面：

• 如果用户已登录 → 显示真实价格

• 如果未登录 → 显示“登录后可见”

最开始代码是这样的：

后来我改成了：

let priceText = isLogin ? price + " 元" : "登录后可见";

同事一看，说了一句让我印象很深的话：“这行代码，一眼就知道你在干嘛。”

那一刻我意识到：条件操作符不是为了炫技，而是为了表达清晰。

总结

条件操作符就像生活里的“快速决策”：

• 不纠结

• 不绕弯

• 当场给结果

它不适合复杂人生选择，但非常适合：“要不要”、“行不行”、“是不是”这种一秒钟能决定的事。

如果你记住一句话就够了，那就是：条件操作符是 JavaScript 中最像人类直觉的操作符。

END

好了，今天的故事就讲到这里。如果你下次在代码里看到一个 ? :，希望你能想起那个站在咖啡店门口、纠结要不要加奶的我。

​

阅读原文：https://mp.weixin.qq.com/s/taiQJQZFfvyVz70Ex4Kfhw