JavaScript - 如果...否则：初学者指南

你好，有抱负的程序员们！今天，我们将深入了解编程中最基本的概念之一：if...else 语句。把它想象成你代码中的决策者，就像交通信号灯在路口引导车辆一样。让我们开始吧！

if-else 的流程图

在我们跳入代码之前，让我们先可视化一下 if...else 语句是如何工作的。想象你站在岔路口：

[条件]
/    \
/      \
/        \
[真]      [假]
|            |
[操作 1]   [操作 2]

这个简单的图表展示了 if...else 的本质：如果条件为真，做一件事；否则，做另一件事。

JavaScript if 语句

让我们从基本的 'if' 语句开始。这就像说，“如果下雨，带把雨伞。”

let isRaining = true;

if (isRaining) {
console.log("别忘了你的雨伞！");
}

在这个例子中，如果 isRaining 为真，将打印出消息。如果它是假的，什么也不会发生。简单吧？

让我们再试一个例子：

let temperature = 25;

if (temperature > 30) {
console.log("外面很热！");
}

在这里，只有当温度高于 30 度时，消息才会出现。在这种情况下，它不会打印任何东西，因为 25 不大于 30。

JavaScript if...else 语句

现在，如果条件是假的，我们想做什么呢？这时 'else' 就派上用场了。这就像说，“如果下雨，带把雨伞；否则，戴太阳镜。”

let isRaining = false;

if (isRaining) {
console.log("别忘了你的雨伞！");
} else {
console.log("享受阳光明媚的一天！");
}

在这种情况下，由于 isRaining 是假的，将打印出第二条消息。

这里还有一个例子：

let age = 15;

if (age >= 18) {
console.log("你可以投票！");
} else {
console.log("抱歉，你太小了，不能投票。");
}

由于 15 小于 18，将显示“抱歉，你太小了，不能投票”的消息。

JavaScript if...else if... 语句

有时候，生活不仅仅是非黑即白。我们需要更多的选项！这时 'else if' 就很方便了。它就像一个多项选择题。

let grade = 75;

if (grade >= 90) {
console.log("A - 优秀！");
} else if (grade >= 80) {
console.log("B - 做得不错！");
} else if (grade >= 70) {
console.log("C - 还可以！");
} else if (grade >= 60) {
console.log("D - 你需要多学习。");
} else {
console.log("F - 哦不！你失败了。");
}

在这个例子中，成绩是 75，所以输出将是 "C - 还可以！"。代码按顺序检查每个条件，找到第一个为真的条件后停止。

让我们再试一个：

let time = 14;

if (time < 12) {
console.log("早上好！");
} else if (time < 18) {
console.log("下午好！");
} else {
console.log("晚上好！");
}

由于时间是 14（下午 2 点），输出将是 "下午好！"。

嵌套的 if...else 语句

有时候，你可能需要在条件内部检查其他条件。这时嵌套的 if...else 语句就派上用场了。

let isWeekend = true;
let isRaining = false;

if (isWeekend) {
if (isRaining) {
console.log("这是个有雨的周末。最适合读书了！");
} else {
console.log("这是个阳光明媚的周末。我们去野餐吧！");
}
} else {
console.log("这是个工作日。是时候工作了！");
}

在这个例子中，我们首先检查是否是周末。如果是，我们再检查是否下雨来决定建议的活动。

如果...否则 方法的比较表

这里有一个方便的表格，总结了我们已经讨论过的不同的 if...else 方法：

方法	语法	用例
if	if (condition) { ... }	当你只想在条件为真时执行代码
if...else	if (condition) { ... } else { ... }	当你想要在条件为真时执行一个结果，在条件为假时执行另一个结果
if...else if...else	if (condition1) { ... } else if (condition2) { ... } else { ... }	当你有多个条件需要检查
嵌套的 if...else	if (condition1) { if (condition2) { ... } else { ... } } else { ... }	当你需要在一个条件内部检查其他条件

记住，编程就是练习。不要害怕尝试这些概念。尝试更改示例中的值，看看输出如何变化。这是学习的最佳方式！

在我多年的教学经验中，我发现那些玩代码并犯错误的学生学得最快。所以，继续前进，打破它们，修复它们，并在过程中享受乐趣！

祝编程愉快，未来的程序员们！

Credits: Image by storyset