07-JavaScript 流程控制-分支

---

1.流程控制

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

2.顺序流程控制

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

3.分支流程控制 if 语句

3.1.分支结构

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

3.2.if 语句

        1.if 的语法结构
                  if (条件表达式) {
                执行语句
            }

        2.执行思路
        如果条件表达式为真，则执行大括号里面的执行语句；若条件表达式为假，则不执行大括号里面的执行语句，则执行if语句后面的代码。

        3.代码体验
        if (3 < 5) {
            alert("快乐老家");
        }

3.3.if else 语句（双分支语句）

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

        2.执行思路
        如果条件表达式结果为真，则执行语句1，否则执行语句2。

        3.代码体验
        var age = prompt('请输入您的年龄：');
        if (age >= 18) {
            alert('来和我谈恋爱吧！');
        } else {
            alert('好好学习哦^^');
        }

        4.语句1和语句2，最终只能有一个语句执行，即2选1。

        5.else里面直接跟大括号。

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

        1. if else if 语法结构
        if (条件1) {
                执行语句1
            } else if (条件2) {
                执行语句2
            } else if (条件3) {
                执行语句3
            } else {
                执行语句4
            }
        2. 最后只执行一个语句

4.三元表达式

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

        1.语法结构
        表达式1 ? 表达式2 : 表达式3;
        
        2.执行思路
        如果表达式1为true，则返回表达式2的值；如果表达式1为false，则返回表达式3。
        简单理解：类似于 if else 双分支的简写。
        
        3.代码体验
        用户输入数字，如果数字小于10，则在前面补 0 ，比如01，09 ，如果数字大于10，则不需要补，比如 20。
        var number = prompt('请输入一个数字');
        var result = number < 10 ? '0' + number : number;
        alert(result);

5.分支流程控制 switch 语句

5.1.switch语句

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

        2.语法结构
        switch (表达式) {
            case value1:
                执行语句1;
                break;
            case value2:
                执行语句2;
                break;
            ...
            default:
                执行最后的语句;
        }

        3.执行思路
        利用表达式的值和case后面的选项值进行匹配，如果匹配得上，就执行case里面的语句；如果没有匹配上，就执行default里面的语句。

        4.注意事项
        1 开发里面，表达式常写成变量。
        2 表达式的值和case后面的选项值进行匹配时，需要是全等关系，必须值和数据类型都一致才行。
        3 如果当前的case里面没有break，则不会推出switch，而是进行下一个case。

        5.代码体验
        用户在弹出框里面输入一个水果，如果有就弹出该水果的价格， 如果没有该水果就弹出“没有此水果”。
          伪代码：
          ① 弹出 prompt 输入框，让用户输入水果名称，把这个值取过来保存到变量中。
          ② 将这个变量作为 switch 括号里面的表达式。
          ③ case 后面的值写几个不同的水果名称，注意一定要加引号 ，因为必须是全等匹配。
          ④ 弹出不同价格即可。同样注意每个 case 之后加上 break ，以便退出 switch 语句。
          ⑤ 将 default 设置为没有此水果。
          真代码:
                var question= prompt('小弗，你想我吗？');
                switch (question) {
                    case '想':
                        alert('我也好想你啊╥﹏╥...');
                        break;
                    case '不想':
                        alert('可是我好想你')
                        break;
                    default:
                        alert('乌乌想你想你');
                }

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

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