[快速入门前端 48] JavaScript：迴圈 (3) 双重迴圈

双重迴圈

双重迴圈，又被称为「巢状迴圈」意思是两个 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; // 是否为质数，预设为 truefor (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
系列文章列表：[快速入门前端] 系列文章索引列表