JavaScript 初學者教學：while & do 迴圈結構

更新日期： 2025 年 7 月 4 日

在撰寫程式時，我們經常會遇到需要重複執行相同程式碼的情境。

想像一下，當我們想輸出 0 到 12 的所有偶數，如果每次都手動寫一行 console.log，不僅麻煩，還容易出錯。

而且當需求變大，例如輸出 0 到 1000 的所有偶數時，手動寫程式碼幾乎不可能。因此，我們需要學會「迴圈」，讓程式能自動、有效率地重複執行一段程式碼。

在這篇文章中，我們將介紹 while 迴圈 與 do while 迴圈，並搭配實際範例，幫助你輕鬆理解這兩種常見的重複執行結構。

為什麼需要迴圈？

在撰寫程式時，很多時候我們需要重複做同一件事。以輸出 0 到 12 的偶數為例，如果用最直接的方式，你可能會寫出這樣的程式碼：

console.log(0);
console.log(2);
console.log(4);
console.log(6);
console.log(8);
console.log(10);
console.log(12);

這種寫法的問題

這種寫法看起來簡單，對於小範圍的數字（例如 0 到 12）或一次性需求是可以接受的。

但是，當需求稍微改變或規模變大時，這種方式立刻就顯現出它的缺點：

1️⃣ 工作量巨大
假如今天要輸出的是 0 到 1000 的所有偶數，你需要手動寫下 501 行 console.log，這不但耗時，而且極容易出錯（例如漏掉某個數字或打錯數字）。

2️⃣ 程式維護困難
如果需求改變，例如主管臨時要改成輸出 0 到 2000 的偶數，或者希望輸出奇數，那你可能需要重新寫一大堆程式碼。這樣的程式不容易維護，日後修改也很不方便。

3️⃣ 程式彈性差
程式應該具有彈性，能輕鬆因應不同的需求或數據範圍。手動一行一行寫死數字，不但缺乏彈性，也違背了「讓電腦幫我們做重複工作的初衷」。

迴圈解決了什麼問題？

為了減少工作量、避免錯誤、提升程式彈性，我們需要一種機制，能讓程式自動去「重複執行」某段程式碼，並在每次執行時根據條件判斷是否繼續執行或結束。

這就是 迴圈（loop） 的誕生原因。

迴圈的好處包括：

💡 自動化重複工作：只要設定好條件，程式會自動幫你完成大量重複的任務。
🔄 避免人為疏失：減少因手動複製貼上造成的錯誤。
⚡ 程式碼簡潔：幾行迴圈程式碼就能取代數百、數千行重複指令。
🛠 維護方便：只需要改一個地方（例如條件或範圍），整個程式的輸出就能跟著改變。

while 迴圈的基本結構

語法說明

在程式中，當我們希望重複執行某段程式碼，直到某個條件不再成立時，就會用到 while 迴圈。

while 迴圈的語法結構長這樣：

while (條件判斷) {
  // 重複執行的程式碼
}

執行順序為：

1️⃣ 檢查條件：先判斷 條件判斷 的結果。
2️⃣ 條件為 true → 執行大括號內程式碼。
3️⃣ 執行完後 → 回到條件判斷，再次確認條件是否仍成立。
4️⃣ 條件為 false → 結束迴圈，不再執行大括號內的程式碼。

換句話說，while 迴圈會持續執行，直到條件變成 false 為止。若一開始條件就是 false，則大括號內程式碼一次都不會執行。

flowchart TD
    A[開始] --> B{迴圈條件?}
    B -->|true 條件成立| C[執行迴圈內容]
    C --> B
    B -->|false 條件不成立| D[結束迴圈]

    style B fill:#ffeb3b
    style C fill:#e3f2fd

範例：輸出 0 到 12 的偶數

假設我們想要輸出從 0 到 12 的所有偶數，使用 while 迴圈可以這樣寫：

let number = 0;
while (number <= 12) {
  console.log(number);
  number = number + 2;
}

執行結果：

詳細解說

讓我們一步步拆解這段程式碼的運作邏輯：

