雙重迴圈

雙重迴圈，又被稱為「巢狀迴圈」意思是兩個 for 迴圈嵌套在一起，成為一個 for 迴圈中又有另一個 for 迴圈的架構。

for (外層初始化變數; 外層迴圈條件;外層變化語句) { // 大迴圈
     for (內層初始化變數;內層迴圈條件; 內層變化語句) { // 小迴圈
         // 執行的程式
     };
};

雙重迴圈的執行順序有點像時鐘上時針跑一格、分針跑一圈的概念，當我們有兩層 for 迴圈時，大迴圈每跑一次，小迴圈會跑數次(跑完整個迴圈)，執行過程如下：

for (let i = 0; i < 2; i++) {
    console.log("大迴圈" + i);
    for (let j = 0; j < 2; j++) {
        console.log("小迴圈" + j);
    };
    console.log("小迴圈執行結束");
};
// 1. 進入雙重迴圈外層第一行，初始化外層變數 i = 0，判斷迴圈條件為 true
// 2. 條件為 true，執行 console，輸出 「大迴圈 0」
// 3. 執行內層迴圈，初始化內層變數 j = 0，判斷回圈條件為 true
// 4. 執行 console，輸出「小迴圈 0」，小迴圈區塊內程式執行完畢，變數 + 1，j 變為 1
// 5. 回到小迴圈第一行判斷條件，j 為 1 條件為 true，繼續執行 console，輸出「小迴圈 1」，並將 j + 1
// 6. j 為 2，不符合條件，跳出內層回圈回到外層迴圈，輸出「小迴圈執行結束」
// 7. 外層迴圈區塊內執行結束，變數 + 1，i 為 1
// 8. 回到外層迴圈繼續執行條件判斷條件判斷

// 輸出順序
// 大迴圈0 -> 小迴圈0 -> 小迴圈1 -> 小迴圈執行結束
// 大迴圈1 -> 小迴圈0 -> 小迴圈1 -> 小迴圈執行結束

雙層迴圈實際應用

印星星 1：

上圖我們可以看到是由一行五個、共有五行 * 符號組成的圖形，若我們要將此圖形用程式表達需要五行 *****，且每一行後面都必須加一個換行符 <br/>。這時候我們會發現其實要印五行、十行、或者一百行，其實都是一個重複性的動作，那就可以使用迴圈來簡化我們的流程。

for (let i = 0; i < 5; i++) { // 0、1、2、3、4 共五次
    document.write("*****<br/>"); // 每次都顯示一整行
}

使用 for 迴圈後我們可以發現不管要寫幾行都很簡單，只要調整迴圈結束條件就可以了，但若我們一行要顯示不只五個 * 符號的話還是需要手動打出來。不過當利用雙層迴圈的特性，讓外層迴圈控制行數，而內層迴圈控制一行有幾個星星就很簡單了。

for (let i = 0; i < 5; i++) { // 控制有幾行
    for (let j = 0; j < 5; j++) { // 每一行有幾個星星
        document.write("*");
    }
    // 小迴圈結束代表那一行內容結束，要換到下一行時需要加換行符
    document.write("<br>");
};

印星星 2：

分析以上圖形，可以看到第一行有 1 顆星星，第二行有 2 個星星，以此類推.... 由已知規律分析如下：

//         行數     星星數   變數 i 的值
// *      第 1 行     1         0
// **     第 2 行     2         1
// ***    第 3 行     3         2
// ****   第 4 行     4         3
// *****  第 5 行     5         4

可以看出若外層迴圈的變數 i 從 0 開始，每跑一圈 + 1，那每一行的星星數就會是 i+1，所以外層迴圈不變，只要將控制每行星星數量的小迴圈終止條件改為 i+1 就可以輸出正確的圖形。

for (let i = 0; i < 5; i++) { // 外層迴圈邏輯不變，控制行數
    for (let j = 0; j < i+1; j++) { // 每行的星星數為 i + 1
    document.write("*");
    }
    document.write("<br>");
};

判斷質數：
在上篇文章中我們有提到如何判斷質數，這邊就來簡單複習一下。

let input = 3; // 判斷 input 是否為質數
let output = true; // 是否為質數，預設為 true
for (let i = 2; i < input; i++) {
    if (input % i == 0) {
        // input % i == 0 成立代表它可以被某數整除，代表它不是質數
        output = false; // 不是質數，改變變數的值
        break; // 只要有一個數可以被整除就不是質數了，所以可以直接跳出迴圈不用檢查其他的
    }
};
// 跑完迴圈後可以檢查變數 output 的值，若為 true 表示為質數
if (output == true) {
    console.log("是質數");
}
else {
    console.log("不是質數");
}

判斷區間中所有的質數：
進階版，輸出 1 ~ 100 中所有的質數。
首先我們先來分析計算了流程，我們需要將 1 到 100 的所有數都跑一遍並檢查是否為質數，所以我們需要先寫一個回圈，並在迴圈中驗證該變數是否為質數：

for (let i = 1; i < 100; i++) {
    // 驗證 i 是否為質數
    // 結合上個範例的質數判斷
    let output = true; // 預設 i 是質數
    for (let j = 2; j < i; j++) {
        if (i % j == 0) {
            // i % j == 0 成立代表它可以被某數整除，代表它不是質數
            output = false; // 不是質數，改變變數的值
            break; // 只要有一個數可以被整除就不是質數了，所以可以直接跳出迴圈不用檢查其他的
        }
    };
    if (output == true) {
        console.log(i);
    }
}

Tips：
在撰寫雙重迴圈時一定要注意內層和外層各自有完整的迴圈三要素：變數初始化、結束條件、及每跑一圈變數的變化。

上一篇：[快速入門前端 47] JavaScript：迴圈 (2) for 和 while 比較
下一篇：[快速入門前端 49] JavaScript：迴圈 (4) break 和 continue
系列文章列表：[快速入門前端] 系列文章索引列表