JavaScript中流程控制语句的基本使用

#流程控制语句

流程控制语句分类

• 顺序结构：代码从上到下去执行
• 分支结构：if if-else switch
• 循环结构：for while do-while

1.分支语句

1.1if语句

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

• 双分支：if(条件){ 条件成立时执行代码 }else{ 条件不成立时执行代码 }

• if语句后边不放{}，只能控制紧跟着的第一条语句

• if语句的条件不仅是比较，还可以是值，为真值

  // 1.if
  // 如果有100块，去买蜜雪冰城，麻辣香锅
  var money = 200;
  if(money > 100){
      console.log("买蜜雪冰城");
      console.log("买麻辣香锅");
  }
  
  // 2.if语句后边不放{}，只能控制紧跟着的第一条语句
  var money = 100;
  if(money > 200)
      console.log("买蜜雪冰城");
  
  console.log("买麻辣香锅");
  console.log("买雪糕");
  
  // 3.双分支：if(条件){ 条件成立时执行代码 }else{ 条件不成立时执行代码 }
  var money = 1000000;
  if(money > 10000){
      console.log("买个手机");
      console.log("买个电脑");
      console.log("买个平板");
  }else{
      console.log("好好学习");
      console.log("努力挣钱");
  }
  
  // 4.if语句的条件不仅仅是比较，还可以是值，为真值
  // 假值：0 "" null undefined NaN false
  if("abc"){
      console.log("这是1");
      console.log("这是数值");
  }
  

• if语句的多分支

  • 语法：if(条件1){ 条件1成立时执行的代码 }else if(条件2){ 条件2成立时执行的代码 }else if(){}…
  • 把不容易满足的条件放在前边，可以减少判断次数

  var n = 155;
  if(n >= 90){
      console.log("非常棒");
  }else if(80 <= n && n < 90){
      // 80-90
      console.log("真好");
  }else if(70 <= n && n < 80){
      // 70-80
      console.log("还不错");
  }else if(60 <= n && n < 70){
      // 60-70
      console.log("及格了");
  }else{
      // 否则
      console.log("不及格 下次努力");
  }
  

• if语句的嵌套

  if语句可以套if语句

1.2 switch语句

• break的作用：防止穿透，如果不加的话，丛匹配到的那一项开始，后续条件不再匹配直接执行

/*			switch(匹配项){
                case 值1: 匹配到值1时所执行的代码; break;
                case 值2: 匹配到值2时所执行的代码; break;
                ...
                default: 以上都没有匹配到执行的代码;
            }
*/
var str = "华妃";
switch(str){
    case "皇后": console.log("今天去皇后那"); break;
    case "华妃": console.log("今天去华妃那"); break;
    case "甄嬛": console.log("今天去甄嬛那"); break;
    case "眉姐姐": console.log("今天去眉姐姐那"); break;

        // 默认项
    default: console.log("今天哪里也不去");
}

使用场景：

​ 如果匹配的是简单的字符或者数字，使用switch会更简洁些

​ 如果出现的情况比较复杂，用if语句会更方便些

2.循环语句

2.1 for循环

• 语法：for(表达式一；表达式二；表达式三){ 循环体 }

  ​ for(初始化循环变量；循环条件；更新循环变量){ 循环体 }

• 注意：循环条件一定要保证能让循环结束，否则陷入死循环

• 重复执行的代码 有规律的变化

• 执行过程

  1.初始化循环变量   var i = 1
  2.判断循环条件      i <= 5
       条件成立时执行下一步
       条件不成立循环结束
  3.执行循环体
  4.更新循环变量  i++
  5.回到步骤2
  

/* 重复执行的代码 有规律的变化 */
// 求1-100的和
var sum = 0; // 存放和
for(var i = 1; i <= 100; i++){
    console.log(i); // 1 2 3 ... 100
    // 每次拿到的数都往sum上加
    // sum = sum + i; // 累加
    sum += i;
}
console.log(sum,'和'); // 5050

• for循环操作标签

  // 有规律的变化
  console.log(oLi.length, '元素集合的长度');
  for(var i = 0; i < oLi.length; i++){
      console.log(i); // 0 1 2 3 4
      oLi[i].onclick = function(){
          console.log("被点击了");
      }
  }
  

• 动态渲染数据

  var oUl = document.getElementsByTagName('ul')[0];
  var list = ["上海6月见实现社会面清零",
              "大别山革命老区",
              "先救我妹妹",  
              "老年人新冠疫苗接种不要等"]
  // 动态渲染数据
  // 根据数据的长度来渲染标签
  for(var i = 0; i < list.length; i++){
      console.log(i); // 0 1 2 3
      console.log(list[i]); // 取值
  
      // 生成对应个数的li标签
      oUl.innerHTML += "<li>" + list[i] + "</li>";
  }
  

2.2 while和do-while

while:满足某个条件，执行某件事情
	初始化循环变量
	while(循环条件){
		// 循环体
		// 更新循环变量
	}
do-while：先执行一次循环体，之后再判断循环条件
	初始化循环变量
	do{
		// 循环体
		// 更新循环变量
	}while(循环条件)

// 初始化循环变量
var j = 10;
while(j <= 5){
    // 循环体
    console.log("while-------" + j);

    // 更新循环变量
    j++;
}

// 初始化循环变量
var k = 10;
do{
    // 循环体
    console.log('do-while--------'+k);

    // 更新循环变量
    k++;
}while(k <= 5)

• while和do-while的区别：

  • do-while先执行一次循环体，之后再判断循环条件，循环体至少会执行一次
  • while满足某个条件，执行某件事情

• for和while的使用场景

  • for循环适用于开始条件和结束条件都比较明确时使用
  • while循环适用于循环条件比较明确时使用

3.break和continue

都是在循环中使用，

break是直接终止循环

continue是跳过本轮循环，后续循环继续执行

for(var i = 1; i <= 10; i++){
    if(i == 5){
        // console.log("不小心摔断腿了");
        // break; // 终止循环

        console.log("有点累 下来歇一会");
        continue; // 跳过本轮循环，后续循环继续执行
    }

    console.log("这是第" + i + "圈");
}

4.for循环的嵌套

for循环的嵌套/双重for循环：在for循环中嵌套一个for循环

外循环执行一轮，内循环执行一整圈

for(初始化外循环变量; 外循环条件;外循环变量的更新){
	for(初始化内循环变量; 内循环条件;内循环变量的更新){}
}

• 操作有规律的图形

  • 外循环控制行
  • 内循环控制列

  // 外循环控制行 i
  for(var i = 1; i<=5; i++){
      // 每一行都要生成列  内循环的条件:列<=行
      // 内循环控制列 j
      for(var j = 1; j <= i; j++){
          document.write("*")
      }
      document.write("<br>");
  }
  

• 动态生成标签

  • 外循环控制父元素
  • 内循环控制子元素

  // 有几个ul进行多少次渲染 arr[0] oUl[0]
  // 外循环控制父元素 ul
  for(var k = 0; k < oUl.length; k++){
      // 根据数据的长度动态生成标签li
      var list = arr[k]; // 获取对应的数据
  
      // 内循环控制子元素 li
      for(var i = 0; i < list.length; i++){
          console.log(list[i]);
          oUl[k].innerHTML += "<li>"+ list[i] +"</li>"; // 累加
      }
  }