JavaScript - 条件运算符

你好，未来的JavaScript魔法师们！今天，我们将深入探索条件运算符的神奇世界。如果你之前从未编写过一行代码，也不要担心——我将是你在这次激动人心旅程中的友好向导。所以，拿起你的虚拟魔杖（键盘），让我们施展一些条件魔法！

什么是条件运算符？

想象你是一个交通信号灯。你的工作是决定车辆是否应该前行或停止。这正是JavaScript中的条件运算符所做的——它们帮助我们的程序基于特定条件做出决策。

三元运算符：条件语句的瑞士军刀

我们今天的主角是三元运算符。它就像一个紧凑、超级高效的反转的if-else语句。让我们分解一下：

条件 ? 表达式为真时的值 : 表达式为假时的值

就好像我们在问一个问题：

• 如果答案是是的（为真），做第一件事。
• 如果答案是 不是的（为假），做第二件事。

语法：条件魔法的配方

让我们看看我们条件药水的成分：

1. condition：这是我们的问题。下雨了吗？用户登录了吗？这个数是偶数吗？
2. ?：这就像说“然后...”
3. expressionIfTrue：如果条件为真时要做什么
4. :：这就像说“否则...”
5. expressionIfFalse：如果条件为假时要做什么

示例 1：天气决策器

让我们从一个简单的示例开始。我们将创建一个程序，基于天气决定是否带伞。

let isRaining = true;
let decision = isRaining ? "带上雨伞" : "把雨伞留在家里";
console.log(decision);

如果你运行这段代码，它将输出：“带上雨伞”

让我们分解一下：

• isRaining是我们的条件。它被设置为true。
• 如果下雨（isRaining为真），我们的表达式返回“带上雨伞”。
• 如果不下雨，它会返回“把雨伞留在家里”。
• 我们将这个结果存储在decision变量中。

尝试将isRaining改为false，看看会发生什么！

示例 2：年龄检查器

现在，让我们创建一个程序来检查某人是否到了投票年龄。

let age = 20;
let canVote = age >= 18 ? "是的，你可以投票！" : "抱歉，你太小了，不能投票。";
console.log(canVote);

这将输出：“是的，你可以投票！”

这是怎么回事：

• 我们将age设置为20。
• 我们的条是age >= 18（年龄是否大于或等于18？）。
• 如果为真，我们返回“是的，你可以投票！”。
• 如果为假，我们返回“抱歉，你太小了，不能投票。”

尝试将年龄改为16，看看输出如何变化！

示例 3：成绩分配器

让我们来点更复杂的。我们将创建一个程序，根据分数分配成绩。

let score = 85;
let grade = score >= 90 ? 'A' :
score >= 80 ? 'B' :
score >= 70 ? 'C' :
score >= 60 ? 'D' : 'F';
console.log(`你的成绩是: ${grade}`);

这将输出：“你的成绩是: B”

哇，这个看起来不一样！我们实际上是将多个三元运算符串联起来了。就像一系列决策的水流：

• 首先检查分数是否90或以上。如果是，那么它是'A'。
• 如果不是，我们检查是否80或以上。如果是，那么它是'B'。
• 这会一直持续到低于60分的'F'。

这是一个强大的技术，但请明智地使用——太多的链可能会使代码难以阅读！

处理null值：空值合并运算符

有时，我们需要处理可能是null或undefined的值。这时，空值合并运算符??就派上用场了：

let username = null;
let displayName = username ?? "访客";
console.log(`欢迎，${displayName}！`);

这将输出：“欢迎，访客！”

这是怎么回事：

• 如果username是null或undefined，我们使用“访客”。
• 如果username有值，我们就使用那个值。

这是提供默认值的一个便捷方式！

条件运算符速查表

以下是我们在本文中学到的运算符的快速参考表：

运算符	名称	用途
?:	三元运算符	基于条件在两个值之间做出选择
??	空值合并运算符	在处理null或undefined时提供默认值

记住，熟能生巧！尝试创建你自己的示例，并使用这些运算符进行实验。在你意识到之前，你将能够指挥一整支代码中的条件运算符乐队！

快乐编码，愿你的条件运算符总是如你所愿地返回真！

Credits: Image by storyset