JavaScript 的 if...else 语句在指定条件为真时执行一段代码块。当条件为假时则执行 else 块。if-else 语句可以根据不同的条件来控制程序的执行流程。
在编写程序时，可能会遇到需要从一组路径中选择一条的情况，在这种情况下，你需要使用条件语句来允许你的程序做出正确的决定并执行正确的动作。
JavaScript 支持基于不同条件执行不同动作的条件语句。这里我们将解释 if...else 语句。
if-else 流程图
下面的流程图展示了 if-else 语句是如何工作的。
决策制定
JavaScript 支持以下形式的 if...else 语句：
JavaScript if 语句
if 语句是最基本的控制语句，它允许 JavaScript 做出决策并有条件地执行语句。
语法
一个基本的 if 语句的语法如下：
if (expression) {
如果表达式为真时要执行的语句
}
这里，JavaScript 表达式会被评估。如果结果值为真，则执行给定的语句。如果表达式为假，则不会执行任何语句。大多数情况下，你会在做决策时使用比较运算符。
示例
尝试以下示例来理解 if 语句是如何工作的。
<html>
<body>
<div id='output'></div>
<script type="text/javascript">
let result;
let age = 20;
if (age > 18) {
result = "符合驾驶资格";
}
document.getElementById("output").innerHTML = result;
</script>
<p> 设置变量为不同的值然后重试... </p>
</body>
</html>
输出：
符合驾驶资格
设置变量为不同的值然后重试...
JavaScript if...else 语句
if...else 语句是另一种形式的控制语句，它允许 JavaScript 更加有控制地执行语句。
语法
if...else 语句的语法如下：
if (expression) {
如果表达式为真时要执行的语句
} else {
如果表达式为假时要执行的语句
}
这里，JavaScript 表达式会被评估。如果结果值为真，则执行 if 块中的给定语句。如果表达式为假，则执行 else 块中的给定语句。
示例
尝试以下代码来学习如何在 JavaScript 中实现 if-else 语句。
<html>
<body>
<div id='output'></div>
<script type="text/javascript">
let result;
let age = 15;
if (age > 18) {
result = "符合驾驶资格";
} else {
result = "不符合驾驶资格";
}
document.getElementById("output").innerHTML = result;
</script>
<p> 设置变量为不同的值然后重试... </p>
</body>
</html>
输出：
不符合驾驶资格
设置变量为不同的值然后重试...
JavaScript if...else if... 语句
if...else if... 语句（也称为 if...else 梯形结构）是一种更高级的形式的 if...else 结构，它允许 JavaScript 在多个条件下做出正确的决定。
语法
if-else-if 语句的语法如下：
if (expression 1) {
如果表达式 1 为真时要执行的语句
} else if (expression 2) {
如果表达式 2 为真时要执行的语句
} else if (expression 3) {
如果表达式 3 为真时要执行的语句
} else {
如果没有表达式为真时要执行的语句
}
这段代码没有什么特别之处，它只是几个 if 语句的序列，每个 if 都是前一个语句的 else 子句的一部分。根据为真的条件来执行相应的语句；如果没有条件为真，则执行 else 块中的语句。
示例
尝试以下代码来学习如何在 JavaScript 中实现 if-else-if 语句。
<html>
<body>
<div id="demo"></div>
<script type="text/javascript">
const output = document.getElementById("demo");
let book = "maths";
if (book == "history") {
output.innerHTML = "<b>历史书</b>";
} else if (book == "maths") {
output.innerHTML = "<b>数学书</b>";
} else if (book == "economics") {
output.innerHTML = "<b>经济学书</b>";
} else {
output.innerHTML = "<b>未知书籍</b>";
}
</script>
<p> 设置变量为不同的值然后重试... </p>
</body>
</html>
输出：
数学书
设置变量为不同的值然后重试...