【4】JavaScript - 控制语句 之 [ if、switch ]

if 语句

根据条件划分不同的处理，在 JavaScript 中，像这样作为分歧处理的命令，有 if 语句和 switch 语句两种。

首先是 if 语句，是用来表示 如果~~就…否则… 的语句。根据给定的条件表达式是 true/false，执行相应的语句。

语法形式如下：

if (condition) {
    // 当条件为真时执行的代码块
} else {
    // 当条件为假时执行的代码块
}

其中：

• condition 是一个表达式，用于评估为真或假的条件。
• 如果 condition 为真，则执行 if 后面的代码块；如果 condition 为假，则执行 else 后面的代码块。
• else 语句是可选的，如果省略了 else，则在条件为假时不执行任何操作。

示例：

let num = 10;

if (num > 0) {
    console.log('数字是正数');
} else {
    console.log('数字是非正数');
}

上述代码中，else 代码块 也是可以省里的，如下：

let num = 10;

if (num > 0) {
    console.log('数字是正数');
}

else if 实现多分支

通过 使用 else if 代码块，可以实现多个分歧处理，它允许我们根据不同的条件执行不同的代码块。

语法形式如下：

if (condition1) {
    // 当条件1为真时执行的代码块
} else if (condition2) {
    // 当条件2为真时执行的代码块
} else {
    // 当以上条件都不满足时执行的代码块
}

其中：

• condition1, condition2, … 是一系列条件表达式，每个表达式都会被依次检查，直到找到第一个为真的条件为止。
• 如果 condition1 为真，则执行 if 后面的代码块；如果 condition1 为假但 condition2 为真，则执行 else if 后面的代码块；如果以上所有条件都为假，则执行 else 后面的代码块。

else 和 else if 语句是可选的。

示例：

let grade = 'B';

if (grade === 'A') {
    console.log('优秀');
} else if (grade === 'B') {
    console.log('良好');
} else if (grade === 'C') {
    console.log('中等');
} else if (grade === 'D') {
    console.log('及格');
} else {
    console.log('不及格');
}

在这个示例中，根据成绩等级来输出不同的评级。

if 语句可以嵌套

if 语句可以嵌套，这意味着你可以在一个 if 语句的代码块中包含另一个 if 语句。这种嵌套的结构允许你在条件满足时进一步检查更多条件。

语法形式如下：

if (outerCondition) {
    // 外部 if 语句的代码块
    if (innerCondition) {
        // 内部 if 语句的代码块
    } else {
        // 内部 if 语句的 else 代码块
    }
} else {
    // 外部 if 语句的 else 代码块
}

在嵌套的 if 语句中，内部的 if 语句可以包含另一个 if 语句，以此类推。

示例：

let num = 10;

if (num >= 0) {
    console.log('数字是非负数');
    if (num === 0) {
        console.log('数字是零');
    } else {
        console.log('数字是正数');
    }
} else {
    console.log('数字是负数');
}

在这个示例中，外部的 if 语句检查数字是否为非负数，如果是，则进入内部的 if 语句继续检查数字是否为零，否则执行内部的 else 代码块。

注意：

1. 像这样，控制语句中有控制语句称为嵌套。这里展示了 if 语句嵌套的例子，后面介绍switch/for/do...while/while 等控制语句时，同样可以嵌套。
2. 从代码可读性角度来看，应该尽量避免采用过深度嵌套。一般不超过3层。

if 语句的省略写法-省略大括号

代码块中的语句只有 1个 条件表达式时，大括号（{...}）可以省略。

示例：

let num = 10;

// 当只有一个条件表达式时，大括号可以省略
if (num > 0)
    console.log('数字是正数');

在这个例子中，当 num 大于 0 时，打印 ‘数字是正数’。因为只有一条语句在 if 的条件下执行，所以大括号可以省略。

注意：虽然可以省略大括号，但是建议在代码中始终使用大括号以提高代码的可读性，并且在需要添加更多语句时可以方便地扩展代码块。

switch 语句

在介绍 if 时，有举到一个评级的例子，如下：

let grade = 'B';

if (grade === 'A') {
    console.log('优秀');
} else if (grade === 'B') {
    console.log('良好');
} else if (grade === 'C') {
    console.log('中等');
} else if (grade === 'D') {
    console.log('及格');
} else {
    console.log('不及格');
}

