双重循环的嵌套执行原理

for 循环是我们在JavaScript 中常用的循环控制语句，对于单层的 for 循环的执行原理是很好理解的。
for (var i = 1;i <= 5 ;i ++){
document.write(我是第${i}次循环)
document.write(’
’)
}
此单层 for 循环的输出结果可以很的展示它的执行原理。

其执行过程可以这样描述：
1、var i = 1;定义控制变量；
2、i <= 5;循环语句执行判断，（true 执行循环体语句，false for执行语句结束）；
3、执行循环体语句，输出“我是第i次循环”，i 为控制变量的值；
4、执行 i ++ ; 控制变量改变。
此时完成一次循环，之后循环执行2、3、4，三个步骤，直到2判断为 false。
当 for 循环为双重循环（即 for 的嵌套语句）时，内外层 for 语句的执行原理其实是和上面的执行原理是相同的，示例如下：
for (var i = 1;i <= 5 ;i ++){
document.write(我是外层第${i}次循环)
document.write(’
’)
for (var j = 1; j <= 5 ;j ++){
document.write(我是内层第${j}次循环)
document.write(’ ’)
}
document.write(’
’)
}
其输出内容同样可以很好的展示其执行原理。

其每一个 for 的执行过程和单层 for 是相同的，双重 for 循环可以这样描述：
为了更好地描述，结合单层 for语句的执行步骤，将外层循环的步骤1、2、3、4描述为外1、外2 、外3、外4，将内层循环的步骤1、2、3、4描述为内1、内2、内3、内4。则双重循环的执行原理描述为：
外1 → 外2 → 外3 
内1 → 内2 → 内3 → 内4 →
内2 → 内3 → 内4 →
…… …… ……
内2 false 内层for结束 →
外4 →
外2 → 外3 →
内1 → 内2 → 内3 → 内4 →
内2 → 内3 → 内4 →
…… …… ……
内2 false 内层for结束 →
外4 →
…… …… ……
外2 false 外层 for结束，双重循环结束。
内层循环语 for 可以看做是外层循环语句 for的循环体语句。