双重循环嵌套执行原理！深刻认知！

为了能够更加深入的理解，这里通过九九乘法表的案例进行分析，深刻的认识到双重循环的一个执行的过程。

<script>
        // 99乘法口诀表
    var row = 9;
    var col = 9;
    var str = "";
    str += "";for(var i =1; i <= row; i++){
        str +="";for(var j =1; j <= i; j++){
            str +=""}
        str +="";}
    str +="

        

            
" + i + "*" + j + "=" + i * j + "
         
     
";
    document.write(str);
</script>

上面的案例中我们可以看到共有两个for循环，最外层的为外层循环，里层的为内层循环，外层循环实现的是九九乘法表的每一行，也就是生成了9行内容，那么内层循环生成的是每一列，这里可以理解为每一个单元格，也就是每一行中有九个单元格的内容，这样就组成了一个九行九列的表格内容。

这里先解释下for循环，for除了语句块，后面括号内分别有三个表达式，第一个为变量初始值，第二个为条件判断，第三个为变量变化值，那么在一个单一for循环中，它的一个执行的过程是：

1.先执行变量的初始化值，也就是var i=1；这里需要注意的是程序进入循环体内前只执行一次。

2.接着执行后面的i<=row;条件判断语句，并把i的值进行赋值，这时候i的值变为了1

3.接下来，如果i<=row;条件成立的话就直接进入循环体内，进行循环体内语句块的操作

4.循环体内语句块执行完毕之后，然后最后返回到变量变化值i++这边，进行i自增1的操作

5.最后再返回到条件判断语句这边i<=row;这里进行判断，如果成立，执行循环体内语句块，成立再返回到i++；然后再返回到条件判断，直到条件判断为false的时候，结束本次的循环操作。

以上就是一个单循环的操作过程，在我们了解了单循环体的一个操作流程之后，其实双循环我们就不难理解了，也就是两个循环体的操作而已，无非不同的是循环体内嵌套了又一个循环体。

双层循环还是按照上面单层循环的分析方式进行分析，但是最需要注意的地方在于，还是拿上面的案例来进行解析，最外层循环打印出来的都是行，这边通过改动代码加深理解。

<script>
    // 99乘法口诀表
    var str = "";
    str += "";for(var i =1; i <=9; i++){
        str +="";

        str +="";}
    str +="";
    document.write(str);
</script>

上面我们先把内层的循环去掉，然后打印出来的结果如下图：

可以很明显的能够看到，打印出来了9个tr标签对，那么我们再把内层的循环体加进去看一下效果，为了方便理解，这里代码稍作改动。

<script>
    // 99乘法口诀表
    var str = "";
    str += "";for(var i =1; i <=9; i++){
        str +="";for(var j =1; j <=9; j++){
            str +=""}
        str +="";}
    str +="

         

             
" + i + "*" + j + "=" + i * j + "
         
     
";
    document.write(str);
</script>

加入内层循环体之后就变成了如下的这种效果，可以很明显的能够看到，每一个tr标签内又插入了9个td的标签对，中间的内容我们暂时不用在意，这里只是分析循环的一个执行的过程。

所以这里就要了解的是，双重循环它的一个执行的过程是，首先外层的循环先执行一次条件，然后里面的内层循环体要把条件全部执行一遍，就如同这边内层循环设定的条件一样，内层会先循环个9次，到达第10次的时候条件为false了，然后才结束内层的循环操作，接下来再返回到外层的循环体，执行i++的操作，然后再进行i<=9的条件判断，满足要求了然后再进入到循环体，再次的将内层的循环执行完成之后，再返回到外层，依次往复，这样最后就能够看到图片呈现的效果了。

所以双重循环大致就是这样的一个执行的过程，我们其实只要明白了单层循环的执行过程，然后理解双重循环是外层执行一次，内层全部执行完，然后再返回到外层，这就是整个程序的一个走势过程。