IT课程 JavaScript基础 042_循环 while、for

循环语句是用于重复执行一段代码块的方法，JavaScript 提供了 while、do-while、for 等不同类型的循环语句。一个完整的循环体包括：初始化表达式、循环条件和迭代器。

`while` 循环

while 循环用于在条件为 true 的情况下，重复执行一段代码。循环体的单次执行叫作 一次迭代。任何表达式或变量都可以是循环条件，循环条件会被计算，结果会转化为布尔值。与 if 类似，如果循环体只有一条语句，也可以省略大括号 {…}，但不推荐这样。每次迭代之前都要检查条件。

示例：

1
let i = 0; // 初始化表达式，通常用于声明计数器变量，没有会报错 undefined
2
while (i < 5) { // 循环条件，为 `true`，循环将一直执行
3
  console.log(i);
4
  i++; // 迭代器，通常用于更新计数器变量，匹配循环条件
5
}

死循环示例：

1
let i = 0;
2
  while (1) { // 条件始终为 true 会进入死循环
3
    console.log(i);
4
    i++; // 通常适用此形式的计数器更新循环条件
5
    if (i >= 5) break;  // 注释掉即进入死循环模式
6
}

`do-while` 循环

do-while 循环与 while 循环类似，但它先执行一次循环体，然后检查条件是否为 true，如果条件为真时，则继续执行循环体。需要注意使用场景，只有在不管条件是否为真，都要 至少执行一次 循环体时，才使用 do-while，其它场景推荐 while 循环。每次迭代后都要检查条件。

示例：

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

`for` 循环

for 循环是一种更加复杂，但也最常适用的循环结构，用于重复执行一段代码。 for 循环包含三个部分：初始化表达式、循环条件和迭代器。以下是 for 循环的基本语法：每次迭代之前都要检查条件，可以使用其他设置。

示例：

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

死循环示例：

1
let i = 0;
2
  for ( ; ; ) { // 省略所有条件时，会进入死循环
3
    console.log(i);
4
    i++; // 通常适用此形式的计数器更新循环条件
5
  if (i >= 5) break;  // 注释掉即进入死循环模式
6
}

省略语句段

for 循环可以省略初始化表达式、循环条件或迭代器中的任意一个或多个，但分号 ; 必须保留。分号用于分隔各个部分，省略其中一个部分时仍需要保留相应的分号。

示例：

1
let x = 0;
2
for (; x < 5; x++) {
3
  console.log(x);
4
}
5
// 省略初始化表达式，将其移到循环外部，循环仍然有效
6

7
let y = 0;
8
for (;; y++) {
9
  if (y >= 5) {
10
    break;
11
  }
12
  console.log(y);
13
}
14
// 省略循环条件，通过 `if` 语句和 `break` 来终止循环
15

16
let z = 0;
17
for (; z < 5;) {
18
  console.log(z);
19
  z++;
20
}
21
// 省略迭代器，迭代器被移到循环体内，循环仍然有效

循环嵌套

嵌套循环是指在一个循环体内包含另一个完整的循环结构。嵌套循环在每次执行外部循环时，同时执行一次内部循环。

正三角示例：

1
// 示例 A
2
for (let i = 1; i <= 5; i++) { // 外部循环，控制行数，从 1 到 5。
3
  let row = ''; // 每次执行外部循环时，创建一个空字符串 `row`，用于存储当前行的星号。
4
  for (let j = 1; j <= i; j++) { // 内部循环，控制每行的星号数量，从 1 到当前行数 `i`。
5
    row += '⭐ '; // 将星号追加到 `row` 中，形成当前行的星号字符串。
6
  }
7
  console.log(row); // 输出当前行的星号字符串。
8
}

1
// 示例 B
2
for (let i = 1; i <= 5; i++) { // 外循环表示行数
3
    for (let j = 1; j <= i; j++) { // 内循环表示列
4
        document.write('⭐'); // 使用星号作为图形元素
5
    }
6
    document.write('</br>'); // 换行
7
}

倒三角示例：

1
// 示例 A
2
for (let i = 5; i >= 1; i--) { // 外部循环，控制行数，从 1 到 5。
3
  let row = ''; // 每次执行外部循环时，创建一个空字符串 `row`，用于存储当前行的星号。
4
  for (let j = 1; j <= i; j++) { // 内部循环，控制每行的星号数量，从 1 到当前行数 `i`。
5
    row += '* ';  // 将星号追加到 `row` 中，形成当前行的星号字符串。
6
  }
7
  console.log(row);  // 输出当前行的星号字符串。
8
}

1
// 示例 B
2
for (let i = 1; i <= 5; i++) { // 外循环表示行数
3
    for (let j = 0; j <= 5 - i; j++) { // 内循环表示列
4
        document.write('⭐'); // 使用星号作为图形元素
5
    }
6
    document.write('</br>'); // 换行
7
}

`break` 终止（结束、跳出）循环

break 用于终止（结束、跳出）当前的循环或 switch 语句，如果没有 break，则会继续执行后续 case（即发生“穿透”现象）。

“无限循环 + break” 的组合适用于不必在循环开始/结束时检查条件，但需要在中间甚至是主体的多个位置进行条件检查的情况。

示例：

1
let count = 0;
2
while (true) {
3
  console.log("循环中...");
4
  // 模拟某个条件，当满足时跳出循环
5
  if (count === 5) {
6
    console.log("满足条件，跳出循环");
7
    break;
8
  }
9
  count++;
10
}

`continue` 继续下一次（跳过）循环

continue 用于在循环中提前结束当前迭代，并继续下一次迭代。 continue 是 break 的 “轻量版”，它不会停掉整个循环。而是停止当前这一次迭代，并强制启动新一轮循环（如果条件允许的话）。

示例：

1
for (let i = 0; i < 8; i++) {
2
    if (i % 2 === 0) {
3
        continue; // 当 i 取余为 2 时跳过当前迭代，继续下一次迭代
4
    }
5
    console.log(i);
6
}

while 循环

do-while 循环

for 循环