揭示双循环的工作机制

马黑黑

多循环语句的应用场景极其广泛，理解其工作机制有助于对循环的灵活运用。能理解双循环就能理解多循环，故此在这里以双循环为例，演示一下双循环是如何工作的。

我们的假设是：外层循环四次，内层循环6次。每一次循环，我们都拼接一个字符串并赋值给一个字串（string）变量，最后将运行结果即改字串变量显示在一个div盒子里。希望通过研究代码和运行结果，能全面理解双循环的工作原理。

以下是我设计的代码：

<div id="twoFor">演示结果：</div>

<script language="javascript">

var str = "<br><br>";
for(j=0;j<4; j++){
        str += "外层循环第 " + (j + 1) + "次（步进变量j值为 " + j + "）:<pre>";
        for(k=0; k< 6; k++){
                str += "\t内循环第 " + (k + 1) + " 次（步进变量k值为 " + k + "）<br>";
        }
        str += "</pre>";
}

document.getElementById('twoFor').innerHTML = str;

</script>


运行结果在下楼。

马黑黑

演示结果：

马黑黑

代码解释：

首先，我们布局一个 id 标识号为 twoFor 的 div 盒子，双for循环结果将在这里呈现：

<div id="twoFor">演示结果：</div>

这个 div 内部已有简单的文本，运行结果在它的基础上添加。下面是JS部分，重点：

我们先声明一个字符串变量，它的值是两个 <br> 标签，意思是和 div 盒子里原有的的内容隔开来：

var str = "<br><br>";

接着进入外层循环，步进变量是 j ：

for(j=0; j<4; j++){
        str += "外层循环第 " + (j + 1) + "次（步进变量j值为 " + j + "）:<pre>";
        //这里是内循环代码
        str += "</pre>";
}

外层循环在嵌入内层循环之前，我们先来处理一下外层循环运行的信息并将内层循环的信息放置到 <pre> 标签里以便隔开两种循环的运行结果的信息。<pre> 标签要有收尾符，所以内层循环一轮结束了，需要加上 </pre>。

循环，习惯上从 0 开始，for(j=0; j<4; j++) 语句里，j=0; 表示j这个步进变量从0开始起步，就是说第一轮循环时j的值是0；j<4; 表示j的步进不能等于也不能大于4，换言之，当它步进到4时，就终止循环；j++; 表示j的步进方式，就是每次加1的意思，换句话说就是每一轮循环结束就在原有基础上加上1。

再来理解内层循环：

        for(k=0; k< 6; k++){
                str += "\t内循环第 " + (k + 1) + " 次（步进变量k值为 " + k + "）<br>";
        }


同理，步进变量k从0起步，到5时结束（k< 6; 表示k的增长不能等于也不能大于6），总共循环 0，1，2，3，4，5 共 6 次。我们拼接的字符串继续围绕着变量 str 展开，其中，\t 表示缩进一个 tab 键位所对应的制表符宽度值。

关于字符串拼接，变量 += 值 的方式是一种方法，它表示 变量 的值在原有基础上再增加一个值。还有一种方法在等号后面拼接：

"\t内循环第 " + (k + 1) + " 次（步进变量k值为 " + k + "）<br>"

这种拼接方式，引号里面的东东是纯字符串，加号 + 分两种情形两个意思，一种是字符串拼接符号（上一行代码中的红色部分）、用于拼接字符串，另一种是运算符号（暗橘黄色部分，就是 (k + 1) 里面的加号）、用于计算。

小提示：JS采用松散的变量方式处理相应机制。计算结果道理上属于数值类变量，与字符串串接后，对应值自动变成了字符串。

最后，再次使用字符串拼接方式，将运行结果显示在 div 盒子里：

document.getElementById('twoFor').innerHTML += str;

innerHTML 是基于dom（document）的js方法，表示内部的HTML代码，整个语句表示将 str 变量（双for运行结果的信息）串接到（+=）其上。

结合代码和运行结果，我们应能体会到：双循环中，外层循环每运行一次，内层循环就要进行一次从 0 到 N 的完整性循环。

红影

黑黑辛苦了，外层循环每运行一次内层循环就要完整循环完全部，这句懂的。
只是那一串引号里的挺费解。还能把<br><pre>等等的也引进去呢

红影

+ k +就是k += ""么？

红影

快下班了，先把相关的链接搬过来一起看，黑黑之前发的好几个都和这个双玄幻有关联；
JS：for语句
https://www.huachaowang.com/foru ... 56663&fromuid=2
(出处: 花潮论坛)

JS：双循环for语句之表格制作
https://www.huachaowang.com/foru ... 56954&fromuid=2
(出处: 花潮论坛)

马黑黑

红影 发表于 2022-3-4 16:15
黑黑辛苦了，外层循环每运行一次内层循环就要完整循环完全部，这句懂的。
只是那一串引号里的挺费解。还能 ...

这是拼接字符，根据显示需要在不同的循环环节中拼接的

马黑黑

红影 发表于 2022-3-4 16:17
+ k +就是k += ""么？

不是。k这里是数值变量，把这个k数值变量加到字符串中。

而 k += "" 则将 k 变成字符串，不论k之前是什么类型的变量

小辣椒

天书先看起来，现在不懂是肯定的

红影

马黑黑 发表于 2022-3-4 18:18
这是拼接字符，根据显示需要在不同的循环环节中拼接的

我就是循环里的那些语句不是特别清楚，双循环的含义是明白的。

红影

马黑黑 发表于 2022-3-4 18:19
不是。k这里是数值变量，把这个k数值变量加到字符串中。

而 k += "" 则将 k 变成字符串，不论k之前是 ...

嗯嗯，前面那个是数值变量。知道了，两者是有区别的。

马黑黑

红影 发表于 2022-3-4 21:59
嗯嗯，前面那个是数值变量。知道了，两者是有区别的。

慢慢体会

马黑黑

小辣椒 发表于 2022-3-4 21:55
天书先看起来，现在不懂是肯定的

这个和做帖子还是有联系的，尤其是做复杂机制的帖子

小辣椒

马黑黑 发表于 2022-3-4 23:36
这个和做帖子还是有联系的，尤其是做复杂机制的帖子

我会认真学习，希望对我有用

红影

马黑黑 发表于 2022-3-4 23:35
慢慢体会

好像先需要记住，再体会，可惜我总记不住

马黑黑

红影 发表于 2022-3-5 10:17
好像先需要记住，再体会，可惜我总记不住

你的脑容量是万千BT级别的

马黑黑

小辣椒 发表于 2022-3-4 23:41
我会认真学习，希望对我有用

当你发现游泳的时候，你已经是高手了

小辣椒

马黑黑 发表于 2022-3-5 21:51
当你发现游泳的时候，你已经是高手了

游泳啊我不会

红影

马黑黑 发表于 2022-3-5 21:35
你的脑容量是万千BT级别的

有那么大么，我咋不知道

马黑黑

红影 发表于 2022-3-5 22:17
有那么大么，我咋不知道

你主要是没有定时整理碎片