js流程控制for循环的写法和执行顺序以及案例

for(var i=0; i<10; i++ ){  
  console.log(i);  
  }  
  console.log('结束'); 
  
// 执行顺序  var i=0;  0<10; console.log(0); i=1; 1<10; console.log(1); i=2; .... 9<10 console.log(9); i=10;  10<10 停止循环

//先定义初始值（for小括号里面的第一条语句），判断循环条件（for小括号里的第二条语句）  

 //如果循环条件结果为true,则执行 {}中的循环体；再执行计数+1（for小括号里面的第三条语句），判断循环条件  (相当于逆向执行)

 //如果循环条件结果为true,则执行 {}中的循环体；再执行计数+1（for小括号里面的第三条语句），判断循环条件  

 //.......  

 //循环条件结果不为true，则停止循环  

理解以下5个for循环的进阶案例,相信你回对JavaScript的流程控制中的for循环有更深刻的认识!

案例1:计算 1 - 100之间 所有偶数的和 （包括100）

for(var i=1; i<=100; i++){
        //判断偶数  累加结果
        if(i%2 == 0){
            //i 能被2 整除，是偶数
            total += i;
            // total = 0 + 2 = 2;
            // total = 2 + 4 = 6;
            // total = 6 + 6 = 12;
            // total = 12 + 8 = 20;
        }
    }
    console.log(total);

案例2  在页面 画正方形的 ☆  （每行五个,一共五行）

    // 最终 两个for循环嵌套了， 外层for循环控制的行数，里层的for循环控制的每行的星星个数
    // 用for循环控制行数
    /*for(var i=1; i<=5; i++){
        //控制每行显示的个数
        for(var j=1; j<=5; j++){
            document.write('☆');
        }
        // document.write('☆');
        // document.write('☆');
        // document.write('☆');
        // document.write('☆');
        // document.write('☆');
        document.write('<br>');
    }*/

    //一共5行  外层for循环控制行数的 循环几次就几行

    for(var i=1; i<=5; i++){
        //里层for循环控制每行星星的个数的  循环几次就有几个小星星
        //一行输出5个星星，每次输出一个
        for(var j=1; j<=5; j++){
            document.write('☆');
        }
        document.write('<br>');
    }

案例3 输出直角三角形的 小星星   第一行1个  第二行2 第三行3个 。。。 第五行5个

    for(var i=1; i<=5; i++){
        //根据行数 决定小星星的个数
        //里层循环 控制个数
        // for(var j=1; j<=1; j++){
        //  document.write('☆');
        // }
        // for(var j=1; j<=2; j++){
        //  document.write('☆');
        // }
        // for(var j=1; j<=3; j++){
        //  document.write('☆');
        // }
        for(var j=1; j<=i; j++){
            document.write('☆ ');
        }
        document.write('<br>');
    }

案例4  输出 99乘法表

        //思路 第一步 控制行数
        // 第二步 控制每行的 列数（等式的个数）
        // 第三步 控制每行每列等式的内容
        // 
        // 外层for循环 控制行数
        for(var i=1; i<=9; i++){

            //里层for循环 控制每行的等式的个数
            for(var j=1; j<=i; j++){
                // document.write('1*9=9');
                // document.write(j + '*9=9'); //  j + '*' + '9' + '=9'
                // document.write(j + '*' + i + '=9');
                // document.write(j + '*' + i + '=' + '9');
                // document.write(j + '*' + i + '=' + i*j);
                document.write(j + '*' + i + '=' + i*j + ' ');
                // document.write('☆ ');
            }

            document.write('<br>');
        }

案例5 接下来的，理解为主  九九乘法表 放在 table标签中 每个等式 一个单元格

  // document.write('<table border="1">');
        // document.write('<tr>');
        // document.write('<td>1');
        // document.write('</td>');
        // document.write('</tr>');
        // document.write('</table>');

     document.write('<table border="1">');
        //外层for循环控制行数---tr标签
        for(var i=1; i<=9; i++){
            document.write('<tr>');
            //每一行 输出对应的等式
            //内层for循环 控制等式的个数---td标签
            for(var j=1;j<=i; j++){
                document.write('<td>');
                document.write(j + '*' + i + '=' + i*j + ' ');
                document.write('</td>');
            }
            document.write('</tr>');
        }
        
        document.write('</table>');