JS流程控制

一.流程控制

• 在代码执行的过程中，各个代码执行的顺序对结果是有直接影响的，很多时候我们要通过控制代码执行的顺序来完成我们的功能（简单理解就是流程控制来控制我们代码按照什么方式来执行）

• 流程控制一共有三种结构，分别是顺序结构，分支结构，循环结构。这三种结构代表三种代码执行的顺序

  

二.顺序流程控制

• 顺序流程控制是最简单的 就是从上往下依次执行。

三.分支流程控制if语句

1.分支结构

• 由上到下执行代码过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果。
• JS语言提供了俩种分支结构语句1.if语句 2.switch语句

2.if 语法结构

    <script>
        // 1.if的语法结构 if如果的意思
        if (条件表达式 返回的值是布尔值 ) {
            // 执行语句
        }
        // 2.执行思路：如果if条件表达式为 真 则执行大括号里面的语句 如果if条件表达式为 假 则不执行里面语句直接跳过，执行if下面语句。这里的语句可以理解为一个行为把就是做了什么事情，可以做很多很多行为
    </script>

3.if else (双分支语句)语法结构

    <script>
        // 1.语法结构 if 如果  else 否则
        if (条件表达式) {
            // 满足条件时，执行的语句
        } else {
            // 不满足条件时，执行的语句
        }
        // 2.执行思路 如果 if 条件表达式为真则执行语句1 否则语句2
        // if里面的语句1 和else里面的语句2 最终只能执行一个语句
        3.注意else后面不跟小括号
    </script>

4.if else if （多分支语句)语法结构

    <script>
        //  1.多分支语句 就是用来利用多个条件来选择不同的z语句执行 得到的结果不同 实现多选一的过程
        //  if else if 语法结构
        if (条件表达式1) {
            // 执行语句1
        } else if (条件表达式2) {
            // 执行语句2
        } else if (条件表达式3) {
            // 执行语句3
        } else {
            // 最后的语句
        }
        // 2.执行思路 如果条件表达式 1 满足条件 就执行 语句1 执行完毕后，退出整个if语句
        // 如果条件表达式1 不满足条件 就执行条件表达式2 满足的话 就执行语句2.然后退出整个if语句
        // 如果都不满足则执行最后else的语句
        // 注意点 里面的表达式条件可为多个 是多选一的过程
    </script>

四.三元表达式

• 三元表达式可以做一些简单的条件选择 ， 三元运算符组成的称为三元表达式

语法结构

    <script>
        // 三元表达式语法结构
        // 1.条件表达式? 表达式1 : 表达式2
        // 2.执行思路 如果条件表达式为真的 则返回 1的结果 如果假的则返回 2的结果
        // 例子
        var num = 5 > 4 ? '是的' : '不是的' //表达式是有个返回值的 所以结果用个变量保存起来
        console.log(num);
    </script>

五.分支流程控制switch语句

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

语法结构

    <script>
        // 1.switch 语句 也是实现多选一的过程
        // 语法结构
        switch (表达式) {
            case value1:
                // 执行语句1
                break;
            case value2:
                // 执行语句2
                break;
            case value3:
                // 执行语句3
                break;
            default:
                // 执行最后的语句
        }
        // 2.执行思路 利用我们表达式的值 和case 后面的选项值相匹配 如果匹配上，就执行case里面的语句 如果都没有匹配上 就执行default里面的语句
        // 注意：最后的双逗号别忘记写了
        // 3.举个例子 
        var num = 3
        switch (num) {
            case 1:
                break;
            case 2:
                break;
            case 3:
                break;
            default:
                // 如果都没有执行这里面的
        }
        // 4.switch注意点
        // 我们经常吧switch里面的表达式写出变量形式
        // num里面的值和case后面的值必须是全等关系 也包括数据类型也要一致 如num===3 严格判断的
        // break(结束的意思) 如果当前的case里面没有break 则不会退出 switch继续执行下一个case 直到遇见了break才会退出
    </script>

六.switch语句和if else if语句区别

• 一般情况下他们俩是可以互相替换的
• switch…case语句通常处理case比较确定值得情况下，而if…else…语句更加灵活一些，常用于范围判断(大于、等与蒙个范围)
• switch语句进行条件判断后是直接跳到相对应执行语句上的效率高一些，而if…else是一条一条进行判断的
• 当分支比较少时，if…else语句的执行效率比switch语句高
• 当分支比较多时，switch语句的执行效率比较高，而且结果更清晰

