Javascript流程控制: 顺序流程控制 分支流程控制 (if语句 三元表达式 switch语句) 循环流程控制(for循环/断点调试 while循环 do-while循环 退出循环)

概念

控制代码按照一定结构顺序来执行

流程控制主要有三种结构：顺序结构、分支结构、循环结构

一、顺序流程控制

按照代码先后顺序，依次执行

二、分支流程控制（三种）

1.if 语句

1.if 的语法结构

      if (条件表达式) {
           // 执行语句
      }

2.执行思路

if else语句（双分支语句）

1.语法结构

 if (条件表达式) {
         执行语句1
      } else {
          执行语句2 
      }

2.执行思路

3.注意

if里面的语句1 和 else 里面的语句2 最终只能有一个语句执行 2选1

else 后面直接跟大括号

4.示例

      var age = prompt('请输入您的年龄:');
      if (age >= 18) {
          alert('您已成年');
      } else {
          alert('您未成年');
      }
      

if else if 语句(多分支语句)

1.语法结构

  // 适合于检查多重条件。利用多个条件来选择不同的语句执行 得到不同的结果
  if (条件表达式1) {
      语句1；
  } else if (条件表达式2)  {
      语句2；
  } else if (条件表达式3)  {
     语句3；
   ....
  } else {
      // 上述条件都不成立执行此处代码
  }

2.执行思路

3.注意点

(1) 多分支语句还是多选1 最后只能有一个语句执行

(2) else if 里面的条件理论上是可以任意多个的

(3) else if 中间有个空格了

2. 三元表达式

1.语法结构

表达式1 ? 表达式2 : 表达式3;

2.执行思路

• 如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值

• 简单理解： 就类似于 if else （双分支） 的简写

3.示例

      var num = 10;
      var result = num > 5 ? '正确' : '错误'; 
      console.log(result );//输出结果：正确

3. switch分支流程控制

多分支语句 也可以实现多选1

1.语法结构

• 关键字 switch 后括号内添加表达式或值， 通常是一个变量switch (表达式或值){...

• 关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号case 表达式或值:

 switch (表达式) {
          case value1:
              执行语句1;
              break;
          case value2:
              执行语句2;
              break;
          //可继续添加   case xxx
          default:
              执行最后的语句;
      }
      

2.执行思路

1. switch 表达式的值会与结构中的 case 的值做比较

2. 如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束

3. 如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码

3.示例

      switch (8) {
          case 1:
              console.log('这是1');
              break;
          case 2:
              console.log('这是2');
              break;
          case 3:
              console.log('这是3');
              break;
          default:
              console.log('没有匹配结果');

      }

4.注意

执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句,直到碰到break后停止。

        var num = 1;
        switch (num) {
            case 1:
                console.log(1);

            case 2:
                console.log(2);

            case 3:
                console.log(3);
                break;
        }

4.switch 语句和 if else if 语句的区别

• 一般情况下，它们两个语句可以相互替换
• switch…case 语句通常处理 case为比较确定值的情况， 而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)
• switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。
• 当分支比较少时，if… else语句的执行效率比 switch语句高。
• 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

三、循环流程控制（三种）

1. for循环

1.语法结构

        for(初始化变量; 条件表达式; 操作表达式 ){
    //循环体
}

初始化变量：用var 声明的一个普通变量， 通常用于作为计数器使用 var x=?

条件表达式：用来决定每一次循环是否继续执行 就是终止的条件 例如： i<=100

操作表达式： 是每次循环最后执行的代码 经常用于计数器变量进行更新（递增或者递减）

2.执行过程：

for (var i = 1; i <= 100; i++) {
          console.log('你好吗');
      }

第一轮

首先：执行 初始化变量 初始化变量在for 里面 只执行一次

第二步：由 条件表达式 来判断 此时的 变量 是否满足条件， 如果 满足条件 继续执行 ； 不满足条件 退出循环

第三步：当 满足条件表达式时 执行操作表达式 操作表达式是单独写的代码 递增 操作表达式执行结束后 第一轮结束

第二轮

直接执行条件表达式 满足条件 继续执行 ； 不满足条件 退出循环
…

注意：

只有第一轮需要执行初始化变量，剩下的每一次循环都是直接执行条件表达式，直到条件不满足时退出循环

双重for循环

概述： 循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构

1.语法结构

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
   for (内循环的初始; 内循环的条件; 内循环的操作表达式) {  
      需执行的代码;
  }
}

2.执行过程：

• 内层循环可以看做外层循环的循环体语句
• 内层循环执行的顺序也要遵循 for 循环的执行顺序
• 外层循环执行一次，内层循环要执行全部次数

追加字符串

//例1
      var age = '';
      for (var i = 1; i <= 10; i++) {
          for (var j = 1; j <= i; j++) {
              age = age + '★';
          }
          age = age + '\n';
      }
      alert(age);
      //★
      //★★
      //★★★
      //★★★★
      //★★★★★
      //★★★★★★
      
//例2
      var age = "";
      for (var i = 1; i <= 10; i++) {
          for (var j = i; j <= 10; j++) {
              age = age + '★';
          }
          age = age + '\n';
      }
      alert(age);
      //★★★★★★
      //★★★★★
      //★★★★
      //★★★
      //★★
      //★