1️⃣ 初始化變數
程式一開始，宣告一個變數 number 並賦值為 0。這個變數負責記錄目前要印出的偶數。

2️⃣ 判斷條件
while 迴圈每次開始都會先檢查條件：number <= 12

如果條件為 true，表示目前的 number 還在我們想要的範圍內（0~12），程式就會執行大括號裡的程式碼。
如果條件為 false，代表 number 已超過 12，程式會直接跳出迴圈，不再執行大括號內程式碼。

3️⃣ 執行程式碼
每當條件成立，程式會印出當前的 number，然後將 number 加上 2，準備印出下一個偶數。

4️⃣ 重複檢查條件
每次更新完 number 後，程式會回到 while 迴圈的起點，再次檢查條件，決定是否繼續執行或停止。

5️⃣ 迴圈結束
當 number 的值變成大於 12，例如變成 14 時，條件不成立（14 <= 12 為 false），迴圈結束。

視覺化流程

flowchart TD
    A[number = 0] --> B{檢查 number <= 12?}
    B -->|是 true| C[印出 number]
    C --> D[number = number + 2]
    D --> B
    B -->|否 false| E[迴圈結束]

    style B fill:#ffeb3b
    style C fill:#e3f2fd
    style D fill:#e3f2fd

while 迴圈應用：計算 2 的 10 次方

除了輸出數字，我們還可以用 while 迴圈進行運算。以下是一個計算 2^10 的例子。

let result = 1;
let counter = 0;
while (counter < 10) {
  result = result * 2;
  counter = counter + 1;
}
console.log(result);

執行結果：

詳細解說

1️⃣ 初始化變數

result = 1：因為數字的 0 次方是 1，這是我們計算次方的起點。
counter = 0：用來記錄已經乘了幾次 2。

2️⃣ 判斷條件
while 會檢查 counter < 10

如果成立（counter 還沒到 10），就繼續計算。
如果不成立（counter 已經到 10），就結束迴圈。

3️⃣ 執行程式碼
每次迴圈執行：

把 result 乘以 2。
將 counter 加 1，記錄次數。

4️⃣ 重複檢查條件
每次乘完後，都檢查次數是否已經到達 10。

5️⃣ 迴圈結束
當 counter 變成 10，條件不成立，迴圈停止，最後印出結果：1024。

while 迴圈的好處

✅ 可以讓程式重複執行，簡化大量重複性工作
✅ 程式碼簡潔，易於維護與修改
✅ 適用於不知道需要執行幾次、但有條件可判斷的情境

do while 迴圈的基本結構

語法說明

do while 迴圈 是一種重複執行程式碼的控制結構，它的特點是：
✅ 程式碼至少會執行一次，即使條件一開始就是 false。
✅ 執行完程式碼後，才進行條件判斷。
✅ 若條件為 true，會繼續執行下一次迴圈；若條件為 false，則結束迴圈。

它的基本語法如下：

do {
  // 要重複執行的程式碼
} while (條件判斷);

執行順序：
1️⃣ 先執行大括號內的程式碼。
2️⃣ 執行完畢後檢查條件判斷是否成立。
3️⃣ 如果條件為 true，繼續執行下一輪迴圈。
4️⃣ 如果條件為 false，停止迴圈。

這和 while 迴圈 最大的不同在於 條件判斷發生在執行之後。

為什麼需要 do while 迴圈？

有些情境下，我們必須讓程式碼至少執行一次，因為：

我們無法在執行前判斷條件（例如第一次需要用戶輸入資料後，才能判斷資料是否合法）。
某些操作的「第一步」就是必要的動作（例如顯示一個畫面、讀取初始值等）。

在這種情況下，do while 就非常適合。

範例：強迫使用者輸入姓名

假設我們想要程式要求使用者輸入名字，而且一定要輸入一個非空名字才能繼續。可以用以下 do while 迴圈：

let yourName;
do {
  yourName = prompt("Who are you?");
} while (!yourName);
console.log(yourName);

詳細解說

這段程式的執行邏輯可以拆解成以下步驟：

