语句（也称为流控制语句）通常使用一或多个关键字完成既定的任务。语句可以简单，也可以复杂。简单的如告诉函数退出，复杂的如列出一堆要重复执行的指令。
这一节，我们主要讨论分支语句。
有时候，我们需要根据不同的条件执行不同的操作。为此，我们可以使用 if 语句和条件运算符 ?，它也被称为“问号”运算符。
if 语句
if(...) 语句会在括号中计算一个条件，如果结果为 true，就执行一段代码块。
例如：
|
1 2 3 |
let year = prompt('In which year was ECMAScript-2015 specification published?', ''); if (year == 2015) alert( 'You are right!' ); |
在上面的例子中，条件是一个简单的相等检查（year == 2015），但它也可以复杂得多。
如果我们想执行多条语句，就必须用花括号 {} 将代码块包裹起来：
|
1 2 3 4 |
if (year == 2015) { alert( "That's correct!" ); alert( "You're so smart!" ); } |
我们建议每次使用 if 语句时都使用花括号 {} 包裹代码块，即使只有一条语句也不要省略。这样做可以提升代码的可读性。
布尔转换
if (…) 语句会计算括号中的表达式，并将结果转换为布尔值。
让我们回顾一下“类型转换”章节中的规则：
-
数字 0、空字符串
""、null、undefined和NaN都会被转换为false，因此它们被称为“假值”（falsy）。 -
其他值会被转换为
true，因此被称为“真值”（truthy）。
所以，在这种条件下，下面的代码将永远不会执行：
|
1 2 3 |
if (0) { // 0 is falsy ... } |
……而在这种条件下，代码总是会执行：
|
1 2 3 |
if (1) { // 1 is truthy ... } |
我们也可以将一个预先计算好的布尔值传递给 if，比如这样：
|
1 2 3 4 5 |
let cond = (year == 2015); // equality evaluates to true or false if (cond) { ... } |
else 子句
if 语句可以包含一个可选的 else 块。当条件为假值（falsy）时，else 中的代码就会执行。
例如：
|
1 2 3 4 5 6 7 |
let year = prompt('In which year was the ECMAScript-2015 specification published?', ''); if (year == 2015) { alert( 'You guessed it right!' ); } else { alert( 'How can you be so wrong?' ); // any value except 2015 } |
多重条件子句：else if
有时候，我们想要测试多种条件的情况。可以使用 else if 子句来实现。
例如：
|
1 2 3 4 5 6 7 8 9 |
let year = prompt('In which year was the ECMAScript-2015 specification published?', ''); if (year < 2015) { alert( 'Too early...' ); } else if (year > 2015) { alert( 'Too late' ); } else { alert( 'Exactly!' ); } |
在上面的代码中，JavaScript 首先检查 year < 2015。如果结果为假，就继续检查下一个条件 year > 2015。如果这个条件也为假，就执行最后的 alert。
可以有多个 else if 块。最后的 else 是可选的。
if else if … 语句—多分支
● 可以通过 if 和 else if 来设置多个条件进行判断
● 语法：
○ if (条件1) { 条件1为 true 时候执行 } else if (条件2) { 条件2为 true 时候执行 }
● 会从头开始依次判断条件
● 如果第一个条件为 true 了，那么就会执行后面的 {} 里面的内容
● 如果第一个条件为 false，那么就会判断第二个条件，依次类推
● 多个 {} ，最多会有一个被执行，一旦有一个条件为 true 了，后面的就不在判断了
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
// 第一个条件为 true，第二个条件为 false，最终会打印 “我是代码段1” if (true) { alert('我是代码段1') } else if (false) { alert('我是代码段2') } // 第一个条件为 true，第二个条件为 true，最终会打印 “我是代码段1” // 因为只要前面有一个条件满足了，就不会继续判断了 if (true) { alert('我是代码段1') } else if (true) { alert('我是代码段2') } // 第一个条件为 false，第二个条件为 true，最终会打印 “我是代码段2” // 只有前一个条件为 false 的时候才会继续向后判断 if (false) { alert('我是代码段1') } else if (true) { alert('我是代码段2') } // 第一个条件为 false，第二个条件为 false，最终什么也不会发生 // 因为当所有条件都为 false 的时候，两个 {} 里面的代码都不会执行 if (false) { alert('我是代码段1') } else if (false) { alert('我是代码段2') } |
if else if … else 语句—多分支
● 和之前的 if else if … 基本一致，只不过是在所有条件都不满足的时候，执行最后 else 后面的 {}
|
1 2 3 4 5 6 7 8 9 10 |
// 第一个条件为 false，第二个条件为 false，最终会打印 “我是代码段3” // 只有前面所有的条件都不满足的时候会执行 else 后面的 {} 里面的代码 // 只要前面有一个条件满足了，那么后面的就都不会执行了 if (false) { alert('我是代码段1') } else if (false) { alert('我是代码段2') } else { alert('我是代码段3') } |
条件运算符 ?
有时候，我们需要根据条件来给一个变量赋值。
例如：
|
1 2 3 4 5 6 7 8 9 10 |
let accessAllowed; let age = prompt('How old are you?', ''); if (age > 18) { accessAllowed = true; } else { accessAllowed = false; } alert(accessAllowed); |
所谓的“条件”或“问号”运算符可以让我们以更简洁的方式完成这个操作。
该运算符由一个问号 ? 表示。有时它被称为“三元运算符”，因为这个运算符有三个操作数。实际上，它是 JavaScript 中唯一一个拥有三个操作数的运算符。
其语法是：
|
1 |
let result = condition ? value1 : value2; |
条件被评估：如果它是“真值”（truthy），则返回 value1，否则返回 value2。
例如：
|
1 |
let accessAllowed = (age > 18) ? true : false; |
从技术上讲，我们可以省略 age > 18 周围的括号。问号运算符的优先级较低，所以它会在比较运算符 > 之后执行。
这个例子与之前的效果相同：
|
1 2 3 |
// the comparison operator "age > 18" executes first anyway // (no need to wrap it into parentheses) let accessAllowed = age > 18 ? true : false; |
但是括号使代码更易读，因此我们建议使用括号。
请注意：
在上面的例子中，您可以避免使用问号运算符，因为比较本身就会返回 true 或 false：
|
1 2 |
// the same let accessAllowed = age > 18; |
多个问号运算符 ?
一系列问号运算符 ? 可以根据多个条件返回一个值。
例如：
|
1 2 3 4 5 6 7 8 |
let age = prompt('age?', 18); let message = (age < 3) ? 'Hi, baby!' : (age < 18) ? 'Hello!' : (age < 100) ? 'Greetings!' : 'What an unusual age!'; alert( message ); |
一开始可能很难理解发生了什么。但是仔细观察后，我们可以看到它只是一个普通的条件测试序列：
-
第一个问号检查
age < 3。 -
如果为真，它返回
'Hi, baby!'。否则，它继续到冒号:后面的表达式，检查age < 18。 -
如果为真，它返回
'Hello!'。否则，它继续到下一个冒号:后面的表达式，检查age < 100。 -
如果为真，它返回
'Greetings!'。否则，它继续到最后一个冒号:后面的表达式，返回'What an unusual age!'。
以下是使用 if..else 的写法：
|
1 2 3 4 5 6 7 8 9 |
if (age < 3) { message = 'Hi, baby!'; } else if (age < 18) { message = 'Hello!'; } else if (age < 100) { message = 'Greetings!'; } else { message = 'What an unusual age!'; } |
问号的非传统用法
有时，问号 ? 被用来代替 if：
|
1 2 3 4 |
let company = prompt('Which company created JavaScript?', ''); (company == 'Netscape') ? alert('Right!') : alert('Wrong.'); |
根据条件 company == 'Netscape'，问号运算符 ? 后的第一个或第二个表达式会被执行，并显示一个 alert。
在这里，我们并没有将结果赋值给变量。相反，我们根据条件执行不同的代码。
不推荐以这种方式使用问号运算符
这种表示法比等效的 if 语句更简洁，可能吸引一些程序员，但它的可读性较差。
下面是使用 if 语句进行比较的相同代码：
|
1 2 3 4 5 6 7 |
let company = prompt('Which company created JavaScript?', ''); if (company == 'Netscape') { alert('Right!'); } else { alert('Wrong.'); } |
我们的眼睛通常是垂直扫描代码的。跨越多行的代码块比一长串水平的指令更容易理解。
问号运算符 ? 的目的是根据条件返回一个值或另一个值。请仅仅用它来做这件事。当你需要执行不同分支的代码时，请使用 if。
总结
● if 或 else if 的条件存在数据隐式类型的转换
● else 只能跟在 if 或 else if，之后，从语法角度看 else 可以省略
● 支持嵌套