七.if switch语句作业

1.判断时间阶段，比如用户输入12点 弹出 中午好 用户输入18点弹出傍晚好 用户输入23点 弹出深夜好

    <script>
        // 要求 判断时间阶段 比如 12点弹出中午好 18点弹出 下午好 23点弹出 晚上好
        // 执行思路 1.首先弹出一个输入框用户输入时间段，然后用变量保存起来
        // 2.然后利用switch来判断时间段 switch里面的变量必须和case的值全等关系
        // 2.最后利用alert弹出
        var time = prompt('请输入12点、18点、23点')
        switch (time) {
            case '12点':
                alert('中午好啊，朋友')
                break;
            case '18点':
                alert('下午好啊，朋友')
                break;
            case '23点':
                alert('晚上好啊，朋友')
                break;
            default:
                alert('抱歉请你重新输入')
        }
    </script>

2.比较两个数的最大值（用户依次输入2个值，最后弹出最大的那个值）

    <script>
        // 要求用户随机输入俩个值 判断出最大的值
        // 解决思路1.先依次弹出俩个输入框 让用户输入 然后用变量保存起来
        // 2.然后把用户输入的值 用if else来判断出其中最大的值 来比较 最后弹出来
        var max = prompt('请输入第一个值')
        var min = prompt('请输入第二个值')
        if (max > min) {
            alert('你最大的值是' + max)
        } else {
            alert('你的最大值是' + min)
        }
    </script>

3.用户输入一个数，来判断是奇数还是偶数

    <script>
        // 要求 用户输入一个数判断是奇数还是偶数
        // 1.if else做法
        var num = prompt('请随机输入一个数字')
        if (num % 2 == 0) {
            alert(num + '是偶数')
        } else {
            alert(num + '是奇数')
        }
        // 2.三元表达式做法
        var num1 = prompt('请随机输入一个数字')
        alert((num1 % 2 == 0) ? '偶数' : '奇数')
    </script>

4.根据用户输入的数字（数字1到数字7），返回星期几

    <script>
        // 要求 根据用户输入的数值(1~7)返回星期几
        // 解决思路1.先弹出一个输入框用户输入数字 然后用变量保存起来
        // 2.要把用户输入的值转变为数字型的才能与case后面的匹配上 因为用户输入的是字符串型的
        // 3.最后alert弹出星期几
        var week = prompt('请随机输入一个1~7的数字')
        var week1 = parseInt(week) //这里是把用户输入的值转变为数字型
            // console.log(typeof wek1);   typeof这个是用来检测数据类型的
        switch (week1) {
            case 1:
                alert('星期一');
                break;
            case 2:
                alert('星期二');
                break;
            case 3:
                alert('星期三');
                break;
            case 4:
                alert('星期四');
                break;
            case 5:
                alert('星期五');
                break;
            case 6:
                alert('星期六');
                break;
            case 7:
                alert('星期日');
                break;
            default:
                alert('你输入的数字不对,请重新输入 谢谢!!!')
        }
    </script>

5.接收班长口袋里的钱数？若大于等于2000，请大家吃西餐，若小于2000，大于等于1500，请大家吃快餐，若小于1500，大于等于1000，请大家和饮料。若小于1000，大于等于500，请大家吃棒棒糖，否则提醒班长下次把钱带够。

    <script>
        var money = prompt('班长口袋钱是多少？')
        if (money >= 2000) {
            alert('请大家吃西餐')
        } else if (money >= 1500) {
            alert('请大家吃快餐')
        } else if (money >= 1000) {
            alert('请大家喝饮料')
        } else if (money >= 500) {
            alert('请大家吃棒棒糖')
        } else {
            alert('班长下次把钱带够')
        }
    </script>

6.分数转换，给一个分数，判断等级。大于等于80小于90 B ，大于等于70小于80 C，大于等于60小于70 D 小于60 E

    <script>
        // 要求根据ABCDE字母 来获取分数
        // 执行思路 
        // 1.从大到小来判断
        // 2.先弹出一个输出框让用户来输入 吧取过来的值用变量保存起来
        // 3.然后拿着用户输入的值用 多分支语句来判断输出不同的值
        var grade = prompt('你的成绩分是0~100')
        if (grade >= 90) {
            alert('很棒');
        } else if (grade >= 80) {
            alert('优秀')
        } else if (grade >= 70) {
            alert('良好')
        } else if (grade >= 60) {
            alert('及格')
        } else {
            alert('不及格')
        }
    </script>