上述案例，可以看出代码教冗长。遇到这样的案例，建议使用 switch 语句。
switch 语句是专门用于同值运算数的多分支的条件语句，用于不需要重复写相同的表达式，从而使代码更简洁更易读。

语法形式如下：

switch (expression) {
  case value1:
    // 当 expression 的值等于 value1 时执行的代码块
    break;
  case value2:
    // 当 expression 的值等于 value2 时执行的代码块
    break;
  case value3:
    // 当 expression 的值等于 value3 时执行的代码块
    break;
  // 可以有任意数量的 case
  default:
    // 如果 expression 的值都不匹配上述任何一个 case 时执行的代码块
    break;
}

其中：

• expression 是一个表达式，用于计算结果。
• case valueN 是不同条件的值。当 expression 的值等于某个 valueN 时，将执行对应的代码块。
• break 语句用于跳出 switch 语句。如果省略 break，则程序会继续执行下一个 case 的代码块，直到遇到 break 或者 switch 结束。
• default 是可选的，用于处理 expression 的值与任何 case 都不匹配的情况。

示例：

将上述评级示例（ if 实现）改造为 switch 实现：

let grade = 'B';

switch (grade) {
    case 'A':
        console.log('优秀');
        break;
    case 'B':
        console.log('良好');
        break;
    case 'C':
        console.log('中等');
        break;
    case 'D':
        console.log('及格');
        break;
    default:
        console.log('不及格');
	    break;
}

在这个案例中，switch 语句使用了 grade 作为表达式，每个 case 中的值与 grade 变量进行比较。如果某个 case 匹配到了 grade 的值，就会执行相应的代码块，然后跳出 switch 结构。如果没有任何一个 case 匹配到了 grade 的值，那么将会执行 default 中的代码块。。

通过上述的示例，现对 switch 语句执行的处理流程，做下梳理：
1. 首先计算开头的表达式
2. 执行满足 1. 的值的 case 语句
3. 如果没有找到一致的 case语句，调用最后的 default 语句。

再例如：

let day = 3;
let dayName;

switch (day) {
  case 1:
    dayName = '星期一';
    break;
  case 2:
    dayName = '星期二';
    break;
  case 3:
    dayName = '星期三';
    break;
  case 4:
    dayName = '星期四';
    break;
  case 5:
    dayName = '星期五';
    break;
  default:
    dayName = '周末';
    break;
}

console.log(dayName); // 输出 '星期三'

在这个示例中，根据 day 的值来确定今天是星期几，并将结果赋值给 dayName。

这里需要注意的是，在case/default语句的末尾，一定要写break语句。break 是从现在的代码块 中止 处理的语句。
和 if 语句不同，switch 语句只是移动到符合条件的 case 语句并执行，执行完之后并不会自动的结束 switch 代码块，如果省略 break ，会继续执行 switch 语句中的下一条语句而产生预期之外的结果。

有意省略 break 语句

虽然也有故意省略 break 并连续执行多个代码块的写法，但由于会使代码的流程很难理解，通常应该避免。
但是也有例外，像在下面这样的案例中连续书写代码块（不插入 break 语句）也没有关系。

let month = 8;
let quarter;

switch (month) {
    case 1:
    case 2:
    case 3:
        quarter = '第一季度';
        break;
    case 4:
    case 5:
    case 6:
        quarter = '第二季度';
        break;
    case 7:
    case 8:
    case 9:
        quarter = '第三季度';
        break;
    case 10:
    case 11:
    case 12:
        quarter = '第四季度';
        break;
    default:
        quarter = '无效月份';
        break;
}

console.log(quarter);

？：如何避免省略 break
对代码进行优化，如下：

let month = 8;
let quarter;

switch (Math.ceil(month / 3)) {
    case 1:
        quarter = '第一季度';
        break;
    case 2:
        quarter = '第二季度';
        break;
    case 3:
        quarter = '第三季度';
        break;
    case 4:
        quarter = '第四季度';
        break;
    default:
        quarter = '无效月份';
}

console.log(quarter);

switch 表达式和 case 值使用 === 运算符比较

注意：switch 语句开头的表达式 和 case语句的值是使用 === 运算符，而不是==进行比较的。
比如，在下面的代码中 case 0 语句不会被执行。

var x = '0';
switch(x) {
  case 0:
  	// 这个部分没有被执行
  	... 中间省略 ...
}

因为使用 === 运算符时，作为字符串的 '0' 和 作为数字的 0 是不同的。