循环语句

发表于 | 分类于 ，

前面提到流程控制语句主要分为顺序执行、选择执行和循环执行。

循环语句，就是用来实现”循环执行“的代码执行顺序。

循环语句原理：通过判断某些条件是否成立，来决定某一部分代码反复执行的次数。

循环语句主要分为三种形式：

  1. while 循环
  2. do while 循环
  3. for 循环

while 循环

while 循环语句，由一个while构成，语法结构如下：

1
2
3
while(条件){
    代码块
}

代码执行顺序：

  1. 判断小括号中条件是否成立；
  2. 条件成立，执行代码块所有代码；
  3. 重复第 1、2 步，直到小括号中条件不成立，循环结束。
1
2
3
4
5
let num = 3;
while(num > 1){
    console.log(num);
    num--;
}

运行结果：

1
2
3
2

代码执行顺序分析：

  1. 执行第一行代码，创建一个变量num值为3；
  2. 执行第二行代码，判断条件num > 1是否成立：3 > 1成立；
  3. 进入while内部，执行第三、四行代码，输出3后num减 1 变成 2；
  4. 执行第二行代码，继续判断条件num > 1是否成立：2 > 1成立；
  5. 进入while内部，执行第三、四行代码，输出2后num减 1 变成 1；
  6. 执行第二行代码，继续判断条件num > 1是否成立：1 > 1不成立；
  7. 循环结束；

do while 循环

do while 循环语句，由一个do和一个while构成，语法结构如下：

1
2
3
do{
    代码块
}while(条件)

代码执行顺序：

  1. 进入do，执行代码块中的所有代码；
  2. 执行第三行代码，判断条件是否成立；
  3. 条件成立，继续执行代码块所有代码；
  4. 重复第 2、3 步，直到小括号中条件不成立，循环结束。
1
2
3
4
5
let num = 3;
do{
    console.log(num);
    num--;
}while(num > 1);

运行结果：

1
2
3
2

代码执行顺序分析：

  1. 执行第一行代码，创建一个变量num值为3；
  2. 进入do内部，执行第三、四行代码，输出3后num减 1 变成 2；
  3. 执行第五行代码，判断条件num > 1是否成立：2 > 1成立；
  4. 进入do内部，执行第三、四行代码，输出2后num减 1 变成 1；
  5. 执行第五行代码，继续判断条件num > 1是否成立：1 > 1不成立；
  6. 循环结束；

for 循环

for循环语句，由一个for构成，语法结构如下：

1
2
3
for(表达式一; 表达式二; 表达式三){
    代码块四
}

for循环语句中包含了四个部分：

  • 表达式一：初始化表达式，初始化一个计数器（用于控制循环次数），在循环开始前记录初始状态。
  • 表达式二：条件判断表达式，判断给定的状态是否为 true。如果条件为 true，则执行循环体，否则跳出循环。
  • 表达式三：改变循环条件，修改计数器的值。
  • 代码块四：循环体，需要循环执行的代码块。

代码执行顺序：

  1. 执行表达式一（初始化表达式）；
  2. 执行表达式二（条件判断表达式），判断条件是否成立；
  3. 表达式二条件成立，执行代码块四（循环体）；
  4. 执行表达式三（改变循环条件）；
  5. 重复第 2、3、4 步，直到表达式二条件不成立，结束整个for循环；

简单来说，for循环的执行顺序就是“一 二四三 二四三 二四三 … … 二”。

1
2
3
for(let i = 0; i < 2; i++){
    console.log(i);
}

运行结果：

1
2
0
1

代码执行顺序分析：

  1. 执行第一行代码中的表达式一let i = 0；
  2. 判断第一行代码中的表达式二i < 2是否成立：0 < 2成立；
  3. 执行第二行的代码块四，输出i的值0；
  4. 执行第一行代码中的表达式三i++，将i的值加 1 变成 1；
  5. 判断第一行代码中的表达式二i < 2是否成立：1 < 2成立；
  6. 执行第二行的代码块四，输出i的值1；
  7. 执行第一行代码中的表达式三i++，将i的值加 1 变成 2；
  8. 判断第一行代码中的表达式二i < 2是否成立：2 < 2不成立；
  9. for循环结束；

打断循环

正常情况下，循环语句是在循环条件判断不成立后结束。除了通过这种方式结束循环外，JavaScript 还提供了两种语句用来打断循环。

  • break
  • continue

break

break在switch语句中用于跳出switch语句，即结束整个switch。同理，在循环语句中使用break，也可以实现立即结束整个循环的效果。

1
2
3
4
5
6
7
8
let count = 0;
while(count < 3){
    count++;
    if(count == 2){
        break;
    }
    console.log(count);
}

运行结果：

1
1

代码执行顺序分析：

  1. 执行第一行代码，创建一个变量count值为0；
  2. 执行第二行代码，判断循环条件count < 3成立，进入while；
  3. 执行第三行代码，count加 1 变为 1；
  4. 执行第四行代码，判断条件count == 2是否成立：1 == 2不成立；
  5. 跳过if，执行第七行代码，输出1；
  6. 执行第二行代码，判断循环条件count < 3成立，进入while；
  7. 执行第三行代码，count加 1 变为 2；
  8. 执行第四行代码，判断条件count == 2是否成立：2 == 2成立；
  9. 进入if，执行第五行代码break；
  10. 循环结束；

一旦break语句执行，会立即结束离break最近的一个循环语句。

continue

continue也可以用来结束循环，但是它只能结束当前这一次循环，会立即进行下一次的循环条件判断。

1
2
3
4
5
6
7
8
let count = 0;
while(count < 3){
    count++;
    if(count == 2){
        continue;
    }
    console.log(count);
}

运行结果：

1
2
1
3

代码执行顺序分析：

  1. 执行第一行代码，创建一个变量count值为0；
  2. 执行第二行代码，判断循环条件count < 3成立，进入while；
  3. 执行第三行代码，count加 1 变为 1；
  4. 执行第四行代码，判断条件count == 2是否成立：1 == 2不成立；
  5. 跳过if，执行第七行代码，输出1；
  6. 执行第二行代码，判断循环条件count < 3成立，进入while；
  7. 执行第三行代码，count加 1 变为 2；
  8. 执行第四行代码，判断条件count == 2是否成立：2 == 2成立；
  9. 进入if，执行第五行代码continue；
  10. 执行第二行代码，判断循环条件count < 3成立，进入while；
  11. 执行第三行代码，count加 1 变为 3；
  12. 执行第四行代码，判断条件count == 2是否成立：3 == 2不成立；
  13. 跳过if，执行第七行代码，输出3；
  14. 执行第二行代码，判断循环条件count < 3不成立；
  15. 循环结束；

一旦continue语句执行，会立即结束离continue最近的一个循环语句的当前这一次循环。

我 秦始皇 打钱