1️⃣ 變數宣告
宣告一個變數 yourName，用來儲存使用者輸入的名字。

2️⃣ 執行 do 迴圈主體
程式會先執行一次大括號裡的程式碼：

yourName = prompt("Who are you?");

👉 這行程式會跳出一個提示視窗，要求使用者輸入名字。輸入的值會被存入 yourName。

3️⃣ 條件判斷
程式接著會檢查：

while (!yourName);

👉 !yourName 是條件判斷：

如果 yourName 是空字串 ("") 或 null（例如按取消），條件會變成 true，表示需要繼續要求輸入。
如果 yourName 有值（例如 “Alice”），條件會變成 false，迴圈結束。

4️⃣ 結束後輸出結果
當使用者輸入了一個非空名字後，程式會跳出迴圈，並印出名字：

console.log(yourName);

視覺化流程

flowchart TD
    A[第一次執行程式碼<br/>取得名字] --> B{判斷名字是否為空?}
    B -->|是| C[再次執行程式碼<br/>要求重新輸入名字]
    C --> B
    B -->|否| D[跳出迴圈，輸出名字]

    style B fill:#ffeb3b
    style C fill:#ffcdd2
    style D fill:#c8e6c9

實務情境應用

do while 迴圈適合用在以下場景：

📌 強迫使用者輸入有效資料（如非空名字、密碼等）。
📌 確保至少做過一次某項操作（如顯示菜單、初始化資源）。
📌 驗證資料有效性，若不正確就重試。

例如：

let password;
do {
  password = prompt("請輸入密碼（不能為空）");
} while (!password);
alert("密碼設定成功！");

do while 和 while 差別對照

特點	while 迴圈	do while 迴圈
條件判斷位置	執行程式碼前先判斷條件	執行程式碼後才判斷條件
最少執行次數	可能一次都不執行	至少會執行一次
使用場景	條件可能一開始就不成立時	確保程式碼至少執行一次時

小結

在本篇文章中，我們學會了：

為什麼需要迴圈，以及手動重複程式碼的缺點。
如何使用 while 迴圈進行條件判斷與重複執行。
do while 迴圈的特點與實際應用。
while 與 do while 的主要差異與比較。

掌握這些迴圈結構後，你就能更有效率地撰寫需要重複執行的程式碼，讓程式更簡潔易讀！

如果你想了解更多迴圈應用，建議進一步學習 for 迴圈，它也是非常常見且實用的迴圈工具。

JavaScript 初學者教學：while & do 迴圈結構

為什麼需要迴圈？

這種寫法的問題

迴圈解決了什麼問題？

while 迴圈的基本結構

語法說明

範例：輸出 0 到 12 的偶數

詳細解說

視覺化流程

while 迴圈應用：計算 2 的 10 次方

詳細解說

while 迴圈的好處

do while 迴圈的基本結構

語法說明

為什麼需要 do while 迴圈？

範例：強迫使用者輸入姓名

詳細解說

視覺化流程

實務情境應用

do while 和 while 差別對照

小結

初學者指南：JavaScript 三元運算子

NPM 使用指南：如何管理 JavaScript 套件與依賴

新手指南：使用 Axios 實現高效的 HTTP 請求

初學者指南：JavaScript 中 undefined 和 not defined 的差異

初學者指南：深入了解 jQuery 事件處理

初學者指南：深入了解 JavaScript 陣列的參考（Reference）

發佈留言取消回覆

關於本站

為什麼需要迴圈？

這種寫法的問題

迴圈解決了什麼問題？

while 迴圈的基本結構

語法說明

範例：輸出 0 到 12 的偶數

詳細解說

視覺化流程

while 迴圈應用：計算 2 的 10 次方

詳細解說

while 迴圈的好處

do while 迴圈的基本結構

語法說明

為什麼需要 do while 迴圈？

範例：強迫使用者輸入姓名

詳細解說

視覺化流程

實務情境應用

do while 和 while 差別對照

小結

Similar Posts

發佈留言 取消回覆

關於本站

發佈留言取消回覆