1. if 语句
  2. 三元运算符
  3. 开发中很少使用 switch 语句（甚至有的公司禁止使用）

JavaScript 提供if结构和switch结构，完成条件判断，即只有满足预设的条件，才会执行相应的语句。

if 结构

if结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。所谓布尔值，指的是 JavaScript 的两个特殊值，true表示“真”，false表示“伪”。

  1. if (布尔值)
  2.   语句;
  4. // 或者
  5. if (布尔值) 语句;

上面是if结构的基本形式。需要注意的是，“布尔值”往往由一个条件表达式产生的，必须放在圆括号中，表示对表达式求值。如果表达式的求值结果为true，就执行紧跟在后面的语句；如果结果为false，则跳过紧跟在后面的语句。

  1. if (m === 3)
  2.   m = m + 1;

上面代码表示，只有在m等于3时，才会将其值加上1。

这种写法要求条件表达式后面只能有一个语句。如果想执行多个语句，必须在if的条件判断之后，加上大括号，表示代码块（多个语句合并成一个语句）。

  1. if (m === 3) {
  2.   m += 1;
  3. }

建议总是在if语句中使用大括号，因为这样方便插入语句。

注意，if后面的表达式之中，不要混淆赋值表达式（=）、严格相等运算符（===）和相等运算符（==）。尤其是赋值表达式不具有比较作用。

  1. var x = 1;
  2. var y = 2;
  3. if (x = y) {
  4.   console.log(x);
  5. }
  6. // "2"

上面代码的原意是，当x等于y的时候，才执行相关语句。但是，不小心将严格相等运算符写成赋值表达式，结果变成了将y赋值给变量x，再判断变量x的值（等于2）的布尔值（结果为true）。

