条件语句

If...else 语句

If...else 语句使你能够根据是否满足一定的条件而执行特定的代码。

if (/* this expression is true */) {
  // run this code
} else {
  // run this code
}

这非常有用，因为你可以根据表达式的结果选择要执行的代码。例如：

var a = 1;
var b = 2;

if (a > b) {
  console.log("a is greater than b");
} else {
  console.log("a is less than or equal to b");
}

输出："a is less than or equal to b"

关于 if...else 语句的几个注意事项。

if 语句中的值始终转换为 true 或 false。根据该值，if 语句中的代码会运行，或 else 语句中的代码会运行。if 和 else 语句中的代码位于花括号 {...} 里，以便区分条件，并表明要运行哪段代码。

提示：编程时，有时候你可能只想使用 if 语句。但是，如果你尝试只使用 else 语句，就会出现错误 SyntaxError: Unexpected token else。出现此错误是因为 else 语句需要 if 语句才能运行。没有 if 语句的话，则不能使用 else语句。

Else If 语句

在某些情况下，两个条件语句并不够。思考下以下情况。

你要决定明天穿什么。如果下雪的话，就穿个大衣。如果不下雪，下雨的话，就穿夹克。如果不下雪或不下雨的话，就穿现在穿的衣服。

帮助决定明天穿什么的流程图。

Else if 语句

在 JavaScript 中，你可以再用一个 if 语句来表示第二个检查条件，叫做 else if 语句。

输出：Wear what you have on.

通过额外添加一个 else if 语句，就增加了一个条件语句。

如果不下雪，代码就会跳到 else if 语句，看看是否下雨。 如果不下雨，代码就会跳到 else 语句。

本质上 else 语句充当的是默认条件，以防所有其他 if 语句都为 false。

逻辑运算符

以下是表示 Julia 周末计划的逻辑表达式：

var colt = "not busy";
var weather = "nice";

if (colt === "not busy" && weather === "nice") {
  console.log("go to the park");
}

输出："go to the park"

注意上述代码中的 &&。

&& 符号是逻辑 AND 运算符，用于将两个逻辑表达式结合为一个更大的逻辑表达式。如果两个更小的表达式为 true，那么整个表达式结果为 true。如果其中一个更小的表达式为 false，那么整个逻辑表达式为false。

还可以理解为，将 && 运算符放在两个语句之间时，代码读成“如果 Colt 不忙，AND 天气不错，那么就去公园”。

逻辑表达式

逻辑表达式类似于数学表达式，但是逻辑表达式的结果是 true 或 false。

11 != 12

返回：true

当你写比较代码时，已经见过逻辑表达式了。比较是简单的逻辑表达式。

就像数学表达式使用 +、-、*、/ 和 % 一样，你也可以使用逻辑运算符创建更复杂的逻辑表达式。

逻辑运算符

逻辑运算符可以与布尔值（true 和 false）结合使用，创建复杂的逻辑表达式。

将两个布尔值与逻辑运算符相结合，可以创建返回另一个布尔值的逻辑表达式。下面的表格描述了不同的逻辑运算符：

运算符	含义	示例	使用方法
&&	逻辑 AND	value1 && value2	如果 value1 和 value2 都为 true，则返回 true
||	逻辑 OR	value1 || value2	如果 value1 或 value2（甚至二者！）为 true，则返回true
!	逻辑 NOT	!value1	返回 value1 的相反值。如果 value1 为 true，则!value1 为 false。

通过使用逻辑运算符，你可以创建更复杂的条件语句，例如 Julia 的周末计划示例。

逻辑 AND 和 OR

在继续学习这节课之前，请阅读以下关于逻辑 AND ( && ) 和逻辑 OR ( || ) 的真假值表格。

&& (AND)

A	B	A && B
true	true	true
true	false	false
false	true	false
false	false	false

|| (OR)

A	B	A || B
true	true	true
true	false	true
false	true	true
false	false	false

真假值表格用于表示所有可能的逻辑表达式输入值的结果。A 表示表达式左侧的布尔值，B 表示表达式右侧的布尔值。

真假值有助于直观地判断逻辑表达式的不同结果。但是，对于逻辑 AND 和 OR，有没有在真假值表格里发现任何特别之处？

最少运算

在某些情况下，逻辑 AND 和 OR 中 B 的值不重要。

在两个表格中，对于某些情况，无论 B 的值为多少，A 的值都足以满足条件了。

例如，对于 A AND B，如果 A 是 false，那么无论 B 的值是多少，整个表达式始终为 false，因为 A 和 B都必须为 true，整个表达式才能为 true。

这种行为就叫做最少运算，表示逻辑表达式的后续参数不用考虑，因为前面的参数已经满足条件了。

