JavaScript 条件语句

为了根据不同条件执行不同的操作，可以使用条件语句或 ? 运算符。

if-else 语句

if-else 语句根据是否满足一个条件而执行特定的代码。

if (/* 这个表达式为真 */) {
  // 运行这段代码
} else {
  // 否则运行这段代码
}

判断条件位于小括号中 ()
待执行的代码位于花括号 {} 里
有时候可能只有 if 语句
当只有一条执行语句时可以省略大括号，如 if (state == "true") alert("It work!"); 但建议每次使用大括号 {} 包装执行语句代码块，以提高代码可读性

Tip

条件语句表达式的计算结果会转换为布尔型：

一些被称为 falsy 的值，数字 0、空字符串 ""、null、undefined 和 NaN 都会被转换成 false
其他值被转换为 true，所以它们被称为 truthy

Tip

条件判断如果需要进行相等性检测时，推荐使用绝对绝对比较运算符 === 或 !==

else-if 语句

存在多种并列条件，可使用 else-if 语句进行列举，最后可添加 else 语句（当所有并列条件都不满足时，作为默认执行备选项）

if (/* 这个表达式为真 */) {
  // 运行这段代码
} else if (/* 这个表达式为真 */) {
  // 运行这段代码
} else {
  // 运行这段代码
}

Tip

除了使用 else-if 语句判断多种并列条件外，还可以使用逻辑运算符 &&、||、! 对多个条件语句的结果（布尔值）进行组成运算，从而构建更复杂的条件组合。

三元运算符

三元运算符简化代码，避免写出冗长的 if-else 语句。该结构一般用以根据一个条件去赋值一个变量。

格式

conditional ? (code_block run when true) : (code_block run when false)

Announce

解释：

问号 ? 左侧的是条件语句
在 ? 和 : 之间为条件是 true 时将运行的代码
在 : 右侧为条件是 false 时将运行的代码

//使用 if-else 语句
var isGoing = true;
var color;

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

//使用三元运算符
var isGoing = true;
var color = isGoing ? "green" : "red";   // 赋值运算符等级优先级较低，先进行左侧的条件判断，当 isGoing 为 true 时返回 green ，再将 green 赋给变量 color

🎦 三元运算符与if-else语句转换

Tip

通过多层的三元运算符结构嵌套，可以构建复杂的条件组合

let age = prompt('age?', 18);

let message = (age < 3) ? 'Hi, baby!' :
  (age < 18) ? 'Hello!' :
  (age < 100) ? 'Greetings!' :
  'What an unusual age!';

alert( message );

// 上下两段代码等价
if (age < 3) {
  message = 'Hi, baby!';
} else if (age < 18) {
  message = 'Hello!';
} else if (age < 100) {
  message = 'Greetings!';
} else {
  message = 'What an unusual age!';
}

Warning

三元运算符较简约，但是代码可读性比较差，应避免滥用。

禁止 break 或 continue 在 ? 的右边。会造成代码停止运行，并显示有语法错误。

switch 语句

switch 语句也是条件选择结构，它基于多个相同类型值进行选择，类似 else-if 语句，为多分支选择的情况提供了一个更具描述性的方式，使代码结构更清晰明了。

switch 语句有至少一个 case 代码块和一个（可选的，位于最后的） default 代码块，根据匹配的值切换到相应的代码块，且默认继续执行后续的代码块。

let option = 4;

switch (option) {
  case 1:
    console.log("You selected option 1.");
  case 2:
    console.log("You selected option 2.");
  case 3:
    console.log("You selected option 3.");
  case 4:
    console.log("You selected option 4.");   // start run code here
  case 5:
    console.log("You selected option 5.");   // this also run
  default:
    console.log("default option.");   // this also run too
}

switch 语句会将传递进来的 option 值匹配（严格相等）每个 case 的值，并在将控制权转给第一个相匹配 case 条件的代码块，执行相关的语句。

Tip

任何表达式都可以成为 switch 和 case 的参数

支持共享同一段代码的几个 case 分支归为一组，以实现多种情况匹配的「合并操作」，即相应包含的代码块只执行一次。

let a = 1 + 2;

switch (a) {
  case 4:
    alert('Right!');
    break;

  // 下面这两个 case 被分在一组
  case 3:   // 匹配到 3 其下代码执行一次
  case 5:
    alert('Wrong!');
    alert("Why don't you take a math class?");
    break;

  default:
    alert('The result is strange. Really.');
}

Warning

Switch 语句中 option 与 case 匹配是严格相等的，因此数据类型很关键。

Switch 语句的「传递」行为，即在跳转到匹配 case 条件执行完相关代码块以后，默认会依次执行后续 case 语句，除非在每个 case 执行语句最后添加了 中断语句 break（最后一个 case 可以不添加中断语句），否则会一直执行到达 switch 语句的结尾。