持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

1、写在前面

大家好，我是翼同学。今天文章的内容是：

JavaScript的流程控制

2、内容

2.1、简介

在JavaScript中，语句statement是以分号结束的命令，用于执行以使得某件事发生。而JS程序，就是一系列可执行语句的集合。一般来说，JS解释器默认按照语句的编写顺序依次执行。

2.2、语句块

在JavaScript中，我们可以将多条语句联合起来，编写在一个花括号里面，形成复合语句。我们将其称为语句块。

{
    statement 1...;
    statement 2...;
    ...
    statement n...;
}

需要注意的是，在ECMAScript 6标准之前，Javascript没有块作用域，在语句块中声明的变量并不是块私有的，其执行的结果会延续到块外，即块语句不定义范围。这与一些编程语言（如C++/Java）不同。

从ECMAScript 2015开始，使用let和const定义的变量属于块作用域，其作用域只在声明的块内部。

2.3、条件语句

(1) if...else

if语句语法如下：

if (condition) {
    statement;
    ...
} else {
    statement;
    ...
}

这里的condition可以是任意表达式。这是因为ECMAScript会自动将其转化为布尔值;

说明如下：

如果condition的返回结果为true，则执行语句statement1;
如果condition的返回结果为false，则执行语句statement2;

如果只有一条执行语句，则可以省略掉花括号,如下所示：

if (condition) 
    statement1;
else
    statement2

为了逻辑清晰，最好加上花括号，这是一个好习惯。

另外，if语句是可以嵌套的。如下所示：

if (condition_1) {
    statement_1;
    ...
} else if (condition_2) {
    statement_2;
    ...
} else if (condition_n_1) {
    statement_n;
    ...
} else {
    statement_last;
    ...
}

如果上述条件都为假，则执行最后语句块中的语句。

(2) 条件为假

JS会在需要用到布尔值的上下文中使用强制类型转换，将值转换为布尔值。

那么有哪些值会被认为是假值呢？如下所示：

假值	说明
`false`	关键字
`""`	空字符串
`0`	数值零
`-0`	数值负零
`null`	原始数据类型之一，表示对象的值未设置
`undefined`	原始数据类型之一，表示变量未定义的初始值
`NaN`	表示非数字（`Not-A-Number`）
`On`	当`BigInt`作为布尔值使用时，遵从其作为数值的规则。

因此，当if语句的condition表达式在求解时，如果得出以上值，则表示为假。否则就为真。

(3) switch

switch (expression) {
    case value1:
        statement
        break;
    case value2:
        statement
        break;
    case value3:
        statement
        break;
    case value4:
        statement
        break;
        ...
    default:
        statement
}

说明：

遇到switch语句时，首先会计算表达式expression的值；
将计算的结果与每个case标签进行匹配，如果匹配成功，则执行相关语句；
遇到break时代码执行会跳出switch语句。
如果每个case标签都不匹配，则会执行最后default下的语句。即default关键字用于在任何条件都没有满足时指定默认执行的语句。

需要注意，switch语句中的break语句是可选的。一般来说，break语句会出现在每个case语句的最后。如果不写上break，则程序会继续执行下一条case语句。

(4) 特性

在JavaScript中，switch语句的expression适用于所有数据类型，可以是任意表达式或变量，如字符串、对象等。
switch语句在比较每个条件的值时会使用全等操作符，即不会强制转换数据类型。

2.4、循环语句

循环语句，就是将重复执行某语句块中的代码。当然，也有可能重复次数为零。

以下便是JS循环语句的记录。

(1) while

do-while语句是先测试后循环语句。语法如下：

while(expression) {
    statement;
    ...
}

说明：

首先计算表达式expression的值；
如果为真，则继续执行循环体中的代码
如果为真，则跳出循环体

需要注意的是，while语句的特点在于，循环体内的代码可能执行次数为零。

举个例子，比如向控制台输出十以内的偶数：

let value = 0;
while(value <= 10) {
    console.log(value);
    value += 2;
}

(2) do while

do-while语句是一种后测试循环语句。语法如下：

do {
    statement;
    ...
} while (expression);

说明：

语句块中的代码会先执行；
执行完后计算表达式expression，进行循环条件的判断；
如果循环条件为真，则继续执行循环体中的代码，依次类推；
直到循环条件为假，则退出循环；

do while循环语句的特点是：循环体中的代码至少执行一次。

举个例子，向控制台输出 $5$ 个数字：

let value = 0;
do {
    value += 1;
    console.log(i);
} while (value < 5);

(3) for

for循环语句属于先测试后循环语句。语法如下：

for (initialization; expression; post-loop-expression) {
    statement;
    ...
}

说明：

initialization: 循环变量的初始化语句。（有时也将循环变量称为循环计数器）
expression: 循环条件的计算，用于判断是否进入循环。如果求值结果为true，则执行循环体，否则跳出循环。
post-loop-expression: 循环变量的更新语句，当循环体执行结束后，就必须执行该表达式，以便更新循环变量。

举个例子，打印1-10，并且逆序：

for(let i = 10; i>0; i--) {
    console.log(i);
}

需要注意的是，for循环中的初始化、条件表达式以及更新语句都是可以省略的。

比如以下for循环属于死循环:

for( ; ;) {
    statement;
    ...
}

(4) for in

for in循环是一种严格的循环语句。语法如下：

for(variable in object) {
    statement;
    ...
}

说明如下：

for in语句利用指定的变量来遍历对象中的可枚举的属性；
JS会对每一个对象属性执行相同的循环语句；

需要注意：

for in语句无法保证返回对象属性的顺序，其中的差异由浏览器决定。这是因为ECMAScript中对象的属性是无序的。
另外，如果for in循环要迭代的变量是null或undefined，则不执行循环体。

(5) for of

for of也是严格的循环语句。语法如下：

for (property of expression) {
    statement;
    ...
}

说明：

for of语句在可迭代对象（如Array,Set等）上创建循环，对值的每一个属性调用一次执行语句。

以数组为例，观察for of和for in的区别：

let arrays = [100, 200, 300];
arrays.info = "Hello World";
for(let i in arrays) {
    console.log(i);
}
console.log("===============");
for(let i of arrays) {
    console.log(i);
}

打印结果如下：

总的来说：

for in遍历的是对象（数组）的属性（索引）
for of遍历的是对象（数组）的值

(6) label

label语句允许我们在程序中标识某处，一般会和break或continue语句一起使用。用于指出程序是否跳出循环又或者继续循环。

语法如下；

label:
   statement

标签语句就是在语句前加一个可以引用的标识符。label的值可以是任何非保留字的JS标识符。statement是任意你想标识的语句或语句块。

举个例子，下面是一个简单的两层循环：

var i, j;
for(i = 0; i<3; i++) {
    for(j = 0; j<3; j++) {
        console.log("i = " + i + ", j = " + j);
    }
}

打印结果为：

现在加上了标签loop，代码如下所示：

var i, j;
loop:
for(i = 0; i<3; i++) {
    for(j = 0; j<3; j++) {
        if(i == 1 && j == 1) {
            break loop;
        }
        console.log("i = " + i + ", j = " + j);
    }
}