JavaScript：双重for循环

在一些时候单层 for 循环是不能满足我们的需求的，比如我们要打印一个五行五列的星星、打印一个倒三角、打印九九乘法表等、此时就可以用双重for循环（循环嵌套）来实现。

首先我们看一下它的基本语法结构：

        for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
                for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) { 
                     执行语句;
                }
        }

再给大家演示一个小小的案例， 让大家更好理解：

  我们可以把里面的循环看做是外层循环的语句
  外层循环一次， 里层的循环全部执行一次
  代码验证
for (var i = 1; i <= 3; i++) {
     console.log('~~~这是外层的第'+ i +'次循环~~~~');
     for (var j = 1; j <= 3; j++) {
         console.log('这是里层的第'+ j +'次循环');
     }
 }

 效果展示：

我们通过以下几个案例来加深一下双重 for 循环的执行过程：

案例一：打印五行五列小星星

核心思想：

                内层循环负责一行打印五个星星

                外层循环负责打印五行

 var str = '';
 for (var i = 1; i <= 5; i++) {           // 外层循环负责打印五行
     for (var j = 1; j <=5; j++) {        // 里层循环负责打印五个星星
         str += '⭐';
     }
 // 打印五个星星后换行  加 \n  
     str += '\n';
 }
 console.log(str);

效果展示：

案例二：打印倒三角

核心思想：

                j = i 

 var str = '';
 for (var i = 1; i <= 10; i++) {         // 外层循环控制行数
     for (var j = i; j <= 10; j++) {     // 里层循环打印的个数不一样
         str = str + '⭐';
     }
     str += '\n';
 }
 console.log(str);

效果展示：

案例三：九九乘法表

核心思想：

                每一行公式的个数正好和行数一致，j <= i

var str = '';
for(var i = 1; i <= 9; i++) {
     for(var j = 1; j <= i; j++) {
        str += j + 'x' + i + '=' + j * i + '\t'; 
     }
     str += '\n';
}
console.log(str);

效果展示：

总结：

• for 循环可以重复执行某些相同的代码。
• for 循环可以重复执行些许不同的代码，因为有计数器。
• for 循环可以重复执行某些操作，比如算数运算符加法操作。
• 外层循环一次、内层for循环全部执行一次。

好了，双重for循环，今天就介绍到这里了。

拜拜！