JS循环结构

• 循环：让特定代码执行指定的次数

for循环

• for循环

  什么时候需要用？：多次重复执行，多次有规律重复执行
  for的作用？：可以让特定的代码执行指定次数

• 语法：

  for(表达式1;表达式2;表达式3){   循环体(需要重复执行的代码)  }
  for(初始化循环变量;循环条件;更新循环变量){ 循环体(需要重复执行的代码) }
  for(var i = 0;i < 10；i++){ 循环体(需要重复执行的代码) }

• 例子

  for(var i = 0;i < 5;i++){
      console.log(i);
  }
  ​
  执行过程：
      1.初始化循环变量  i = 0
      2.判断循环条件  i<5 
          成立：执行3
          条件不成立结束循环
      3.执行循环体
      4.更新循环变量 i++
      5.回到步骤2
      注意：一定要有结束条件，否则就会变成死循环

• 使用场景

  • 循环数组，逻辑

    var arr = ["A","B","C","D"];
    ​
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
    console.log(arr[3]);
    ​
    for(var i = 0;i < arr.length;i++){
        console.log(arr[i]);  //arr[0]  arr[1]
    }

  • 循环添加事件

    10li == >oLis
    ​
    oLis[0].onclick = function(){}
    oLis[1].onclick = function(){}
    oLis[2].onclick = function(){}
    oLis[3].onclick = function(){}
    oLis[4].onclick = function(){}
    ​
    for(var i = 0;i<oLis.length;i++){
        oLis[i].onclick = function(){}
    }

  • 循环生成标签

    //这种，经常改变内容的标签，在html中就不写，在js中通过获取后台数据动态生成
    var news = ["国庆节不放假","哈尔滨疫情","福建疫情","国庆节高铁不开了","国庆节飞机不飞了"];
    ​
    var oUl = document.getElementsByTagName("ul")[0];
    ​
    //根据后台数据生成标签
    for(var i = 0;i<news.length;i++){
        oUl.innerHTML += "<li>hahaha</li>";
    }

2.2 while与do-while

2.2.1 while

• 语法

  1.初始化循环变量
  while(条件){
      循环体；
      更新循环变量
  }

• 案例

  ​

2.2.2 do-while

• 语法

  1.初始化循环变量
  do{
      循环体；
      更新循环变量
  }while(条件)

• 案例

  ​

2.2.3 区别

• ==while和do-while的区别==

  while：先判断后执行，最开始不成立，不会循环
  do-while：先执行后判断，最开始不成立，会执行一次

• while和for

  for：有明确的开始和结束，有循环次数，  循环数组，循环添加点击事件，循环生成标签
  while：没有明确的循环次数，有结束条件

2.3 break与continue

• break：结束循环

• continue：结束本次循环

  //ccontinue：结束本次循环
  for(var i = 1;i<=12;i++){
      if(i == 6){
          console.log("掉了");
          continue; //结束本次循环，这次循环到此结束，下次继续
      }
      console.log("现在吃第"+i+"个饺子");
  }
  ​
  ​
  //break : 提前结束循环
  for(var i = 1;i<=30;i++){
      if(i == 3){
          console.log("发现有蟑螂");
          break; //提前结束循环
      }
      console.log("现在吃第"+i+"口面条");
  }

2.4 双重for循环

• 循环图形（了解）

  ☆
  ☆ ☆
  ☆ ☆ ☆
  ☆ ☆ ☆ ☆
  ☆ ☆ ☆ ☆ ☆
  ​
  //document.write("☆")：在body中写入内容
  for(var i = 0;i<5;i++){ //外循环控制行，内循环控制列
      for(var j = 0;j <= i;j++){
          document.write(" ☆ ");
      }
      document.write("<br>");
  }