雙重迴圈,又被稱為「巢狀迴圈」意思是兩個 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
系列文章列表:[快速入門前端] 系列文章索引列表