一、流程控制

概念：在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码。
的执行顺序来实现我们要完成的功能。
简单理解：流程控制就是来控制我们的代码按照什么结构顺序来执行。
流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。
第七章 流程结构--分支 - 图1

二、顺序流程控制

顺序结构：是程序种最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的洗后顺序，依次执行，程序中大多数的代码都是这样执行的。

三、分支流程控制if语句

分支结构：由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果
JS语言提供了两种分支结构语句：If语句、switch语句

1．If 语句

（1） If 语句的语法结构： if(){}

if(条件表达式){
执行语句}
语句可以理解为一个行为，循环语句和分支语句就是典型的语句。一个程序由很多个语句组成，一般情况下，会分割成一个一个的语句。

（2） If 语句的执行流程

第七章 流程结构--分支 - 图2

（3） If 语句代码说明

  1.     <script>
  2.         //  if 的语法结构  
  3.         // 1.结构 ：if(){}      if(条件表达式){执行语句} 
  4.         // 2.思路：如果if里面的‘条件表达式’结果为真，则执行大括号里面的语句，如果为假死，不执行大括号的语句，直接执行‘if’后面的代码。
  6.         if (3 > 5) {
  7.             alert('是真的就给我弹出来');
  8.         } //3不大于5，所以没有弹出来
  9.         if (3 < 5) {
  10.             alert('这才是真的哦');
  11.         } //3大于5，弹（这才是真的）
  12.     </script>

（4） If 语句案例说明

要求：弹出一个输入框，要求用户输入年龄，如果年龄大于等于18岁，允许进网吧。
思路：
① 弹出prompt输入框，用户输入年龄，程序把这个值取过来保存到变量中
② 使用f语句来判断年龄，如果年龄大于18就执行大括号里面的输出语句

  1.     <script>
  2.         //①　弹出prompt输入框，用户输入年龄，程序把这个值取过来保存到变量中
  3.         //②　使用f语句来判断年龄，如果年龄大于18就执行大括号里面的输出语句
  4.         var age = prompt('请输入您的年龄:');
  5.         if (age >= 18) {
  6.             alert('欢迎进行网吧');
  7.         }
  8.     </script>

image.png
image.png

2．If else语句(双分支语句)

（1）If else 语句的语法结构：if(){}else{}

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

（2） If else 语句的执行流程

第七章 流程结构--分支 - 图5

（3） If else 语句代码说明

  1.   <script>
  2.         //  if else 双分支语句  if=如果；else=否则
  3.         // 1.结构 ：if(){}else{}     if(条件表达式){执行语句1}else{执行语句2} 
  4.         // 2.思路：如果表达式结果为真那么执行语句1，否则执行语句2。
  6.         // 3.代码验证：输入大于或者等于18，弹出('欢迎进行网吧')，小于18，弹出('你还没到18岁,回家写作业去吧')
  7.         var age = prompt('请输入您的年龄:');
  8.         if (age >= 18) {
  9.             alert('欢迎进行网吧');
  10.         } else {
  11.             alert('你还没到18岁,回家写作业去吧');
  12.         }
  14.         //注意：if里面的语句1和e1se里面的语句2最终只能有一个语句执行
  15.     </script>

image.png
image.png
image.png
image.png

（4） If else 语句案例说明

案例2：判断闰年
接收用户输入的年份，如果是闰年就弹出闰年，否则弹出是平年。
① 算法：能被4整除且不能整除100的为闰年(如2000年就是闰年，2022年不是闰年)或者能够被400整除的就是闰年。
② 弹出prompt输入框，让用户输入年份，把这个值取过来保存到变量中。
③ 使用if语句来判断是否是闰年，如果是闰年，就执行if大括号里面的输出语句，否则就执行else里面的输出语句。
④ 一定要注意里面的且 && 还有或者 ‖ 的写法，同时注意判断整除的方法是取余为0。

  1.     <script>
  2.         // ①　算法：能被4整除且不能整除100的为闰年(如2004年就是闰年，1901年不是闰年)或者能够被400整除的就是闰年。
  3.         // ②　弹出prompt输入框，让用户输入年份，把这个值取过来保存到变量中.
  4.         // ③　使用if语句来判断是否是闰年，如果是闰年，就执行if大括号里面的输出语句，否则就执行lse里面的输出语句。
  5.         // ④　一定要注意里面的且&&还有或者‖的写法，同时注意判断整除的方法是取余为0。
  6.         var year = prompt('请您输入年份');
  7.         if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
  8.             alert('您输入的是闰年');
  10.         } else {
  11.             alert('您输入的是平年');
  13.         }
  14.     </script>

image.png
image.png
image.png
image.png

（4） If else 语句课后作业

独立完成案例：判断是否中奖
接收用户输入的姓名，来判断是否中奖，如果输入的是刘德华，则提示中了500万，否则提示没有中奖。

  1.     <script>
  2.         //接收用户输入的姓名，来判断是否中奖，如果输入的是刘德华，则提示中了500块钱，否则提示没有中奖。
  3.         // ①　弹出prompt输入框，让用户输入姓名，把这个值取过来保存到变量中.
  4.         // ②　使用if语句来判断是否是刘德华，如果是就执行if里的语句（恭喜您中奖现金500万，否则就执行else里面的(谢谢惠顾）。
  5.         // ③　一定要注意里面的且&&还有或者‖的写法，同时注意判断整除的方法是取余为0。
  7.         var myname = prompt('请您输入您的姓名');
  8.         if (myname == '刘德华') {
  9.             alert('恭喜您中奖现金500万')
  10.         } else {
  11.             alert('谢谢惠顾')
  12.         }
  13.     </script>

