JavaScript for循环及其嵌套并用其制作99乘法表

àì夳堔傛蜴生んèń 2023-07-14 08:25 10阅读 0赞

# for 循环 #

所谓的for循环，是完全等价于 while 循环。任何一个for循环都可以写成while循环，任意一个while循环也可以写成for循环。for循环是应用最广泛的循环形式，适用于已知循环次数，循环嵌套情况。

### 语法 ###

for (语句 1; 语句 2; 语句 3) { 
        循环体;
    }

语句 1 	设定循环变量的初始值
    语句 2 	判断进入循环的条件
    语句 3 	步长

**特别注意的是，这里语句1、语句2、语句3的顺序不能发生变化。**

for循环可以和while循环进行转化。  
两个语法，只是形式不同，作用、功能等全都完全相同。

### 实例 ###

// 输出 1-100所有的偶数
 //while 循环
 var i = 2;
 while(i <= 100){ 
 console.log(`${ i}是偶数`);
 i += 2;
 }
 //for 循环
 for( var i = 2; i <= 100 ; i += 2 ){ 
 console.log(`${ i}是偶数`);
 }

# for循环的嵌套 #

所谓的循环嵌套，就是 for()\{\} 的循环体，也包含 for循环。

for (语句 1; 语句 2; 语句 3) { 
        for (语句 1; 语句 2; 语句 3) { 
        		循环体;
    	}
    }

关于如何使用 for 循环的嵌套，可以看下面一个案例：

输出一个由 * 星号组成的三角形，像这样：
         *
         * *
         * * *
         * * * * 
         * * * * *

首先，观察图形，图形的每一行都是由 \* 星号 + 空格 组成，每行末尾结束有个换行，所以我们可以通过循环让每行内容重复执行。先看第五行 \* 星号最多的一行，此行由五个 \* 星号 + 空格组成，末尾一个换行符所以此时可以写个 for 循环输出：

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

此时可得到第五行图形：

* * * * *

然后我们此时可以使用 for 循环的嵌套达到重复第五行的目的：

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

此时可得到重复的第五行图形：

* * * * * 
    * * * * * 
    * * * * * 
    * * * * * 
    * * * * *

分析一下过程，这里外层循环的 j 没循环一次执行一次循环体，然后循环体内的 i 执行五次循环，然后执行下一个 j 循环，以此类推，直到 j 循环五次后结束，得到图中图形，我们发现这里的 j 就相当于行数，j = 5所以执行了五次，得到了5行数据，而案例中每一行的循环次数跟它的行数是相等的，所以这里为了达到案例中的效果，我们可以让内循环的循环次数等于行数，即 i <= j ：

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

此时便可得到案例中的图形了。

# 利用 for 循环的嵌套制作99乘法表 #

如果你看懂了 for 循环的嵌套效果，那么我们便可利用该原理来制作99乘法表了：

首先，分析一下，99乘法表是9行表达式，每一行表达式的数目和行数是相等的，就像上面的 \* 星号图形，所以我们照旧先写表达式最多的第九行：

for (var i = 1; i <= 9; i++) { 
 	document.write(`${ i}*9=${ i * 9} `);
 }
 //每行结束之后,有一个换行
 document.write(' ');

此时可得到第九行的运算结果：

1*9=9 2*9=18 3*9=27 4*9=36 5*9=45 6*9=54 7*9=63 8*9=72 9*9=81

然后我们用 for 循环嵌套来重复第九行：

for (var j = 1; j <= 9; j++) { 
 	for (var i = 1; i <= 9; i++) { 
 		document.write(`${ i}*9=${ i * 9} `);
 	}
 	// 每行结束之后,有一个换行
 	document.write(' ');
 }

此时可得到重复的9行乘法表：

1*9=9 2*9=18 3*9=27 4*9=36 5*9=45 6*9=54 7*9=63 8*9=72 9*9=81
    1*9=9 2*9=18 3*9=27 4*9=36 5*9=45 6*9=54 7*9=63 8*9=72 9*9=81
    1*9=9 2*9=18 3*9=27 4*9=36 5*9=45 6*9=54 7*9=63 8*9=72 9*9=81
    1*9=9 2*9=18 3*9=27 4*9=36 5*9=45 6*9=54 7*9=63 8*9=72 9*9=81
    1*9=9 2*9=18 3*9=27 4*9=36 5*9=45 6*9=54 7*9=63 8*9=72 9*9=81
    1*9=9 2*9=18 3*9=27 4*9=36 5*9=45 6*9=54 7*9=63 8*9=72 9*9=81
    1*9=9 2*9=18 3*9=27 4*9=36 5*9=45 6*9=54 7*9=63 8*9=72 9*9=81
    1*9=9 2*9=18 3*9=27 4*9=36 5*9=45 6*9=54 7*9=63 8*9=72 9*9=81
    1*9=9 2*9=18 3*9=27 4*9=36 5*9=45 6*9=54 7*9=63 8*9=72 9*9=81

这里，我们不仅要让每一行的表达式数目（对应上边案例中的 \* 星号数目）等于行数，而且还要让该行的表达式中不变的那个因数（就想第九行中的 9）也等于行数，所以这里不仅要让 i <= j ，还要让循环体中的 9 也等于 j ：

for (var j = 1; j <= 9; j++) { 
 	for (var i = 1; i <= j; i++) { 
 		document.write(`${ i}*${ j}=${ i * j} `);
 	}
 	// 每行结束之后,有一个换行
 	document.write(' ');
 }

此时我们的99乘法表就算做成了：

1*1=1
    1*2=2 2*2=4
    1*3=3 2*3=6 3*3=9
    1*4=4 2*4=8 3*4=12 4*4=16
    1*5=5 2*5=10 3*5=15 4*5=20 5*5=25
    1*6=6 2*6=12 3*6=18 4*6=24 5*6=30 6*6=36
    1*7=7 2*7=14 3*7=21 4*7=28 5*7=35 6*7=42 7*7=49
    1*8=8 2*8=16 3*8=24 4*8=32 5*8=40 6*8=48 7*8=56 8*8=64
    1*9=9 2*9=18 3*9=27 4*9=36 5*9=45 6*9=54 7*9=63 8*9=72 9*9=81

这里对这类写法做一个总结：

### 总结 ###

1. 先写内容最多的一行  --- 内层循环
    2. 定义行数           --- 外层循环
    3. 将两个循环套一起
    4. 将内层循环中,所有与外层循环变量相关的数值,做替换