逆战班：for结构及双重循环嵌套执行原理

最新推荐文章于 2022-04-14 16:08:10 发布

社会yang

最新推荐文章于 2022-04-14 16:08:10 发布

阅读量156

点赞数

文章标签： html js

本文链接：https://blog.csdn.net/qq_29839583/article/details/105031273

版权

在JS开发中，for循环由于它执行条件以及结构方便我们进行监测，是我们经常使用的使用的一种循环。

1.for循环的结构

for循环的基本结构如下：
for(单次执行条件；判断条件；最后执行的循环体条件){
循环体；
}
单次执行条件：顾名思义只执行一次的条件，只在循环开始时执行，之后不再执行；
判断条件：循环体执行结束后，判断是否继续执行的条件，每次循环体结束，都要进行判断，也就是只有条件为true时，才继续执行。
循环体：从for循环的结构中，可以看到，循环体有两部分组成，先执行{}中的“循环体”，在执行“最后执行的循环体条件”
例如：在js中，使用for循环打印0-9这10个数字。
在这里插入图片描述

  for(var i=0;i<10;i++){
        console.log(i);
  }

2.for循环的执行顺序

在结构中，也说到了for循环的执行顺序，在这里总结一下。
（1）执行“单次执行条件”
（2）执行{循环体}
（3）执行“最后执行的循环体条件”
（4）“判断条件”进行判断，如果满足条件继续执行，不满足条件循环结束。
（5）继续执行，则重复（2）（3）（4）

3.双重循环嵌套执行原理

双重循环的执行原理，我们通过一个案例进行说明。
说明：用for循环，打印九九乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table{
            width: 600px;
            height: 400px;
            margin: 50px auto;
            border-collapse: collapse;
        }
        td{
            text-align: center;
            border: 1px solid #000000;
        }
    </style>
</head>
<body>
    <script>
        var str = "<table>";
        for(var i = 1;i<10;i++) {
            str+="<tr>"
            for(var j =1;j<=i;j++)  str+="<td>"+i+"*"+j+"="+i*j+"</td>";
            str+="</tr>";   
        }
        document.body.innerHTML+=str+"</table>";
    </script>
</body>
</html>

执行结果如下图：
在这里插入图片描述
在上述代码中，可以看到用了两个for循环进行嵌套，外层的for循环中i，可以看做是行数，内层for循环中j，可以看做是列数，九九乘法表的特点是第几行，就具有几列，因此让i=j。
执行顺序为：
（1）外层循环首先执行一次
外层循环的循环体为阴影部分
在这里插入图片描述
其中包含着内层for循环，在执行内for循环时，执行顺序按照本文“for执行顺序”的步骤进行执行，
（2）整个外层循环的循环体执行完成后，执行“最后执行的循环体条件”，也就是i++；
（3）判断外层循环的“判断条件”
（4）顺序通上文的“for执行顺序”。

社会yang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
逆战班：for结构及双重循环嵌套执行原理

在JS开发中，for循环由于它执行条件以及结构方便我们进行监测，是我们经常使用的使用的一种循环。1.for循环的结构for循环的基本结构如下：for(单次执行条件；判断条件；最后执行的循环体条件){循环体；}单次执行条件：顾名思义只执行一次的条件，只在循环开始时执行，之后不再执行；判断条件：循环体执行结束后，判断是否继续执行的条件，每次循环体结束，都要进行判断，也就是只有条件为tru...
复制链接

扫一扫