迴圈

迴圈 (Loop)，是指在符合條件下重複執行某區塊內的程式直到條件結束 (為 true)主要分為 while、do while 和 for 三種類型，下面我們就來簡單介紹這三種迴圈吧。

for 迴圈

for 迴圈 是最常見的迴圈形式，會在滿足條件時不斷重複執行某程式。在 for 的括號內必須包含三個必要項目：控制迴圈次數的變數開始值、迴圈終止條件、以及 每跑一圈變數的變化。

語法：

for ( 變數開始值; 終止條件; 變數變化 ) {
	重複執行的程式
};

範例 (輸出數字 1 ~ 3)：

// 輸出 1 ~ 3
for (let i = 1; i <= 3; i++) { // i 從 1 開始，直到 3 結束，i++表示每跑完一個輪迴後i+1
    console.log(i);
};

// 執行過程
// 1. 執行 for 括號中的 let i = 1，初始化變數
// 2. 執行括號中的 i <= 3，判斷是否執行循環
      // 若為 true 則執行區塊中的程式
      // 若為 false 則不循環，直接跳出此 for 區塊
// 3. 區塊中程式執行完畢後會執行變數更新 (i++)
// 4. 變數更新後回到步驟 2 進行下一輪的判斷

執行結果：

for 結合 if-else 判斷

範例：

• 輸出 1 ~ 20 的偶數

// 輸出 1 到 20 中的偶數
// 先跑 1 ~ 20 的迴圈
for (i = 1; i <= 20; i++) {
    if (i % 2 == 0) { // 用除 2 餘數為 0 判斷 i 是否為偶數
      console.log(i); // 若 i 為偶數則輸出
    }
};

• 計算 1 ~ 20 的偶數數量

// 要計算數量，所以需要有一個變數來存放數量
let count = 0; // 若 count 宣告寫在 for 迴圈中，則每跑一次迴圈都會宣告一次變回 0，失去計算意義

// 跑 1 ~ 20 的迴圈
for (i = 1; i <= 20; i++) {
    if (i % 2 == 0) { // 用除 2 餘數為 0 判斷 i 是否為偶數
      count++; // 若為偶數，則偶數數量 + 1
    }
};
console.log(count); // 跑完迴圈後輸出總數

While

while 在一開始會對條件進行判斷，若為 true 則執行區塊內的程式，執行完畢後繼續回到 while 條件再進行一次判斷，直到判斷為 false 跳出 while 迴圈。
語法：

// 語法
while (條件) {
    要重複執行的程式
}
// 執行過程
// 判斷 while 的條件
    // 若為 true
        // 執行區塊中的程式
        // 執行完畢後回到最上再判斷 while 的條件
    // 若為 false，則跳出 while 迴圈

雖然 while 比較自由，只需要先設定條件就可以跑迴圈，不需要像 for 一樣規定變數開始值和變數變化的寫法，但在迴圈中還是需要注意這三個必要的要素，否則會變成無限迴圈 (迴圈永遠不會停止)，導致網頁掛掉。
範例：

// 印出 1 ~ 10

// 正確範例
let count = 1;
while (count <= 10) {
    console.log(count);
    count++; // 每次執行最後 count 必須 + 1
}

// 錯誤範例：count 永遠都是 1，永遠不會符合迴圈停止條件
let count = 1;
while (count <= 10) {
    console.log(count); // 會印出無限多個 1
}

do while

do while 與 while 的差異在於 while 會先判斷條件再執行，而 do while 則是先執行 (do) 再進行判斷，也就是說無論如何 do while 都會先執行一次再進行條件判斷。

語法：

// 語法
do {
    // 要執行的程式
}while (條件)

// 執行過程
// 執行 do
// 判斷 while 的條件
    // 若為 true
        // 執行區塊中的程式
        // 執行完畢後進行 while 條件判斷
    // 若為 false，則跳出 do while 迴圈

範例：
不論判斷是否成立，do while 都會執行一次。

let num = 11;
// 變數 num 11 不符合判斷條件，但還是會執行一次
do {
    console.log(num);
    num++;
}while(num < 10)

上一篇：[快速入門前端 45] JavaScript：條件判斷 (2) switch 語句
下一篇：[快速入門前端 47] JavaScript：迴圈 (2) for 和 while 比較
系列文章列表：[快速入門前端] 系列文章索引列表