在 JavaScript 中，选择结构指的是根据 “条件判断” 来决定执行哪一段代码。选择结构有 3 种：单向选择、双向选择以及多向选择。但无论是哪一种，JavaScript 都只会执行其中一个分支。
在 JavaScript 中，选择结构共有 2 种方式：一种是 if 语句；另一种是 switch 语句。本节先来介绍 if 语句。
JavaScript if 语句
在 JavaScript 中，单向选择使用的是 if 语句，其流程如下图所示。
语法：
if (条件) {
……
}说明：
这里的 “条件” 一般是一个比较表达式。如果 “条件” 返回为 true，则会执行 “{}” 内部的程序；如果 “条件” 返回为 false，则会直接跳过 “{}” 内部的程序，然后按照顺序来执行后面的程序。
由 “{}” 括起来的程序，我们又称为 “语句块”。语句块常用于选择结构、循环结构以及函数中。其中，JavaScript 是把一个语句块看成是一个整体来执行。
示例 1：使用 if 语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const score = 100;
if (score > 60) {
console.log("那你很棒棒噢！");
}
</script>
</body>
</html>运行结果如下。
那你很棒棒噢！分析：
由于变量 score 的值为 100，此时 score > 60 返回 true，因此最终会执行 “{}” 的程序。对于这个例子来说，下面 2 种写法都是可行的：
// 写法1
if (score > 60) {
console.log("那你很棒棒噢！");
}
// 写法2
if (score > 60) console.log("那你很棒棒噢！");不过在实际开发中，为了代码的可读性和可维护性，我们强烈推荐使用写法1（也就是始终保留大括号）。
JavaScript if...else 语句
在 JavaScript 中，双向选择使用的是 if...else 语句，其流程如下图所示。
语法：
if (条件) {
……
} else {
……
}说明：
if...else 相对 if 来说，仅仅是多了一个选择。当条件返回为 true 时，会执行 if 后面 “{}” 中的程序；当条件返回为 false 时，会执行 else 后面 “{}” 中的程序。
示例 2：使用 if-else 语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const score = 100;
if (score < 60) {
console.log("补考！");
} else {
console.log("通过！");
}
</script>
</body>
</html>运行结果如下。
通过！分析：
由于变量 score 的值为 100，而 score < 60 返回 false，因此会执行 else 后面大括号 “{}” 中的程序。对于双向选择，我们可以使用 JavaScript 条件运算符来代替的，请看下面例子。
示例 3：使用 “条件运算符” 代替 “双向选择”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const score = 100;
const result = (score < 60) ? "补考！" : "通过！";
console.log(result);
</script>
</body>
</html>运行结果如下。
通过！JavaScript if...else if...else 语句
在 JavaScript 中，多向选择使用的是 if...else if...else 语句。所谓的多向选择，指的是在双向选择的基础上增加 n 个选择分支。
语法：
if (条件1) {
// 当条件1为true时执行的代码
} else if (条件2) {
// 当条件2为true时执行的代码
} else {
// 当条件1和条件2都为false时执行的代码
}说明：
多向选择语法看似很复杂，其实也是非常简单的，它只是在双向选择基础上再增加一个或多个选择分支罢了。小伙伴们对比一下这两个的语法格式就知道了。
示例 4：使用多向选择语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const time = 21;
if (time < 12) {
console.log("早上好！");
} else if (time >=12 && time < 18) {
console.log("下午好！");
} else {
console.log("晚上好！");
}
</script>
</body>
</html>运行结果如下。
晚上好！分析：
对于 JavaScript 多向选择，我们会从第 1 个 if 开始判断，如果第 1 个 if 条件不满足，则判断第 2 个 if 条件……直到满足为止。一旦满足就会执行对应的分支，然后退出整个 if 结构。
JavaScript if 语句的嵌套
在 JavaScript 中，if 语句是可以嵌套使用的。
语法：
if (条件1) {
if (条件2) {
// 当“条件1”和“条件2”都为true时执行的代码
} else {
// 当“条件1”为true、“条件2”为false时执行的代码
}
} else {
if (条件2) {
// 当“条件1”为false、“条件2”为true时执行的代码
} else {
// 当“条件1”和“条件2”都为false时执行的代码
}
}说明：
对于这种结构，小伙伴们不需要去傻乎乎地去记，只需要从外到内根据条件一个个去判断就可以了。
示例 5：使用 if 语句的嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const gender = "女";
const height = 172;
if (gender === "男") {
if (height > 170) {
console.log("高个子男生");
} else {
console.log("矮个子男生");
}
} else {
if (height > 170) {
console.log("高个子女生");
} else {
console.log("矮个子女生");
}
}
</script>
</body>
</html>运行结果如下。
高个子女生分析：
在这个例子中，首先外层 if 语句的判断条件 gender=="男" 返回 false，因此会执行 else 语句。然后我们可以看到 else 语句内部还有一个 if 语句，这个内层 if 语句的判断条件 height>170 返回 true，所以最终输出内容为 “高个子女生”。
实际上，if 语句的嵌套也是很好理解的，说白了就是在 if 或 else 大括号内部再增加一层判断。对于 if 语句的嵌套，我们一层一层由外到内地判断就可以了。这个过程就像剥洋葱一样（如下图所示），非常简单。下面再来一个例子，让小伙伴消化一下。
示例 6：if 语句嵌套的应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const x = 4;
const y = 8;
if (x < 5) {
if (y < 5) {
console.log("x 小于 5，y 小于 5");
} else {
console.log("x 小于 5，y 大于 5");
}
} else {
if (y < 5) {
console.log("x 大于 5，y 小于 5");
} else {
console.log("x 大于 5，y 大于 5");
}
}
</script>
</body>
</html>运行结果如下。
x 小于 5，y 大于 5