iT邦幫忙

0

[快速入門前端 48] JavaScript:迴圈 (3) 雙重迴圈

  • 分享至 

  • xImage
  •  

雙重迴圈

雙重迴圈,又被稱為「巢狀迴圈」意思是兩個 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:
https://ithelp.ithome.com.tw/upload/images/20230719/20158509QJZfzwehoO.jpg
上圖我們可以看到是由一行五個、共有五行 * 符號組成的圖形,若我們要將此圖形用程式表達需要五行 *****,且每一行後面都必須加一個換行符 <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:
https://ithelp.ithome.com.tw/upload/images/20230719/20158509tvQY8971Km.jpg
分析以上圖形,可以看到第一行有 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
系列文章列表:[快速入門前端] 系列文章索引列表


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言