JS 流程控制语句（ps:今天北京初雪）

• 分类

  • 顺序结构（按代码顺序，从上往下执行）

  • 选择结构(分支语句) ： if if-else if-else if switch

  • 循环结构：for while do-while for-in

选择结构(分支语句)

 单分支： if

• 语法：if(条件){ 条件成立时执行的代码 }

  /* 
  单分支
    语法：if(条件){ 条件成立时执行的代码 }
    特殊：
       1.if后面的大括号可以省略，省略就只能控制紧跟在后面的一条语句
       2.if(条件)：条件并不一定非得是判断，只要真假结果就可以
  */
  //0. 如果 有钱（100） ， 买房子，看看世界
  var money = 10000;
  if (money > 100) {
      //console.log("娶媳妇");
      //console.log("看看世界");
  }
  ​
  //1.if后面的大括号可以省略，省略就只能控制紧跟在后面的一条语句
  var m = 99;
  if (m > 100) console.log("买房子");
  console.log("看看世界");
  ​
  //2.if(条件)：条件并不一定非得是判断，只要真假结果就可以
  if(1){//1  true  
      console.log("等我有钱，买房子、买车");
  }

多分支：if-else

• 语法：if(条件){条件成立时执行的代码}else{条件不成立执行的代码}

  //如果有钱(>500000) : 买房子   没有买彩票
  var money = 100;
  if(money > 500000){  //条件成立时执行的代码
      console.log("买房子");
  ​
  }else{ //条件不成立执行的代码
      console.log("买彩票");
  }

 多分支

• if-else if

  • 语法：if(条件){条件成立时执行的代码}else if(条件){条件成立时执行的代码}else if......

    //90以上：秀儿  80以上：良好  70以上：一般    60往上：加油   60以下：打一顿
    var c = 79;
    if(c >= 90){
        console.log("秀儿");
    }else if(c >= 80){
        console.log("良好");
    }else if(c >= 70){
        console.log("一般");
    }else if(c >= 60){
        console.log("加油");
    }else{
        console.log("打一顿");
    }

• switch

  • 语法

    switch(匹配){
    
    case 情况1(确定的值) ：匹配到情况1执行的代码;break;
    
    case 情况2(确定的值) ：匹配到情况2执行的代码;break;
    
    case 情况3(确定的值) ：匹配到情况3执行的代码;break;
    
    case 情况4(确定的值) ：匹配到情况4执行的代码;break;
    
    default: 前面所有的都匹配不到的时候执行的代码
    
    }
    
    var s = "*";
    switch(s){
        case "+" : console.log(100 + 10);break;
        case "-" : console.log(100 - 10);break;
        case "*" : console.log(100 * 10);break;
        case "/" : console.log(100 / 10);break;
        default: console.log("我不会！！！");
    }

    注意：==break:提前结束，防止穿透，如果不加break，只要匹配到一项以后，后面的代码不会判断，直接执行==

    情况明确，判断是一个简单的数字或字符，建议用switch

 分支嵌套

• if(){

  if(){}

  }

   //1.长度11位
  //2.第一位必须是1
  var str = "1738621372644343";
  if(str.length == 11){
      if(str.charAt(0) === "1"){
  ​
      }else{
          alert("电话号码第一位必须是1")
      }
  }else{
      alert("电话号码必须是11位")
  }

循环

作用：解决多次代码重复，多次有规律重复问题

概念：可以让指定的代码执行特定的次数

 for循环

• 语法

  for(表达式一;表达式二;表达式三){循环体}
  for(初始化循环变量；循环条件;更新循环变量){
      循环体
  }

• 执行顺序

  /*执行顺序：
      1.初始化循环变量  var i = 0;
      2.判断循环条件  i < 5  
          条件成立，执行3
          条件不成立，结束循环
      3.执行循环体
      4.更新循环变量 i++   
      5.回到步骤2
      
  注意：必须要有结束循环的条件，没有结束会成为死循环*/
  for(var i = 0;i < 5;i++){
      console.log("做了"+i+"个俯卧撑");
  }

• 循环添加点击事件

  //3.给li添加点击事件
  var oLis = document.getElementsByTagName("li");
  for (var i = 0; i < oLis.length; i++) {
      oLis[i].onclick = function () {
          console.log("点击了");
      }
  }

• 循环生成标签

  //1.获取元素
  var oUl = document.getElementsByTagName("ul")[0];
  ​
  //2.根据数据的个数生成对应个数的标签
  for(var i = 0;i<arr.length;i++){
      oUl.innerHTML += "<li>"+ arr[i] +"</li>";
  }

while与do-while

• while

  语法：

  初始化循环变量；

  while(循环条件){

  循环体

  更新循环变量

  }

  var j = 0;
  while(j < 0){
      console.log("while"+j);
      j++;
  }

• do-while

  语法：

  初始化循环变量；

  do{

  循环体

  更新循环变量

  }while(循环条件)

   var t = 0;
  do{
      console.log("do-while"+t);
      t++;
  }while(t<0);

• while与do-while区别

  while先判断，再执行，do-while先执行再判断

• while与for区别

  //for：有明确的循环次数，从那开始到那结束
  //1.循环数组
  var arr = ["a","b","c","d"];
  for(var i = 0;i<arr.length;i++){
      console.log(arr[i]);
  }
  ​
  //2.循环添加事件
  for(var i = 0;i<oBtn.length;i++){
      oBtn[i].onclick = function(){}
  }
  ​
  ​
  //while:循环次数不明确，有明确的结束条件
  //3.1000,每天用1半，用到10块钱以下就停止，能用多少天？
  var money = 1000;
  var day = 0;
  while(money > 10){
      day++;
      money /= 2;
      console.log("用了第"+day+"天，还剩："+money);
  }

 break与continue

• break：结束循环

  //10颗汤圆，第五颗发现有只蟑螂，
  for(var i = 1;i <= 10; i++){
      if(i == 5){
          console.log("第五颗发现有只蟑螂");
          break; //结束循环
      }
      console.log("已经开始吃第"+i+"颗汤圆");
  }

• continue：结束本次循环

  //10颗汤圆，第五颗掉了，
  for(var i = 1;i <= 10; i++){
      if(i == 5){
          console.log("第5颗掉土里了");
          continue; //结束本次循环
      }
      console.log("已经开始吃第"+i+"颗汤圆");
  }

循环嵌套

• 循环嵌套用于图形

  //循环嵌套：双重for循环
  //外循环控制行
  for(var i = 0;i<5;i++){
      //内循环控制列
      //i = 0  j = 0
      //i = 1  j = 0  j = 1
      //i = 2  j = 0  j = 1  j = 2
      for(var j = 0;j <= i;j++ ){
          document.write(" ☆ ");
      }
      document.write("<br>")
  }

• 循环嵌套用于标签

   var moves = [
       ["秦时明月", "海贼王", "一人之下", "柯南", "尸兄"],
       ["你是我荣耀", "扫黑风暴", "父母爱情", "大宅门", "盗墓笔记", "走西口"],
       ["举起手来", "当男人恋爱时", "你的婚礼", "美国古墓"]
   ];
  ​
  //1.获取元素
  var oUl = document.getElementsByTagName("ul");
  ​
  // var arr = moves[0];
  //2.根据数据生成标签
  for (var i = 0; i < moves.length; i++) { //循环外层数据  3个
      for (var j = 0; j < moves[i].length; j++) {
          oUl[i].innerHTML += "<li>" + moves[i][j] + "</li>";
      }
  }