//例3
      var sum = '';
      for (var i = 1; i <= 9; i++) {
          for (var j = 1; j <= i; j++) {
              //1*2=2
              sum += j + '×' + i + '=' + j * i + '\t'; //   '\t'=空格
          }
          sum = sum + '\n';
      }
      console.log(sum);
      /*  
          1×1 = 1
          1×2 = 2	2×2 = 4
          1×3 = 3	2×3 = 6	  3×3 = 9
          1×4 = 4	2×4 = 8	  3×4 = 12	4×4 = 16
          1×5 = 5	2×5 = 10  3×5 = 15	4×5 = 20	5×5 = 25
          1×6 = 6	2×6 = 12  3×6 = 18	4×6 = 24	5×6 = 30	6×6 = 36
          1×7 = 7	2×7 = 14  3×7 = 21	4×7 = 28	5×7 = 35	6×7 = 42	7×7 = 49
          1×8 = 8	2×8 = 16  3×8 = 24	4×8 = 32	5×8 = 40	6×8 = 48	7×8 = 56	8×8 = 64
          1×9 = 9	2×9 = 18  3×9 = 27	4×9 = 36	5×9 = 45	6×9 = 54	7×9 = 63	8×9 = 72	9×9 = 81
       */

for循环补充

1.重复相同的代码

// 指定输入次数
var num = prompt('请输入次数:')；
for ( var i = 1 ; i <= num; i++) {
    console.log('喜羊羊');
} 

2.重复不相同的代码

//  例如，求输出1到100岁
for (var i = 1; i <= 100; i++) {
      console.log('这个人今年' + i + '岁了');
}

3.重复不同代码，且输出结果不同

//例如，求输出1到100岁，并提示出生、死亡
// for 里面是可以添加其他语句的 
for (var i = 1; i <= 100; i++) {
            if (i == 1) {
               console.log('这个人今年1岁了， 它出生了');
            } else if (i == 100) {
               console.log('这个人今年100岁了，它死了');
             } else {
       console.log('这个人今年' + i + '岁了');
  }
}

4.算术运算

// 例1：求1-100之间所有数的和
      var num = 0;
      for (var i = 1; i <= 100; i++) {
          num = num + i;
      }
      console.log(num)


//例 2.求1-100之间所有偶数和奇数的和
      var even = 0;
      var odd = 0;
      var age = 0;
      for (var i = 1; i <= 100; i++) {
          if (i % 2 == 0) {
              even = even + i;
          } else {
              odd = odd + i;
          }
      }
      age = odd + even;
      console.log(even);
      console.log(odd);
      console.log(age);

// 例3.求1-100之间所有能被3整除数的和
      var asd = 0
      for (var i = 1; i <= 100; i++) {
          if (i % 3 == 0) {
              asd = asd + i;
          }
      }
      console.log(asd);

5.追加字符串

      var sum = '';
      for (var i = 1; i <= 5; i++) {
          sum = sum + '♥';
      }
      console.log(sum);
      
      //例：
      var num = prompt('请输入星星的个数');
      var srt = '';
      for (var i = 1; i <= num; i++) {
          srt = srt + '♥';
      }
      console.log(srt);
  

断点调试：

观察程序的运行过程

操作：

1. 浏览器中按 F12–> sources -->找到需要调试的文件–>在程序的某一行设置断点
2. Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
3. 摁下F11，程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

小结

• for 循环可重复执行某些相同代码
• for 循环可以重复执行些许不同的代码，因为我们有计数器
• for 循环可以重复执行某些操作，比如算术运算符加法操作
• 随着需求增加，双重for循环可以做更多、更好看的效果
• 双重 for 循环，外层循环一次，内层 for 循环全部执行
• for 循环是循环条件和数字直接相关的循环

2. while循环

1.语法结构

while (条件表达式) {
  // 循环体代码 
}

2.执行过程：

1 先执行 条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环， while执行后面代码

2 执行循环体代码

3 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束

3.do-while循环

1.语法结构

do {
  // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

2.执行过程：

• 先执行一次循环体代码

• 再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码

注意：

先再执行循环体，再判断，do…while循环语句 至少会执行一次循环体代码

4.循环小结

• 三种循环多数情况可以互相代替
• 用来记次数或跟数字相关，三者都可，更常用for
• while 和do while 可以做更复杂的判断，比for灵活
• while 和do while 执行顺序不一样，while先判断后执行，do while先执行一次后判断。
• while 和do while 执行次数不一样，do while至少会执行一次循环体，而while可能一次也也不执行

5. 退出循环（两种）

1.continue

用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。

// 1. 求1~100 之间， 除了能被7整除之外的整数和 
     var sum = 0;
     for (var i = 1; i <= 100; i++) {
         if (i % 7 == 0) {
             continue;
         }
         sum += i;
     }
     console.log(sum);

2.break

用于立即跳出整个循环（循环结束）。

// 1. 求1~100 之间， 除了能被7整除之外的整数和 
      var sum = 0;
      for (var i = 1; i <= 100; i++) {
          if (i % 7 == 0) {
             break ;
          }
          sum += i;
      }
      console.log(sum);