JavaScript 初學者教學：認識 for 迴圈與應用

在學習程式語言的過程中，「重複執行程式碼」是非常常見的需求。

無論是列印數字、計算次方、還是處理資料集合，我們都會用到「迴圈」。

在 JavaScript 中，除了之前常見的 while 迴圈外，for 迴圈也是另一種強大且廣泛使用的語法。

本文將帶你認識 for 迴圈的基本結構與應用，並透過範例理解其用法。

為什麼要用 for 迴圈？

在撰寫程式的時候，我們經常會遇到需要「重複執行某段程式碼」的情境。

這種需求稱為「迴圈（loop）」，它能讓程式自動、快速地處理重複性工作，而不用一行一行地手動撰寫相同的指令。

以下是幾個常見的例子：

• 重複列印數字或字串
  例如，你想要印出從 0 到 10 的數字、或者印出一段歡迎訊息 5 次。這時候用迴圈就可以快速完成，避免重複寫同樣的 console.log()。
• 計算數值（例如 2 的次方）
  如果你想算出 2 的 10 次方，或是持續將某個值加總或乘積多次，迴圈可以幫助你自動重複運算，直到達到你想要的次數。
• 處理陣列中的每個元素
  當你有一個資料清單（例如數字陣列或名稱清單），需要針對每個元素做同樣的事情時（例如印出、修改或計算），迴圈可以讓程式有系統地逐一處理每一項資料。

為什麼不直接用 while 迴圈？

在 JavaScript 中，while 迴圈同樣能做到這些事情，你可以寫出像這樣的程式碼：

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

但是你會發現，使用 while 時：

1️⃣ 必須先在迴圈外「初始化」計數器（例如 let i = 0;）。
2️⃣ 需要在迴圈內「手動更新」計數器（例如 i++）。
3️⃣ 條件判斷也寫在另一個地方（例如 while (i < 5)）。

這樣做雖然可行，但程式的邏輯分散在不同地方，閱讀與維護起來比較麻煩。

為什麼 for 迴圈更簡潔？

for 迴圈的特點在於它把「初始化」、「條件判斷」、「更新迴圈狀態」這三個部分都集中寫在一起，語法統一又清楚，讓你可以一眼看出：

• 迴圈從哪裡開始？
• 什麼時候結束？
• 每次怎麼更新計數器？

for 迴圈的基本結構

for 迴圈的語法格式如下：

for (初始化; 條件判斷; 更新迴圈狀態) {
  // 每次迴圈要執行的程式碼
}

• 初始化：在迴圈開始前，設定計數器變數的初始值。
• 條件判斷：每次執行迴圈前，先判斷是否要繼續執行。
• 更新迴圈狀態：每次執行後，用來更新計數器的值，以便正確控制迴圈。

例如：

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

這樣寫不僅簡短，邏輯也集中在一行上，更容易理解和除錯。因此，當我們需要依序重複執行程式碼時，for 迴圈往往是更好的選擇。

範例：印出偶數

這個範例會印出從 0 到 12 之間的偶數，每次數字會間隔 2。

for (let number = 0; number <= 12; number = number + 2) {
  console.log(number);
}
// 輸出結果：
// → 0
// → 2
// → 4
// → 6
// → 8
// → 10
// → 12

程式運作邏輯

這段程式的目的是讓電腦自動幫你從 0 開始，印出所有小於或等於 12 的偶數。

你不需要手動寫七個 console.log()，只要寫一次，就能重複執行多次。

語法解析

初始化：let number = 0

在迴圈開始時，設定一個變數 number，並把它的初始值設為 0。

這是我們的「計數器」，用來追蹤目前印出的數字。

條件判斷：number <= 12

每次進入迴圈之前，程式會檢查目前的 number 是否小於或等於 12。

如果條件成立（例如 0 <= 12），就執行迴圈內的程式碼；如果不成立（例如 14 <= 12 為假），就結束迴圈。

執行主體：console.log(number);

只要條件成立，就執行這行程式，印出目前的 number。

更新狀態：number = number + 2

每次執行完一輪後，會將 number 加上 2。這樣下一輪會印出下一個偶數。

執行順序範例

範例：計算 2 的 10 次方

這個範例展示如何透過迴圈重複執行乘法運算，最終計算出 2 的 10 次方。

let result = 1;
for (let counter = 0; counter < 10; counter = counter + 1) {
  result = result * 2;
}
console.log(result);
// → 1024

程式運作邏輯

程式從數字 1 開始，每次乘以 2，總共乘 10 次。這樣等同於計算 2^10。

語法解析

初始化：let counter = 0

建立一個計數器變數 counter，用來記錄目前已經執行了幾次乘法，初始值為 0。

條件判斷：counter < 10

只要次數還沒到 10 次，程式就繼續執行迴圈；當次數達到 10（counter = 10）時停止。

執行主體：result = result * 2;

每次迴圈時，將目前的 result 乘以 2，並把結果存回 result。

更新狀態：counter = counter + 1

每次迴圈後，計數器增加 1，以記錄已完成的次數。

執行順序範例

小結

透過本文，你學會了：

✅ for 迴圈的基本結構與語法
✅ 如何用 for 迴圈列印偶數
✅ 如何用 for 迴圈計算 2 的 10 次方
✅ 為何 for 迴圈在某些情況下比 while 迴圈更適合

for 迴圈是初學者必學的重要語法，建議你多練習，試著改變初始值、條件與更新方式，觀察結果如何改變。

熟悉這些基礎後，未來在處理陣列或更複雜的資料時，你會更得心應手！