双层for循环的理解

双层for循环对于我这种小白来说简直有点烧脑，因为刚接触JS的话，逻辑思维还没有培养起来，这个时候碰到这样的循环的时候就有些理解吃力了，下面我讲一下自己的理解，如果其他大佬有不同意见欢迎留言。

  <script>
    // 打印三角形
    // 外城循环来控制行号，内层循环来看当前行有多少个
    for (var i = 1; i <= 5; i++) {
      // 第i行有i颗星，也就是说打印*这行代码应该重复i次
      for (var j = 1; j <= i; j++) {
        document.write('*')
      }
      document.write('<br>')
    }
  </script>

这是一个打印三角形的双层for循环，很简单，但是理解起来可能有一点点不容易，特别是逻辑思维还没有培养起来的时候，下面我细细的讲一下我的理解。
首先我们要知道，for循环的运行流程。

我画的这个图是for循环的运行流程，它从1开始运行 i=1，然后运行 i < 10，再然后运行document，再最后才到 i++。并且，顺序1，只是第一次运行一次，后面就不运行了，这是它的一个特点。当然，跳出循环也是再顺序2，因为如果顺序2不满足循环了，自然就跳出了。了解了for循环的运行流程，我们再回来双层for循环。
我们以三角形为例。
这个三角形应该怎么写?我们先思考，要写这个三角形，用一层循环来做的话好不好做，为什么？我觉得答案应该是不好做，因为这个三角形有五行，每一行个数也不一样，如果我用循环的话，那我是循环行，还是循环每一行的个数呢？所以得出答案一层循环做不了，或者是不好做。既然这样的话那我思考两层循环，我让外层的循环来循环行数，因为你有行了，行里面才能写五角星。
图中的 第一层for 是来确定行的，比如 i 运行1 的话，那么第二层的for就该在第一行写星星了，写几个呢？我规定，你最多不能超过行数（i）。也就是第一行你只能画一个星星，第二行你可以画两个，以此内推。 两个for都执行到最后的话，j++就变成2了，上面的 i++也就成了2了，什么意思？就是说，第一层for要开始执行 i = 2了，开始确定第二行了，这时 j 的值虽然还是 j <= i,但是 i 现在是2了，这个时候你就要在 j=1 的时候执行，一次，j = 2 的时候执行一次，因为你的n值变了，所以你需要重新开始走，并且走到不能走的时候才能停，那什么时候不能走了？j > i 的时候就不满足第二层循环的条件了，也就走不了了，这个时候代码的运行也就会继续回到第一层的 i++上面，把 i 的值赋为 3，继续前面的流程。

以上便是个人的一些见解，可能有不对的地方，如果有大佬发现不对的地方欢迎批评指正，如果有没明白的，欢迎留言。