JS利用for多重循环制作9*9乘法表

在JavaScript中，多重for循环作为比较复杂的循环程序，新手刚接触时总是有些难以理解，今天，我们对for循环做一个简单的分析介绍。

要想理解多重for循环，首先我们需要对单个for循环有基本的认识。

单个for循环

for循环和while循环的作用一样，区别就是二者在写法上的区别。由于for循环相对while循环在写法上比较集中，在实际工作中不容易出错。所以在复杂程序中我们一般都采用for循环写法。
for循环的格式：

for( 变量初始值 ； 变量取值范围 ； 变量自增/自减){
执行程序
}

例如：
for (var i = 1; i <= 5; i++) {
console.log(‘执行程序’);
}

上面的例子表示设定变量i，i的初始值为1，当i满足i <=5的条件时，执行for内的操作程序，在控制台输出字符串“执行程序”，完成后返回执行i++操作，i变成2，再经过i <= 5的判断，判断结果为true时继续执行输出字符串操作。完成后i继续加1，i变成3。直到第五次循环结束，i++值等于6，此时继续判断 I<=5，很显然6 <= 5 结果为false，因此跳出循环，不再继续执行操作。

多重for循环

看完了简单的for循环，现在我们就可以很容易地理解多重for循环。

多重for循环就是多个for循环，通过嵌套的方式配合在一起。完成多次重复性的循环操作。

多重for循环的执行顺序是，最外面的for循环执行一次，里面的同层级的for循环就会执行一轮。

理解了原理以后，我们一起来做下面的例子。

如何用for循环，做出9*9乘法表。

首先我们可以分析得出，结果最长有9列。那么我们可以用单个for循环做出9列的效果。

此时效果为：

我们多写几个循环试试。

效果为：

好像和剧本有点不一样？

我们发现两个循环之间并没有换行，而是默认写在了一行。
这个好办，还记得换行标签
吗，我们可以在每个循环结束后手动输出
，使其换行。


这时的效果为：


这时我们很容易可以看出来，for循环和换行标签一直在重复输出，我们可以把他们看做一个整体的循环程序。用for来执行循环操作。
优化后的代码如下：

显示效果则没有变化，不过因为j循环执行了9次，因此结果也变成了9行：

但是对比案例，我们发现第一行有一列结果，第二行有两列结果…列数和行数是同步变换的，并不是一直输出9次。因此，我们把I的取值范围i <= 9 改成i <= j。这样，在j = 1时，i执行1次，在j = 2时，i也随之变成 i <= 2.执行2次…以此类推。


是不是已经很相像了？

但是内容还是不太一样，这里我们再仔细观察，每个公式的第一个乘数随着列数的不同，也就是i的不同而变化。而且和i的值一样。因此我们把第一个乘数写成变量i，第一个乘数写作变量j，把结果写作他们两个变量的乘积。

此时效果为：

这里使用了模板字符串，如果不清楚的话，可以复习一下模板字符串的概念。

最后，为了分隔不同公式，我们再给字符串的末尾输出一个空格。作为区分。

这样，9*9乘法表就做好啦，大家可以赶快试试噢。