大家好！今天來聊聊JavaScript中的while循環，這個控制流語句在處理重複性任務時非常實用，特別適合那些循環次數不確定的場景。讓我來給你詳細講解一下！

一、基本語法

while循環的基本語法非常簡單：

while (condition) {
  // 循環體代碼塊
}

其中：

  • condition 是一個布爾表達式，表示循環的條件
  • 如果條件為true，循環體中的代碼會繼續執行
  • 如果條件為false，循環終止，程序跳出循環

二、工作原理

while循環的工作流程是：

  1. 首先檢查條件表達式
  2. 如果條件為true，執行循環體
  3. 執行完循環體後，再次檢查條件
  4. 重複步驟2-3，直到條件為false，然後跳出循環

重要提示：while循環先檢查條件，如果初始條件不滿足，循環體將不會執行。

三、實用代碼示例

1. 基本用法：打印數字

let i = 1;
while (i <= 5) {
  console.log(i); // 輸出 1, 2, 3, 4, 5
  i++; // 遞增操作
}

這個例子展示瞭如何使用while循環打印1到5的數字。

2. 處理數組

let array = [1, 2, 3, 4, 5];
let index = 0;
while (index < array.length) {
  console.log(array[index]); // 打印數組中的每個元素
  index++; // 更新索引
}

這個示例展示瞭如何用while循環遍歷數組。

3. 使用break提前退出循環

let i = 0;
while (i < 10) {
  if (i === 5) {
    break; // 當i等於5時，提前退出循環
  }
  console.log(i);
  i++;
}

4. 使用continue跳過當前迭代

let i = 0;
while (i < 5) {
  i++;
  if (i === 3) {
    continue; // 跳過i等於3的情況
  }
  console.log(i);
}
// 輸出: 1, 2, 4, 5

5. 計算階乘

function factorial(n) {
  let result = 1;
  let i = 1;
  while (i <= n) {
    result *= i;
    i++;
  }
  return result;
}

console.log(factorial(5)); // 輸出 120 (5! = 5×4×3×2×1)

四、while與do...while的區別

這是初學者常混淆的地方：

  • while循環：先檢查條件，再執行循環體（條件不滿足時，循環體不執行）
  • do...while循環：先執行一次循環體，再檢查條件（至少執行一次，即使條件一開始就不滿足）
// while循環
let j = 0;
while (j > 5) {
  console.log(j);
  j++;
}
// 這個循環不會執行任何內容，因為初始條件不滿足

// do...while循環
let k = 0;
do {
  console.log(k);
  k++;
} while (k > 5);
// 這個循環會執行一次，輸出0

五、常見注意事項

  1. 避免無限循環：確保循環體內有改變條件的代碼，否則可能導致瀏覽器崩潰
  2. 條件表達式：條件可以是任何表達式，不侷限於簡單的比較
  3. 循環變量：通常需要在循環體內更新循環控制變量
  4. 性能考慮：在簡單條件判斷下，while循環非常高效