首页 » 技术分享 » JS05-循环的嵌套demo

JS05-循环的嵌套demo

　
评论关闭　1,302次浏览

循环的嵌套

所谓的循环嵌套,就是 for(){} 的循环体,也包含 for循环

   for(){
        for(){}
    }

for (var j = 1; j <= 5; j++) {
    for (var i = 1; i <= 5; i++) {
        console.log(`i是${i} , j是${j}`);
    }
    console.log('')
}

执行程序,先执行外层 j 的循环
①当 j 第一次循环时 j 是 1
此时要执行 j 的循环体 —
也就是 i 的循环
i的for循环是从1-5来执行循环,然后输出内容
i 的数值 是从1循环至5,j的数值始终是 1
当 i 1-5 循环结束了 执行 console.log(’’)
此时 j 的 第一次循环体完全执行完毕
执行 j 循环的步长 j++
② j 第二次循环 j 是 2
重新执行 循环体 i 从 1-5 循环 j 始终是 2
i循环结束,执行console.log() 循环体执行结束
j 的循环体执行结束, 执行 j 的步长 j++
…

特别注意:
1, 当 外层循环体 执行一次循环时 , 内层循环体 执行所有的循环
2, 当 内层循环执行时,外层循环数值是保持不变的
3, 内层循环体的循环变量,往往与外层循环变量相关联
也就是 i 往往与 j 有关系

相当于时钟的效果
当前 是 12:00:00
之后 秒针要 从 1-60 循环
此时 分钟是保持不变的
12:00:01 12:00:02 12:00:03 12:00:04…

demo1.

输出一个由 * 星号组成的三角形

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

分析 :
每行 : 输出 星号, 星号之后有空格 , 结束有换行
重复执行 : 将每行内容重复执行

//笨蛋方法：
    for(var i = 1 ; i <= 1 ; i++){
        // 循环5次,每次输出一个星星和一个空格
        document.write('*&nbsp;');
    }
    // 当前行的星星和空格输出之后,再输出一个换行
    document.write('<br>');

    for(var i = 1 ; i <= 2 ; i++){
        // 循环5次,每次输出一个星星和一个空格
        document.write('*&nbsp;');
    }
    // 当前行的星星和空格输出之后,再输出一个换行
    document.write('<br>');

    for(var i = 1 ; i <= 3 ; i++){
        // 循环5次,每次输出一个星星和一个空格
        document.write('*&nbsp;');
    }
    // 当前行的星星和空格输出之后,再输出一个换行
    document.write('<br>');

    for(var i = 1 ; i <= 4 ; i++){
        // 循环5次,每次输出一个星星和一个空格
        document.write('*&nbsp;');
    }
    // 当前行的星星和空格输出之后,再输出一个换行
    document.write('<br>');

    for(var i = 1 ; i <= 5 ; i++){
        // 循环5次,每次输出一个星星和一个空格
        document.write('*&nbsp;');
    }
    // 当前行的星星和空格输出之后,再输出一个换行
    document.write('<br>');

//便捷思路：
定义一个变量,是随机的总函数 5-15行
    var line = parseInt(Math.random()*( 15+1-5 ) + 5);

一行内容,循环的次数,也就是行数
j 是 从 1 至 5 的循环 表行数
    for (var j = 1; j <= line; j++) {
        // 一行内容 , 星星 空格 一行结束 有换行
        
        // j 是从1至5 变化的
        // 当第一次 j 循环 j 是 1, i 就是 <= 1 , i 循环 执行 1 次
        // 当第二次 j 循环 j 是 2, i 就是 <= 2 , i 循环 执行 2 次
        // 当第五次 j 循环 j 是 5, i 就是 <= 5 , i 循环 执行 5 次
        // 总结 : i 的循环次数 与 j 的数值 是相关联的
        for (var i = 1; i <= j; i++) {
            document.write('* ');
        }
        document.write('<br>');
    }

总结步骤
1,先定义最多一行输出内容的程序 – 内层循环
2,再定义变量,生成行数 – 外层循环
3,判断行数,与当前行,循环次数的关系

demo2. 99乘法表

外层循环,生成的是9行的行数
也就是将一行内容,循环执行9次

for (var j = 1; j <= 9; j++) {
    // 一行的内容,循环输出,乘法公式
    // 乘法公式的第一个数值是内层循环变量,第二个数值是外层循环变量
    for (var i = 1; i <= j; i++) {
        document.write(`${i}*${j}=${i * j} `);
    }
    // 每行结束之后,有一个换行
    document.write('<br>');
}

总结
1,先写内容最多的一行 — 内层循环
2,定义行数 — 外层循环
3,将两个循环套一起
4,将内层循环中,所有与外层循环变量相关的数值,做替换

转载自原文链接, 如需删除请联系管理员。

原文链接：JS05-循环的嵌套demo，转载请注明来源！

赞 0