双层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循环的运行流程。

java 双for循环提升效率_i++


我画的这个图是for循环的运行流程,它从1开始运行 i=1,然后运行 i < 10,再然后运行document,再最后才到 i++。并且,顺序1,只是第一次运行一次,后面就不运行了,这是它的一个特点。当然,跳出循环也是再顺序2,因为如果顺序2不满足循环了,自然就跳出了。了解了for循环的运行流程,我们再回来双层for循环。

我们以三角形为例。

java 双for循环提升效率_javascript_02


这个三角形应该怎么写?我们先思考,要写这个三角形,用一层循环来做的话好不好做,为什么?我觉得答案应该是不好做,因为这个三角形有五行,每一行个数也不一样,如果我用循环的话,那我是循环行,还是循环每一行的个数呢?所以得出答案一层循环做不了,或者是不好做。既然这样的话那我思考两层循环,我让外层的循环来循环行数,因为你有行了,行里面才能写五角星。

java 双for循环提升效率_javascript_03


图中的 第一层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,继续前面的流程。

java 双for循环提升效率_i++_04