一文彻底搞懂for循环

学for循环很简单，但是控制循环嵌套的停止逻辑很恶心。

单个for的语法

for(初始化变量1;判断语句2;变量更新3){
  //4循环体
}

其执行的顺序是：首先1，进行变量的初始化，然后2，判断是不是符合条件，符合了就执行循环体4，最后执行完之后进行3变量的更新，第一轮结束，将更新后的变量回到判断语句2，判断是否符合决定是否执行循环体4。

其实单个的for循环并没有什么值得注意的，想要跳出循环就只需要设置好判断的条件以及不要忘了变量更新就可以了。

例如：打印一个星号的方阵

    for (var i = 1; i <= 5; i++) {
      document.write('***** <br/>');
    }

声明i=1，只要i小于5就执行循环体打印星号，i=1 小于5，打印一次，i=2小于5，打印第二次.......依次增加到第6次的时候，i=6就已经不符合判断的条件（i <= 5），所以自动跳出循环。

多个for的嵌套

我们学习for的嵌套才是重点，接下来一起看吧

    for (初始化变量1; 变量1的判断; 变量1更新) {  
      for (初始化变量2; 变量2的判断; 变量2的更新) {
        //循环体2
      }
    }

其实就这个而言，for变量2整个循环就是第一个for循环的函数体，执行的顺序是：初始化变量1，然后进行变量1的判断，如果符合就执行循环体（第二个for循环，初始化变量2，变量2的判断，符合了就执行循环体2，然后进行变量2的更新，然后更新后抛回变量2的判断，直到内层for循环完毕，跳出去）此时循环体执行完毕，进行第一个for循环变量的更新。所以说就是第一次大哥给个信号，小弟内层for循环跑了好多下，直到不符合才和大哥说。

例如：单个*打印星号方阵

    for (var i = 1; i <= 5; i++) {  // 控制行数
      for (var j = 1; j <= 5; j++) { // 控制列数
        document.write('* ');
      }
      document.write('<br/>');
    }

刚刚是直接用5个星来打印星号方阵，现在是用一个*打印整个方阵。

执行顺序：声明i，判断i小于5然后执行循环体（也就是内层for），然后在内部小弟开始运作：声明j，j小于5，然后执行document.write('* ');执行完了变量j更新一下，然后抛回j小于5的判断，然后再决定执行document.write('* ');，在进行变量j的更新，直到最后，j=6了，不符合小弟的能力范围了，就回去和大哥说，也就是到了document.write('<br/>');，然后进行变量i的更新，然后再这样进入内层for循环，重新定义j，执行下去。周而复始，直到最后外边i不符合条件了，就可以结束了。

玩出花样

其实循环的重点就是判断语句以变量的更新。所以，我们只要知道，什么时候让循环停止就可以了。

直角三角形打印

    // 三角形打印,控制每一行星星的个数
    document.write('<hr />');
    for (var i = 1; i <= 5; i++) { // 控制行数
      for (var j = 1; j <= i; j++) {  // 控制列数
        document.write('* ');
      }
      document.write('<br/>');
    }

等腰三角形打印

    for (var i = 1; i <= 5; i++) { // 控制行数
      for (var k = 1; k <= 5 - i; k++) {//控制空格 行数和空格数成反比
        document.write('&nbsp;')
      }
      for (var j = 1; j <= i; j++) {//控制每列星星个数,输出星星个数
        document.write('* ');
      }
      document.write('<br/>');
    }