第十一章 条件分岐

JavaScript

JavaScript 代码按写入顺序处理，但可以根据条件分支处理。JavaScript 为条件分支提供了 if 和 switch。在这里，我将解释如何在 JavaScript 中使用条件分支。

目录

11-1 使用 if 语句的条件分支
11-2 在 if 语句中组合多个条件表达式以获得更复杂的条件分支
11-3 使用 switch 语句的条件分支

11-1 使用 if 语句的条件分支

我们将解释如何使用 if 语句，它是 JavaScript 中条件分支的方法之一。if 语句可以根据条件表达式是真还是假来执行。

if语句的基本格式

if语句可以根据条件表达式的求值结果来划分不同的进程执行。格式如下。

if (条件表达式){
  当条件表达式为真时执行的过程；
  ...
}

如果条件表达式返回真，紧接在 if 之后的块中写入的语句将按顺序执行。如果条件表达式返回 false，处理将移至下一个 if 语句。

* 块是一组写在 { 和 } 之间的语句。

请参见以下示例。

let result = 78;

if (result >= 70){
  console.log('passed');
  console.log('congratulate');
}

这个if语句描述了变量result的值是否大于等于70的条件表达式。如果条件表达式返回 true，则执行后面块中描述的到控制台的输出。

在这种情况下，条件表达式为真，因此执行块中的处理。

let result = 78;

if (result >= 70){
  console.log('passed');
  console.log('congratulate');
}

>> passed
>> congratulate

条件表达式为假时的处理（if..else）

if 语句使您不仅可以在条件表达式为真时执行不同的操作，还可以在条件表达式为假时执行不同的操作。格式如下。

if (条件表达式){
   当条件表达式为真时执行的过程；
  ...
}else{
  当条件表达式为假时执行的过程；
  ...
}

如果条件表达式返回真，紧接在 if 之后的块中写入的语句将按顺序执行。如果条件表达式返回false，则依次执行else之后的块中描述的部分。

请参见以下示例。

let result = 64;

if (result >= 70){
  console.log('passed');
  console.log('congratulate');
}else{
  console.log('failed');
  console.log('try again');
}

这个if语句描述了变量result的值是否大于等于70的条件表达式。如果条件表达式返回 true，则执行后面块中描述的到控制台的输出。此外，如果条件表达式返回 false，则执行 else 之后的块中描述的向控制台的输出。

在这种情况下，条件表达式为假，因此执行 else 之后的块中的处理。

let result = 64;

if (result >= 70){
  console.log('passed');
  console.log('congratulate');
}else{
  console.log('failed');
  console.log('try again');
}

>> failed'
>> try again

ブロックの括弧{}を省略する

如果条件表达式为 true 或 false，并且只有一条语句要执行，则 {} 块可以省略。

if 条件表达式）
  当条件表达式为真时执行的过程；
else
  当条件表达式为假时执行的过程；

可以描述得更完整，但请注意，在某些情况下可能很难理解执行的是哪条语句。

11-2 在 if 语句中组合多个条件表达式以获得更复杂的条件分支

if 语句为使用多个条件表达式的更复杂的条件分支提供 if .. else if 语句。您还可以在条件分支执行的块内编写另一个 if 语句，以创建更复杂的条件分支。在这里，我将解释如何在 JavaScript 的 if 语句中使用多个条件表达式。

组合多个条件表达式（if..else if）

if 语句可以根据条件表达式是真还是假来分支要执行的处理，但是通过添加条件表达式，可以执行更复杂的条件分支。格式如下。

if 条件表达式1）{
  当条件表达式 1 为真时执行的处理；
  ...
}else if（条件表达式2）
  当条件表达式 1 为假且条件表达式 2 为真时执行的处理；
  ...
}else{
   当所有条件表达式都为假时执行的过程；
  ...
}

在这种格式中，如果“条件表达式 1”开始时返回真，则执行紧接其后的块中的处理，当块结束时，转移到 if 语句的下一个处理。如果本次“条件式1”为假，“条件式2”为真，则立即执行块内的处理，块结束时，转移到if语句的下一个处理。如果“条件表达式 2”为假，则执行 else 之后的块中的处理。