image.png
image.png
image.png
image.png

3．if else if语句（多分支语句）

就是利用多个条件来选择不同的语句执行得到不同的结果多选1的过程

（1） If else if 语句的语法结构：if(){}else if(){}

if(条件表达式1){
执行语句1} elese if (条件表达式2){
执行语句2}；elese if (条件表达式3){
执行语句3}；……elese{执行最后的语句
}
有多少个条件就选择多少个elese if

（2） If语句的执行流程

第七章 流程结构--分支 - 图18

（3） 注意事项

① 多分支语句还是多选1最后只能有一个语句执行
② else if里面的条件理论上是可以任意多个的
③ else if中间有个空格

（4） 案例：判断成绩级别

要求：接收用户输入的分数，根据分数输出对应的等级字母A、B、C、D、E.
其中：
1.90分（含）以上，输出：A
2.80分（含）~90分不含），输出：B
3.70分（含）~80分不含），输出：C
4.60分（含）~70分（不含），输出：D
5.60分（不含）以下，输出：E

  1.  var score = prompt('请您输入分数:');
  2.         if (score >= 90) {
  3.             alert('A,宝贝，您是我的骄傲');
  4.         } else if (score >= 80) {
  5.             alert('B,宝贝，你已经很出色了');
  6.         } else if (score >= 70) {
  7.             alert('C,孩子，你要继续加油喽');
  8.         } else if (score >= 60) {
  9.             alert('D,孩子，你很危险了');
  10.         } else {
  11.             alert('E,熊孩子，我不想和你说话.');
  12.         }

1_00.png

四、三元表达式

1、概念：

三元表达式也能做一些简单的条件选择。有三元运算符组成的式子称为三元表达式。

2、三元表达式的语法结构：

条件表达式？表达式1：表达式2

3、三元表达式代码验证：

  1. <script>
  2.         // 1.概念：有三元运算符组成的式子称为三元表达式
  3.         // 2.语法结构:条件表达式？表达式1：表达式2
  4.         // 3.执行思路:如果条件表达式结果为真，则返回表达式1的值，如果条件表达式结果为假，则返回表达式2的值
  6.         //代码验证：
  7.         var num = 10;
  8.         var result = num > 5 ? '是的' : '不，不是的';
  9.         console.log(result);
  10.     </script>

image.png

3、三元表达式案例：

案例：数字补0
用户输入数字，如果数字小于10，则在前面补0，比如01,09，如果数字大于10，则不需要补，比如20。
① 用户输入8~59之间的一个数字。
② 如果数字小于10，则在这个数字前面补0，（加0）否则不做操作。
③ 用一个变量接受这个返回值，输出。

  1. <script>
  2.         var time = prompt('请您输入0~59之间的一个数字:')
  3.         var result = time < 10 ? '0 ' + time : time;
  4.         alert(result);
  5.   </script>

图片1.png

六、分支流程控制switch语句

switch语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用switch。

1、 switch的语法结构：

  1. <script>    
  2.       switch (表达式) {
  3.       case value1:
  4.         执行语句1;
  5.         break;
  6.       case value2:
  7.         执行语句2;
  8.         break;
  9.         ...
  10.         default:
  11.         执行最后的语句;
  12.     }
  13.  </script>

2、 switch的执行思路:

利用我们表达式的值 和 case 后面的值进行匹配，如果匹配上了就执行case里面的语句 ，如果没有匹配上，那么就执行 default 里面的语句

3、 switch的代码验证:

<script> 
        var num = 2
        switch (num) {
            case 1:
                console.log('这是1');
                break;
            case 2:
                console.log('这是2');
                break;
            case 3:
                console.log('这是3');
                break;
            default:
                console.log('没有匹配的结果');
        }
 </script>

image.png

4、 switch的注意事项：

① 我们开发里面表达式我们经常写成变量
② 我们num的值和case里面的值相匹配的时候是 全等（===) 必须是值和数据类型一致才可以.
③ break如果当前的case里面没有break则不会退出switch是继续执行下一个case

5、 switch的案例：

案例：查询水果
用户在弹出框里面输入一个水果，如果有就据弹出该水果的价格，如果没有该水果就弹出“卖完了”
① 弹出prompt输入框，让用户输入水果名称，把这个值取过来保存到变量中。字。
② 将这个变量作为switch括号里面的表达式。
③ case后面的值写几个不同的水果名称，注意一定要加引号，因为必须是全等匹配。
④ 弹出不同价格即可。同样注意每个case之后加上break,以便退出switch语句。
⑤ 将default设置为没有此水果。

<script> 
        var fruit = prompt('请您输入查询的水果:')
        switch (fruit) {
            case '苹果':
                alert('苹果的价格是 3.5元/kg');
                break;
            case '桔子':
                alert('桔子的价格是4.5元/kg')
                break;
            default:
                alert('卖完了')
        }
</script>

图片2.png

6、switch语句和if else if语句的区别

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