JS循环语句深度解析：嵌套for、while与do...while

前言

本文是JavaScript基础系列的第四篇，重点讲解三种循环结构的进阶用法：嵌套for循环 （含图形打印、九九乘法表、质数判断等经典案例）、while循环 （适合不确定次数的循环场景）以及do...while循环（至少执行一次的循环）。文末附有循环类型对比总结，帮助你在实际开发中选择最合适的方案。

一、嵌套for循环

1. 什么是循环嵌套？

循环嵌套是指在一个循环语句内部再定义一个循环语句的语法结构。最常见的就是在for循环中再嵌套一个for循环，称为双重for循环。

2. 语法结构

复制代码

for (外层初始化表达式; 外层条件表达式; 外层操作表达式) {
    for (内层初始化表达式; 内层条件表达式; 内层操作表达式) {
        // 执行语句
    }
}

3. 执行思路

内层循环 可以看作外层循环的循环体语句。
外层循环每执行1次，内层循环会执行全部次数。
可以理解为：外层循环控制行数，内层循环控制每行的内容。

4. 图形打印示例

（1）打印矩形（5行5列）

复制代码

for (let i = 0; i < 5; i++) {
    for (let j = 0; j < 5; j++) {
        document.write('*');
    }
    document.write('<br/>');
}

输出结果：

复制代码

*****
*****
*****
*****
*****

（2）打印正直角三角形

复制代码

for (let i = 1; i <= 5; i++) {
    for (let j = 0; j < i; j++) {
        document.write('*');
    }
    document.write('<br/>');
}

输出结果：

复制代码

*
**
***
****
*****

规律：内层循环的次数 j < i，随着外层 i 增大，每行星号数递增。

（3）打印倒直角三角形

复制代码

for (let i = 0; i < 5; i++) {
    for (let j = 5; j > i; j--) {
        document.write('*');
    }
    document.write('<br/>');
}

输出结果：

复制代码

*****
****
***
**
*

规律：内层循环从5开始递减，每行星号数递减。

5. 九九乘法表

复制代码

for (let i = 1; i <= 9; i++) {
    for (let j = 1; j <= i; j++) {
        document.write(`${j} * ${i} = ${i * j}&nbsp;&nbsp;`);
    }
    document.write('<br/>');
}

输出效果：

复制代码

1 * 1 = 1  
1 * 2 = 2  2 * 2 = 4  
1 * 3 = 3  2 * 3 = 6  3 * 3 = 9  
...

关键点 ：内层循环条件 j <= i，确保只打印下三角部分。

6. 经典算法：输出1-100之间的质数

质数定义：大于1的自然数，除了1和自身外，不能被其他自然数整除。

方法一：正向判断（计数法）

复制代码

for (let i = 2; i <= 100; i++) {
    let count = 0;
    for (let j = 2; j < i; j++) {
        if (i % j != 0) {
            count++;
        }
    }
    if (count == i - 2) {
        console.log(`${i}是质数`);
    }
}

方法二：反向判断（标志位法，推荐）

复制代码

for (let i = 2; i <= 100; i++) {
    let flag = true; // 假设i是质数
    for (let j = 2; j < i; j++) {
        if (i % j == 0) {
            flag = false; // 发现能被整除，不是质数
            break; // 跳出内层循环，提高效率
        }
    }
    if (flag) {
        console.log(`${i}是质数`);
    }
}

推荐理由：一旦发现能被整除，立即标记并跳出内层循环，减少不必要的计算。

二、while循环

while语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。

适用场景 ：不确定循环次数时，优先使用while循环。

1. 语法结构

复制代码

初始化表达式;
while (条件表达式) {
    // 循环体代码
    // 更新表达式
}

2. 执行流程

判断条件表达式是否为true
若为true，执行循环体代码
循环体执行完毕后，再次判断条件表达式
直到条件为false时退出循环

3. 注意事项

while循环里也需要计数器（初始化变量）
while循环里应该有操作表达式来完成计数器的更新，防止死循环

4. 示例

（1）打印1-100岁

复制代码

let i = 1;
while (i <= 100) {
    document.write(`${i}岁<br/>`);
    i++;
}

（2）计算1-100整数和

复制代码

let i = 1, sum = 0;
while (i <= 100) {
    sum += i;
    i++;
}
console.log(sum); // 输出5050

（3）循环弹窗直到输入"我爱你"

复制代码

let str;
while (true) {
    str = prompt('你爱我吗？');
    if (str === '我爱你') {
        break; // 输入正确，退出循环
    }
}

三、do...while循环

do...while语句是while语句的一个变体，该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。

1. 语法结构

复制代码

do {
    // 循环体代码
} while (条件表达式);

2. 特点

先执行一次循环体，再判断条件
如果条件表达式结果为真，则继续执行循环体，否则退出循环
do...while可以保证循环体至少执行一次 ，而while不行

3. 示例：告白成功

复制代码

let str;
do {
    str = prompt('你爱我吗？');
} while (str !== '我爱你');

对比while版本 ：使用do...while时，即使第一次就输入"我爱你"，也会先执行一次提示框，体验上略有不同。

四、三种循环对比总结

循环类型	特点	适用场景
for循环	明确循环次数，计数器、条件、更新集中在一起	遍历数组、打印图形、已知次数的循环
while循环	先判断后执行，可能一次都不执行	条件满足时才循环，不确定循环次数
do...while循环	先执行后判断，至少执行一次	至少需要执行一次的场景（如用户输入验证）

选择建议

知道要循环多少次 → 用for
不知道次数，但知道何时停止 → 用while
无论如何都要先执行一次 → 用do...while

总结

本文系统讲解了JavaScript中三种循环结构的进阶用法：

嵌套for循环：外层控制行数，内层控制列数，适合打印图形、表格等二维结构。
while循环：先判断后执行，适合条件驱动的循环场景。
do...while循环：先执行后判断，保证至少执行一次。

通过质数判断、九九乘法表、图形打印等经典案例，相信你已经掌握了循环的实际应用技巧。下一篇将继续深入数组、函数等进阶内容，欢迎持续关注！