JS05-循环的嵌套demo

循环的嵌套

所谓的循环嵌套,就是 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,将内层循环中,所有与外层循环变量相关的数值,做替换