JavaScript 的 for 循环与双重 for 循环

古城微笑少年丶 2022-11-07 14:47 217阅读 0赞

#### for循环 ####

for循环就是对数组的元素进行循环。

**语法：**

for (初始化变量; 条件表达式; 迭代语句) {
         需要执行的代码块；
    }

*  **初始化变量**：一般用来对循环变量进行初始化赋值。
 *  **条件表达式**：作为循环条件，一个包含比较运算符的表达式，用来限定循环变量的边限。如果循环变量的值超出了该边限，则停止该循环语句的执行。
 *  **迭代语句**：用来改变循环变量的值，从而控制循环的次数，通常是对循环变量的值进行递增或者递减的操作。

**for循环执行顺序：**

// 1. 声明变量；
    // 2. 判断循环执行条件；
    // 3. 代码块执行；
    // 4. 变量自增；

示例：求1-100的偶数和

var num=0
            for(var i=0;i<=100;i+=2){   //i+=2 意思为i=i+2
                num +=i                 
            }
            console.log("偶数和:"+num)

#### 双重for循环 ####

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for循环，这样的for循环语句我们称之为双重for循环。

**语法：**

for (外层初始化变量; 外层条件表达式;外层迭代语句) {
         for (内层初始化变量;内层条件表达式; 内层迭代语句) {
             需要执行的代码块；
         }
    }

*  里层循环可看做是是外层循环的执行语句
 *  外层循环执行一次，里面循环就会执行全部

**双重for循环实质：**

*  外层for循环控制循环的高度（行数）；
 *  内层for循环控制循环的宽度（列数）；

示例：输出九九乘法表

for(var i= 0 ; i <=9 ; i++){
             for(var aa = 1 ; aa <i+1 ; aa++){
                 document.write(aa+"*"+i+"="+i*aa);
             }
             document.write("<br />");
         }

可以添加一些样式让它更美观（添加span元素，定义body主体部分的宽度，将span元素改为inline-block行内块元素，设置其固定宽度）

<head>
    <style>
        body{
            width:2000px;
        }
        span{
            display:inline-block;
            width:80px;
        }
    </style>
    </head>
    <body> 
    <script>
    for(var i= 0 ; i <=9 ; i++){
             for(var aa = 1 ; aa <i+1 ; aa++){
                 document.write("<span>"+aa+"*"+i+"="+i*aa+"</span>");
             }
             document.write("<br />");
         }
    </script>
    </body>