循环嵌套
注意: 外层循环的变量 与 内层循环的变量 不要相同
for (var i = 0; i < 3; i++) {
console.log(i)
}
`
for (var j = 0; j < 3; j++) {
for (var i = 0; i < 3; i++) {
console.log(i)
}
console.log('j 的值为: ', j)
}
/**
* 第一次执行:
* j === 0 运行条件 j < 3 符合条件, 开始执行内部代码
*
* 内部代码:
* 内部循环第一次执行:
* i === 0 运行条件 i < 3 符合条件, 开始执行内部代码
* console.log(i) 此时会打印 0
* i++ 也就是下一轮循环开始的时候 i 的值变为了 1
* 内部循环第二次执行:
* i === 1 运行条件 i < 3 符合条件, 开始执行内部代码
* console.log(i) 此时会打印 1
* i++ 也就是下一轮循环开始的时候 i 的值 变为了 2
* 内部循环第三次执行:
* i === 2 运行条件 i < 3 符合条件, 开始执行内部代码
* console.log(i) 此时会打印2
* i++ 也就是下一轮循环开始的时候 i 的值 变为了 3
* 内部循环第四次执行:
* i === 3 运行条件 i < 3 目前不符合条件, 结束循环!!!!
*
* console.log(j) 此时会出输出什么 0
*
* j++ 也就是 下一次循环开始的时候 j 的值变了 1
*
*
* 第二次执行:
* j === 1 运行条件 j < 3 符合条件, 开始执行内部代码
*
* 内部代码:
* 内部循环第一次执行:
* i === 0 运行条件 i < 3 符合条件, 开始执行内部代码
* console.log(i) 此时会打印 0
* i++ 也就是下一轮循环开始的时候 i 的值变为了 1
* 内部循环第二次执行:
* i === 1 运行条件 i < 3 符合条件, 开始执行内部代码
* console.log(i) 此时会打印 1
* i++ 也就是下一轮循环开始的时候 i 的值 变为了 2
* 内部循环第三次执行:
* i === 2 运行条件 i < 3 符合条件, 开始执行内部代码
* console.log(i) 此时会打印2
* i++ 也就是下一轮循环开始的时候 i 的值 变为了 3
* 内部循环第四次执行:
* i === 3 运行条件 i < 3 目前不符合条件, 结束循环!!!!
*
* console.log(j) 输出的值 1
*
* j++ 也就是 下一次循环开始的时候 j 的值变为了 2
*
*
* 第三次执行:
* j === 2 运行条件 j < 3 符合条件, 开始执行内部代码
*
* 内部代码:
* 内部循环第一次执行:
* i === 0 运行条件 i < 3 符合条件, 开始执行内部代码
* console.log(i) 此时会打印 0
* i++ 也就是下一轮循环开始的时候 i 的值变为了 1
* 内部循环第二次执行:
* i === 1 运行条件 i < 3 符合条件, 开始执行内部代码
* console.log(i) 此时会打印 1
* i++ 也就是下一轮循环开始的时候 i 的值 变为了 2
* 内部循环第三次执行:
* i === 2 运行条件 i < 3 符合条件, 开始执行内部代码
* console.log(i) 此时会打印2
* i++ 也就是下一轮循环开始的时候 i 的值 变为了 3
* 内部循环第四次执行:
* i === 3 运行条件 i < 3 目前不符合条件, 结束循环!!!!
*
* console.log(j) 输出的值 2
*
* j++ 也就是 下一次循环开始的时候 j 的值变为了 3
*
* 第四次执行:
* j === 3 运行条件 j < 3 目前不符合条件了, 所以结束循环
*/
新需求: 在页面输出一个 9 * 9 的方阵
for (var j = 0; j < 9; j++) { // 外层循环: 控制有多少行
for (var i = 0; i < 9; i++) { // 内层循环: 控制一行有多少个 *
document.write('*')
}
document.write('<br>')
}
新需求: 在页面输出一个三角形 第一行输出一个 第二行输出两个 第三行输出三个 .... 第九行输出九个
for (var j = 1; j <= 9; j++) { // 外层循环: 控制有多少行
for (var i = 0; i < j; i++) { // 内层循环: 控制一行有多少个 *
document.write('*')
}
document.write('<br>')
}
/**
* 第一外层循环:
* j === 1 循环条件 j <= 9 符合条件, 开始执行内部代码
* 内部代码开始执行
* 1. 内层循环开始执行
* 内层循环第一次执行
* i === 0 循环条件 i < j 符合条件, 开始执行内部代码
* document.write('*')
* i++ 下一轮开始的时候 i 自增1 变为 1
* 内层循环第二次执行
* i === 1 循环条件 i < j 不符合条件, 结束内层循环
* 2. document.write('<br>')
* j++ 下一次 外层循环开始的时候 j 自增1 变为 2
*
* 第二次外层循环:
* j === 2 循环条件 j <= 9 符合条件, 开始执行内部代码
* 内部代码开始执行
* 1. 内层循环开始执行
* 内层循环第一次执行
* i === 0 循环条件 i < j 符合条件, 开始执行内部代码
* document.write('*')
* i++ 下一轮开始的时候 i 自增1 变为 1
* 内层循环第二次执行
* i === 1 循环条件 i < j 符合条件, 开始执行内部代码
* document.write('*')
* i++ 下一轮开始的时候 i 自增1 变为 2
* 内层循环第三次执行
* i === 2 循环条件 i < j 不符合条件, 结束本轮循环
* j++ 下一次外层循环开始的时候 j 自增1 变为 3
*/