练习：查看余额 (3-5

说明：

根据以下流程图，写出在 ATM 中查看余额的代码。黄色钻石表示条件语句，蓝色圆角长方形表示输出到控制台的内容。

用于在 ATM 查看余额的流程图（点击图片即可放大流程图）。

在答案中使用以下变量：

• balance - 账户余额
• isActive - 账户是否为有效状态
• checkBalance - 是否想要查看余额

提示： 变量 balance 可以小于、大于或等于 0。变量 isActive 和 checkBalance 是布尔值，可以设为 true 或 false。

提示：要输出账户余额（带小数点，例如 325.00），使用 .toFixed() 方法并传入要使用的小数点位数，例如 balance.toFixed(2) 返回 325.00。

---

提示：确保使用不同的值测试你的代码。例如，

如果 checkBalance 等于 true 并且 isActive 等于 false，那么应该向控制台中输出 Your account is no longer active.。

你的代码：

练习：冰激凌 (3-6)

说明：

冰激凌是地球上最丰富多样的甜品，因为制作方法多种多样。请使用逻辑运算符写一系列复杂的逻辑表达式，仅在以下条件为 true 时输出内容：

• 如果 flavor 设为 vanilla 或 chocolate 并且
• 如果 vessel 设为 cone 或 bowl 并且
• 如果 toppings 设为 sprinkles 或 peanuts

如果上述条件为 true，那么输出：

I'd like two scoops of __________ ice cream in a __________ with __________.

在空白处填上 ice cream、vessel 和 toppings 的口味，例如：

I'd like two scoops of vanilla ice cream in a cone with peanuts.

提示：确保使用不同的值测试你的代码。例如，

如果 flavor 等于 "chocolate"、vessel 等于 "cone" 并且 toppings 等于 "sprinkles"，那么应该向控制台输出"I’d like two scoops of chocolate ice cream in a cone with peanuts."。

你的代码：

练习：穿什么 (3-7)

如果你和我一样，就会发现有时候很难找到合身的T恤。我穿什么号的衣服？S（小）、M（中）和 L（大）之间有何区别？我通常穿 L 号，如果需要 XL（超大）号呢？

幸运的是，Teespring 的朋友帮我们解决了这一难题，他们创建了一个尺码表，使我们不再为衣服尺码头疼了。

T恤尺码表

说明：

请根据上述尺码表创建一系列的逻辑表达式，根据 shirtWidth、shirtLength 和 shirtSleeve 的测量结果输出T恤的尺码。有效尺码包括 S、M、L、XL、2XL 和 3XL。

例如，如果...

var shirtWidth = 23; // size L (large)
var shirtLength = 30; // size L (large)
var shirtSleeve = 8.71; // size L (large)

那么向控制台输出 L。

提示：_在查看 shirtWidth、shirtLength 和 shirtSleeve 的值时，需要对比一系列的值。例如，如果衬衫的宽至少为 20，但是不大于 22，那么T恤应为 medium (M) — 只要衬衫的长和袖口测量值相符即可。

---

如果 shirtWidth、shirtLength 和 shirtSleeve 不在特定尺码的可接受值范围内，则向控制台输出N/A。例如，如果…

var shirtWidth = 18; // size S (small)
var shirtLength = 29; // size M (medium)
var shirtSleeve = 8.47; // size M (medium)

则向控制台输出 N/A，因为测量结果不符合任何一个尺码。

提示：确保使用不同的值测试你的代码。例如，

如果 shirtWidth 等于 16、shirtLength 等于 27 并且 shirtSleeve 等于 7.57，那么应该向控制台输出 S。
如果 shirtWidth 等于 26、shirtLength 等于 33 并且 shirtSleeve 等于 9.63，那么应该向控制台输出 2XL。
如果 shirtWidth 等于 18、shirtLength 等于 29 并且 shirtSleeve 等于 8.47，那么应该向控制台输出 N/A。

你的代码：

真值和假值

查看以下代码。

false == 0

返回：true

这是一个类型转换示例，之前你已经见过。JavaScript 认为 0 表示 false，因此比较结果为true。那么为何要再次提到该示例呢？

如果再深入思考下，就会更容易回答为何 JavaScript 将值 0 转型为 false。

真值和假值

JavaScript 中的每个值都有固有的布尔值，在布尔表达式中评估该值时，该值就会转换为固有的布尔值。

这些固有的值称为真值或假值。

假值

结果为 false 的值称为 假值。例如，空字符串 "" 为假值，因为在布尔表达式中，"" 等于 false。

false == ""

返回：true

以下是所有假值的列表：

false
null
undefined
0
NaN
""

真值

如果结果为 true，则为真值。例如，1 是真值，因为在布尔环境下，1 等于 true。

true == 1

返回：true

以下是真值的一些其他示例：

true
42
"pizza"
{}
[]

本质上，如果不是假值，则为真值！

三元运算符

有时候，你可能会遇到以下类型的条件语句。

var isGoing = true;
var color;

if (isGoing) {
  color = "green";
} else {
  color = "red";
}

console.log(color);

输出："green"

在此示例中，变量 color 根据 isGoing 的值被赋为 "green" 或 "red"。这段代码可以运行，但是这么为变量赋值显得有点冗长。幸运的是，JavaScript 提供了其他方式。

提示： 使用 if(isGoing) 和使用 if(isGoing === true) 是一样的。此外，使用if(!isGoing) 和使用 if(isGoing === false) 是一样的。

三元运算符

三元运算符可以帮助避免写出冗长的 if...else 语句。

conditional ? (if condition is true) : (if condition is false)

要使用三元运算符，首先提供 ? 左侧的条件语句。然后，在 ? 和 : 之间写出条件为 true 时将运行的代码，并在 : 右侧写出条件为 false 的代码。例如，你可以将上述示例代码重写为：

var isGoing = true;
var color = isGoing ? "green" : "red";
console.log(color);

输出："green"

此代码不仅替换了条件语句，还处理了 color 的变量赋值。

分解代码后会发现，条件 isGoing 位于 ? 的左侧。然后，如果条件为 true，那么 ? 后的第一个表达式将运行，如果条件为 false，则 : 后的第二个表达式将运行。