for循环基本概念

• JavaScript中的for语句使用最为灵活,不仅可以用于循环次数已经确定的情况,而且可以用于循环次数不确定而只给出循环结束条件的情况,它完全可以代替while语句。

• 格式:

for(①初始化表达式；②循环条件表达式；④循环后操作表达式)
{
    ③执行语句；
}

• for循环执行流程
  • for循环开始时，会先执行初始化表达式，而且在整个循环过程中只执行一次初始化表达式
  • 接着判断循环条件表达式是否为真，如果条件为真，就会执行循环体中的语句
  • 循环体执行完毕后，接下来会执行循环后的操作表达式
  • 执行完循环后操作表达式, 然后再次判断循环条件表达式是否为真，如果条件为真，就会执行循环体中的语句
  • 重复上述过程，直到条件不成立就结束for循环

    for(var i = 0; i < 10; i++){
        alert(i); // 输出0-9
    }
    

• for循环和while循环如何选择?
  • 一般情况下while和for可以互换, 但是如果循环执行完毕之后就不需要使用用于控制循环的增量, 那么用for更好

for循环注意点

• for循环中初始化表达式,循环条件表达式,循环后操作表达式都可以不写
  • 循环条件表达式默认为真
  • for(; ;) 语句相当于while(1), 都是死循环
• 其它注意点和while一样

循环嵌套

• 循环语句的循环体中存在其他的循环语句就是循环嵌套

  • 注意: 一般循环嵌套不超过三层
  • 外循环执行的次数 * 内循环执行的次数就是总共执行的次数

• 格式:

  • while/while嵌套
  • while/do-while嵌套
  • while/for嵌套
  • for/for嵌套(最常用)
  • for/while嵌套
  • for/do-while嵌套
  • do-while/do-while嵌套
  • do-while/while嵌套
  • do-while/for嵌套

循环嵌套练习

• 打印好友列表

   好友列表1
          好友1
          好友2
          好友3
   好友列表2
          好友1
          好友2
          好友3

    for (var i = 1; i <= 2; i++) {
        console.log("好友列表"+ i);
        for (var j = 1; j <= 3; j++) {
            console.log("    好友"+ j);
        }
    }

• for循环嵌套实现:矩形绘制

需求: 在界面上绘制如下图形
****
****
****

   //  外循环控制行数
   for (var i = 0; i < 3; i++) {
//        内循环控制列数
       for (var j = 0; j < 4; j++)
       {
           window.document.write("*");
       }
       window.document.write("<br/>");
   }

• for循环嵌套实现:三角形绘制
  • 尖尖朝上，改变内循环的条件表达式，让内循环的条件表达式随着外循环的i值变化

需求: 在界面上绘制如下图形
*
**
***
****
*****

    for(var i = 0; i< 5; i++){
        for(var j = 0; j <= i; j++){
            window.document.write("*\t");
        }
        window.document.write("<br/>");
    }

• for循环嵌套实现:三角形绘制
  • 尖尖朝下，改变内循环的初始化表达式，让内循环的初始化表达式随着外循环的i值变化

需求: 在界面上绘制如下图形
*****
****
***
**
*

    for(var i = 0; i< 5; i++){
        for(var j = i; j < 5; j++){
            window.document.write("*\t");
        }
        window.document.write("<br/>");
    }

• for循环嵌套实现:打印特殊三角形

1
12
123

  /*
  1.观察发现有很多行很多列--》循环嵌套
  2.尖尖朝上，让内循环条件表达式随着外循环i改变
  3.发现每次输出的值其实就是 j + 1 的值
  */
    for (var i = 0; i < 3; i++) {
        for (var j = 0; j <= i; j++) {
            window.document.write(j+1+"");
        }
        window.document.write("<br/>");
    }

1
22
333

  /*
  1.观察发现有很多行很多列--》循环嵌套
  2.尖尖朝上，让内循环条件表达式随着外循环i改变
  3.发现每次输出的值其实就是i的值
  */
    for (var i = 1; i <= 3; i++) {
        for (var j = 1; j <= i; j++) {
            window.document.write(i + "");
        }
        window.document.write("<br/>");
    }

• for循环嵌套实现:打印正三角形

-----*
----***
---*****
--*******
-*********
***********

  /*
  1.观察发现有很多行很多列--》循环嵌套
  2.仔细观察其实需要打印2个三角形, 一个尖尖朝上,一个尖尖朝下
  切记先一个一个打印, 然后再合并,否则步子迈大了会扯到蛋
  */
    for (var i = 0; i <= 5; i++) {
        for (var j = 0; j < 5 - i; j++) {
            window.document.write("-");
        }
        for (var m = 0; m < 2*i+1; m++) {
            window.document.write("*");
        }
        window.document.write("<br/>");
    }

• for循环嵌套实现:打印99乘法表

1 * 1 = 1
1 * 2 = 2     2 * 2 = 4
1 * 3 = 3     2 * 3 = 6     3 * 3 = 9

<style>

        span{
            display: inline-block;
            border: 1px solid #000;
            padding: 10px;
        }
</style>
<script>
    /*
      1.观察发现有很多行很多列--》循环嵌套
      2.尖尖朝上，让内循环条件表达式随着外循环i改变
      3.输出的结果等于 内循环的变量 * 外循环的变量
    */
    for (var i = 1; i <= 9; i++) {
        for (var j = 1; j <= i; j++) {
            document.write("<span>"+j+"*"+i+"="+i*j+"</span>");
        }
        window.document.write("<br/>");
    }
</script>

学习交流方式:
1.微信公众账号搜索: 李南江(配套视频,代码,资料各种福利获取)
2.加入前端学习交流群:
302942894 / 289964053 / 11550038