您可以根据需要编写任意多个条件表达式，而不仅仅是两个。另外，如果不需要，可以删除 else 部分。

需要注意的是，if语句的条件表达式是从上往下依次求值的，但是如果有一个条件表达式为真，后面的条件表达式将不会被求值。例如，即使“条件表达式 2”为真，如果“条件表达式 1”已经为真，则“条件表达式 2”将不会被计算。实际流程见下图。

实际上会这样写：

function passCheck(result){
  if (result > 90){
    console.log('passed');
    console.log('congredulate');
  }else if (result > 80){
    console.log('correct it and submit it again');
  }else{
    console.log('failed');
    console.log('try again');
  }
}

我们定义了一个包含 if 语句的函数。然后像这样调用函数：

function passCheck(result){
   console.log('passed');
    console.log('congredulate');
  }else if (result > 80){
    console.log('correct it and submit it again');
  }else{
    console.log('failed');
    console.log('try again');
  }
}

passCheck(84);
>> correct it and submit it again

passCheck(92);
>> passed'
>> congredulate

passCheck(68);
>> failed
>> try again

根据指定参数的值在函数内执行 if 语句，并将输出打印到控制台。如果将92指定为参数，则第一个条件表达式和第二个条件表达式都为真，但是如果第一个条件表达式为真，则不计算第二个条件表达式，因此不计算第二个条件表达式。处理中不执行条件表达式之后的块。

在 if 语句块中编写另一个 if 语句

任何语句都可以写在if语句执行的块中，所以可以写另一个if语句。

if（条件表达式1）{
  当条件表达式 1 为真时执行的处理；
  if（条件表达式2）{
    当条件表达式 2 为真时要执行的处理；
  }else{
    当条件表达式 2 为假时执行的过程；
  }
}else{
   当条件表达式 1 为假时执行的处理；
  ...
}

如果外层 if 语句的条件表达式先返回真，则执行紧接其后写入的块中的处理，但在该块中写入了另一个 if 语句，而内层 if 语句 执行的过程取决于条件是否成立表达式是真还是假。

实际流程见下图。

像这样在 if 语句执行的块中写入另一个 if 语句，可以按照与使用 if .. else if 语句相同的方式分支处理。

你实际上会这样写：

function passCheck(result){
  if (result > 80){
    if (result > 90){
    console.log('passed');
    console.log('congredulate');
    }else{
       console.log('correct it and submit it again');
    }
  }else{
     console.log('failed');
    console.log('try again');
  }
}

我们定义了一个包含 if 语句的函数。然后像这样调用函数：

function passCheck(result){
  if (result > 80){
    if (result > 90){
    console.log('passed');
    console.log('congredulate');
    }else{
       console.log('correct it and submit it again');
    }
  }else{
     console.log('failed');
    console.log('try again');
  }
}

passCheck(78);
>> passed
>> congredulate

passCheck(84);
>> correct it and submit it again

passCheck(98);
>> failed
>> try again

根据指定参数的值在函数内执行 if 语句，并将输出打印到控制台。

11-3 使用 switch 语句的条件分支

我们将解释如何使用 switch 语句，它是 JavaScript 中条件分支的方法之一。一个switch语句可以检查多个值中的一个是否匹配，划分要执行的处理。

switch语句的基本格式

switch语句可以检查目标值是否匹配其中一个值，并分流处理。格式如下。

switch (表达式){
  case 值1：
    表达式 === 値1 时执行的操作；
    ...
    break;
  case 值2:
    表达式 === 值2 时执行的操作；
    ...
    break;
  case 值3:
    表达式 === 值3 时执行的操作；
    ...
    break;
  default:
     当表达式不匹配任何值时要做什么；
    ...
}

对 switch 之后写在 () 中的表达式进行求值，并检查该值是否与 case 之后写的任何值匹配（匹配不是由 == 运算符完成的，而是由 === 运算符完成的）。如果找到匹配项，则按顺序执行该 case 子句之后的操作，直到 switch 语句或 break 语句结束。