这种错误可以正常生成一个布尔值，因而不会报错。为了避免这种情况，有些开发者习惯将常量写在运算符的左边，这样的话，一旦不小心将相等运算符写成赋值运算符，就会报错，因为常量不能被赋值。

  1. if (x = 2) { // 不报错
  2. if (2 = x) { // 报错

至于为什么优先采用“严格相等运算符”（===），而不是“相等运算符”（==），请参考《运算符》章节。

if…else 结构

if代码块后面，还可以跟一个else代码块，表示不满足条件时，所要执行的代码。

  1. if (m === 3) {
  2.   // 满足条件时，执行的语句
  3. } else {
  4.   // 不满足条件时，执行的语句
  5. }

上面代码判断变量m是否等于3，如果等于就执行if代码块，否则执行else代码块。

对同一个变量进行多次判断时，多个if...else语句可以连写在一起。

  1. if (m === 0) {
  2.   // ...
  3. } else if (m === 1) {
  4.   // ...
  5. } else if (m === 2) {
  6.   // ...
  7. } else {
  8.   // ...
  9. }

else代码块总是与离自己最近的那个if语句配对。

  1. var m = 1;
  2. var n = 2;
  4. if (m !== 1)
  5. if (n === 2) console.log('hello');
  6. else console.log('world');

上面代码不会有任何输出，else代码块不会得到执行，因为它跟着的是最近的那个if语句，相当于下面这样。

  1. if (m !== 1) {
  2.   if (n === 2) {
  3.     console.log('hello');
  4.   } else {
  5.     console.log('world');
  6.   }
  7. }

如果想让else代码块跟随最上面的那个if语句，就要改变大括号的位置。

  1. if (m !== 1) {
  2.   if (n === 2) {
  3.     console.log('hello');
  4.   }
  5. } else {
  6.   console.log('world');
  7. }
  8. // world

switch 结构

多个if...else连在一起使用的时候，可以转为使用更方便的switch结构。

  1. switch (fruit) {
  2.   case "banana":
  3.     // ...
  4.     break;
  5.   case "apple":
  6.     // ...
  7.     break;
  8.   default:
  9.     // ...
  10. }

上面代码根据变量fruit的值，选择执行相应的case。如果所有case都不符合，则执行最后的default部分。需要注意的是，每个case代码块内部的break语句不能少，否则会接下去执行下一个case代码块，而不是跳出switch结构。

  1. var x = 1;
  3. switch (x) {
  4.   case 1:
  5.     console.log('x 等于1');
  6.   case 2:
  7.     console.log('x 等于2');
  8.   default:
  9.     console.log('x 等于其他值');
  10. }
  11. // x 等于1
  12. // x 等于2
  13. // x 等于其他值

上面代码中，**case**代码块之中没有**break**语句，导致不会跳出**switch**结构，而会一直执行下去。正确的写法是像下面这样。

  1. switch (x) {
  2.   case 1:
  3.     console.log('x 等于1');
  4.     break;
  5.   case 2:
  6.     console.log('x 等于2');
  7.     break;
  8.   default:
  9.     console.log('x 等于其他值');
  10. }

switch语句部分和case语句部分，都可以使用表达式。

  1. switch (1 + 3) {
  2.   case 2 + 2:
  3.     f();
  4.     break;
  5.   default:
  6.     neverHappens();
  7. }

上面代码的default部分，是永远不会执行到的。

需要注意的是，**switch**语句后面的表达式，与**case**语句后面的表示式比较运行结果时，采用的是严格相等运算符（**===**），而不是相等运算符（**==**），这意味着比较时不会发生类型转换。

  1. 1 == true // => true
  2. 1 === true // => false
  1. var x = 1;
  3. switch (x) {
  4.   case true:
  5.     console.log('x 发生类型转换');
  6.     break;
  7.   default:
  8.     console.log('x 没有发生类型转换');
  9. }
  10. // x 没有发生类型转换

上面代码中，由于变量x没有发生类型转换，所以不会执行case true的情况。这表明，switch语句内部采用的是“严格相等运算符”，详细解释请参考《运算符》一节。

三元运算符 ?:

JavaScript 还有一个三元运算符（即该运算符需要三个运算子）?:，也可以用于逻辑判断。

  1. (条件) ? 表达式1 : 表达式2

上面代码中，如果“条件”为true，则返回“表达式1”的值，否则返回“表达式2”的值。

  1. var even = (n % 2 === 0) ? true : false;

上面代码中，如果n可以被2整除，则even等于true，否则等于false。它等同于下面的形式。

  1. var even;
  2. if (n % 2 === 0) {
  3.   even = true;
  4. } else {
  5.   even = false;
  6. }

三元运算符可以被视为**if...else...**的简写形式，因此可以用于多种场合。

  1. var myVar;
  2. console.log(
  3.   myVar ?
  4.   'myVar has a value' :
  5.   'myVar does not have a value'
  6. )
  7. // myVar does not have a value

上面代码利用三元运算符，输出相应的提示。

  1. var msg = '数字' + n + '是' + (n % 2 === 0 ? '偶数' : '奇数');

上面代码利用三元运算符，在字符串之中插入不同的值。

练习1

假设 number 是存放的是用户输入的一个数字

若不是三位数，则提示用户输入有误
若是三位数，则判断该数能否被 13 整除

  1. var number = 130;
  3. if (isNaN(number) || number < 100 || number > 999) {
  4.   console.log("输入有误");
  5. } else {
  6.   if (number % 13 === 0) {
  7.     console.log("能被13整除")
  8.   } else {
  9.     console.log("不能被13整除")
  10.   }
  11. }

练习2

假设 score 是用户输入一个成绩（0-100），判断这个成绩属于哪个范围并输出结果（A:90-100 B:70-89 C:60-69 D:40-59 E:0-39），若用户输入的不是0-100的数字，则输出输入有误。

  1. var score = 80;
  3. if (isNaN(score) || score < 0 || score > 100) {
  4.   console.log("输入有误");
  5. } else {
  6.   if (score >= 90) {
  7.     console.log("A")
  8.   } else if (score >= 70) {
  9.     console.log("B")
  10.   } else if (score >= 60) {
  11.     console.log("C")
  12.   } else if (score >= 40) {
  13.     console.log("D")
  14.   } else {
  15.     console.log("E");
  16.   }
  17. }

练习3

根据世界卫生组织推荐的计算方法：
男性标准体重计算方法为（身高cm－80）×70﹪
女性标准体重计算方法为（身高cm－70）×60﹪
标准体重正负10%为正常体重
低于标准体重的10%为过瘦
高于标准体重的10%为过重

编写程序，让用户输入性别、身高、体重，判断用户的健康状况，健康状况有 3 种：

  1. 你的体重正常，请继续保持
  2. 你的身体偏瘦，请加强营养
  3. 你的身体偏胖，请加强锻炼
  1. var height = 166;
  2. var weight = 66;
  3. var gender = '男';
  5. if (isNaN(height) || isNaN(weight) || gender !== "男" && gender !== "女") {
  6.   console.log("输入有误");
  7. } else {
  8.   var standardWeight; //标准体重
  9.   if (gender === "男") {
  10.     standardWeight = (height - 80) * 0.7;
  11.   } else {
  12.     standardWeight = (height - 70) * 0.6;
  13.   }
  15.   if (weight < standardWeight * 0.9) {
  16.     console.log("你的身体偏瘦，请加强营养");
  17.   } else if (weight > standardWeight * 1.1) {
  18.     console.log("你的身体偏胖，请加强锻炼")
  19.   } else {
  20.     console.log("你的体重正常，请继续保持");
  21.   }
  22. }

练习4

某理财公司推出一种理财服务，服务规则如下：

  1. 若用户的理财金额在50万元以下，则每年的收益按照4%计算。
  2. 若用户的理财金额在50万元以上（包括50万），则每年收益按照4.5%计算。
  3. 若用户的理财金额超过200万，除了理财收益外，还要额外给予用户收益金额的10%

编写程序，让用户输入理财金额和理财年限，计算到期后的收益

  1. var money = 1000000;
  2. var year = 1;
  4. if (isNaN(money) || isNaN(year) || money <= 0 || year <= 0) {
  5.   console.log("输入有误");
  6. } else {
  7.   var rate = 0.04; // 年利率4%
  8.   if (money >= 500000) {
  9.     rate = 0.045;
  10.   }
  11.   var earnMoney = money * rate * year; // 收益
  12.   if (money >= 2000000) {
  13.     earnMoney += earnMoney * 0.1;
  14.   }
  15.   console.log(`总收益为：${earnMoney}`);
  16. }

练习5

编写一个用户和计算机猜拳的游戏，用户输入剪刀、石头或布，与计算机的出拳进行比较，判断胜负。

  1. var fist = "剪刀";
  3. if (fist === "剪刀" || fist === "石头" || fist === "布") {
  4.   //正确
  5.   //1. 模拟计算机出拳
  6.   var rad = Math.random(); // 0~1
  7.   var pcFist; //计算机出拳结果
  8.   if (rad < 0.333) {
  9.     pcFist = "剪刀";
  10.   } else if (rad < 0.6666) {
  11.     pcFist = "石头";
  12.   } else {
  13.     pcFist = "布";
  14.   }
  15.   //2. 比较胜负
  16.   console.log(`你的出拳：${fist}, 电脑出拳：${pcFist}`);
  17.   if (fist === "剪刀" && pcFist === "布" ||
  18.     fist === "布" && pcFist === "石头" ||
  19.     fist === "石头" && pcFist === "剪刀") {
  20.     console.log("你胜利了！");
  21.   } else if (fist === pcFist) {
  22.     console.log("平局");
  23.   } else {
  24.     console.log("电脑胜利！");
  25.   }
  26. } else {
  27.   console.log("输入有误")
  28. }