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 循環