如果没有任何值匹配，则执行 default 子句之后描述的处理。如果不需要，可以省略 default 子句。

表达式中可以直接写一个值或变量，也可以写一个计算公式。

请参见以下示例。

let pref = 'Qingdao';

switch (pref){
  case 'Qingdao':
    console.log('住在青岛市');
    break;
  case 'Beijing':
    console.log('住在北京市');
    break;
  default:
    console.log('住所不明');
}

我们会比较变量 pref 中存储的值是否等于 case value 中写入的值。这次有匹配的case，所以执行下一条语句，直到switch语句或者break结束。

let pref = 'Qingdao';

switch (pref){
  case 'Qingdao':
    console.log('住在青岛市');
    break;
  case 'Beijing':
    console.log('住在北京市');
    break;
  default:
    console.log('住所不明');
}

>>住在青岛市

住在青岛市

let pref = 'Qingdao';

if (pref === 'Qingdao'){
  console.log('住在青岛市');
}else if (pref === 'Beijing'){
  console.log('住在北京市');
}else{
  console.log('住所不明');
}

如果你想用一个有很多值的if语句和===运算符来查看是否匹配，switch语句使它更清晰。

当没有写 break 语句时

没有在switch 语句中的每个 case 子句中写break的话，如果找到具有匹配值的 case 子句，则处理从下一条语句继续，直到 switch 语句或 break 结束。

查看以下没有 break 语句的 switch 示例。

let pref = 'Beijing';

switch (pref){
  case 'Qingdao':
    console.log('住在青岛市');
  case 'Beijing:
    console.log('住在北京市');
  case 'Guanzhou':
    console.log('住在广州市');
  default:
    console.log('住所不明');
}

如果你实际运行它，你会得到如下结果。

let pref = 'Beijing';

switch (pref){
  case 'Qingdao':
    console.log('住在青岛市');
  case 'Beijing:
    console.log('住在北京市');
  case 'Guanzhou':
    console.log('住在广州市');
  default:
    console.log('住所不明');
}

>> 住在北京市
>> 住在广州市
>> 住所不明

这次变量pref中存储的值匹配case ‘Beijing’，所以下一条语句会按顺序执行，但是由于没有break语句，所以会按顺序执行，直到switch语句结束。

虽然可以故意让它进行这种处理，但通常我想在对每个 caes 子句执行必要的语句后将处理移动到下一个 switch 语句。因此，在每个 case 子句的末尾写一个 break 语句。

let pref = 'Beijing';

switch (pref){
  case 'Qingdao':
    console.log('住在青岛市');
    ...
    ...
    break;
  case 'Beijing':
    console.log('住在北京市');
    ...
    ...
    break;
  case 'Guangzhou':
    console.log('住在广州市');
    ...
    ...
    break;
  default:
    console.log('住所不明');
}

当执行 break 语句时，处理将移动到下一个 switch 语句，因此不会执行后面写的语句。注意default子句一般写在最后，所以不需要写break语句。

对多个值做同样的事情

在 switch 语句中，我们会检查 case 子句之后描述的值是否匹配，但是通过故意不写 break 语句，您可以对多个值执行相同的处理。

看看下面的开关示例。

let ans = '8月';

switch (ans){
  case '8月':
  case '八月':
  case 'August':
    console.log('正确');
    break;
  default:
    console.log('不正确');
}

>> 正确

如果变量 ans 的值为 ‘August’，则执行 console.log(‘That’s correct’)，但如果变量 ans 的值为 ‘August’ 或 ‘August’，则执行相同的语句。这是因为当 switch 语句找到具有匹配值的 case 子句时，会按照从 next 语句到 switch 语句或 break 末尾的顺序执行处理。

关联内容

JavaScript
第二章将JavaScript写到HTML编码中
JavaScript
第一章 在浏览器中启用 JavaScript
JavaScript
第三章 JavaScript 基础知识
JavaScript
第四章 JavaScript的数值
JavaScript
第五章 長整数
JavaScript
第六章 字符串的基础