JavaScript 流程控制1-分支

最新推荐文章于 2024-04-19 20:30:57 发布

少年张狂

最新推荐文章于 2024-04-19 20:30:57 发布

阅读量297

点赞数

本文链接：https://blog.csdn.net/weixin_41909678/article/details/118667446

版权

switch 语句和 if-else if 语句的区别

三元表达式

案例：数字补0

作业

目标

能够使用 if 分支语句
能够使用 switch 分支语句
能够使用三元表达式

流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的
很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能
简单理解：流程控制就是控制代码按照特定的结果顺序来执行
流程控制主要有三种结构：顺序结构、分支结构和循环结构，分别代表不同的代码执行顺序

顺序流程控制

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

分支流程控制

由上到下顺序执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果

if-else 语句

    <script>
        // if 的语法结构
        /* 执行思路：如果 condition 条件表达式为真,则执行语句1;
           否则执行 else,执行语句2 
           语句1 和语句2 总有一个执行
        */
        if (condition) {
            // 执行语句1
        } else {
            // 执行语句2
        }
    </script>

语句可以理解为一个行为，循环语句和分支语句就是典型的语句
一个程序由很多个语句组成，一般情况下，会分割为一个一个的语句

案例判断闰年

    <script>
        var year = prompt('请输入年份:');
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            alert(year + '年是闰年');
        } else {
            alert(year + '年是平年');
        }
    </script>

if-else if 多分支语句

    <script>
        var grade = prompt('请输入您的考试分数:');
        if (grade >= 90) {
            alert('您的成绩为A,恭喜您通过考试');
        } else if (grade >= 75) {
            alert('您的成绩为B,恭喜您通过考试');
        } else if (grade >= 60) {
            alert('您的成绩为C,恭喜您通过考试');
        } else {
            alert('您的成绩为D,下学期再见');
        }
    </script>

多分支语句多选一，最后只有一个语句将得到执行
else if 理论上可以有任意多个

switch 语句

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

    <script>
        // switch 语句也是多分支语句，也可以用于实现多选一
        // 语法结构 switch 转换、开关
        // case 小例子或者选项的意思
        // 执行思路：将表达式的值与 case 后的选项值相匹配，如果与某一个 case 匹配，则执行该 case 下面的语句，然后 break
        // 如果表达式的值与所有的 case 都不匹配，则执行 default 中的语句
        switch (key) {
            case value1:
                执行语句1;
                break;
            case value2:
                执行语句2;
                break;
            //...
            default:
                执行语句n;
                break;
        }
    </script>

    <script>
        var num = prompt('请输入一个整数：');
        var result = num % 3;
        switch (result) {
            case 0:
                alert(num + '是3的倍数');
                break;
            case 1:
                alert(num + '不是3的倍数');
                break;
            case 2:
                alert(num + '不是3的倍数');
                break;
            default:
                alert('您输入的值不符合条件！')
                break;
        }
    </script>

注意事项

开发时，switch 后面的括号中经常填写变量，而不是式子
switch 中的值和 case 后面的值必须类型相同，即 ===
如果当前的 case 中没有 break，则会继续执行下面的 case

案例

    <script>
        var fruit = prompt('请输入您想要购买的水果：');
        switch (fruit) {
            case '苹果':
                alert('苹果的价格为5元/斤');
                break;
            case '香蕉':
                alert('香蕉的价格为3元/斤');
                break;
            case '猕猴桃':
                alert('猕猴桃的价格为2元/斤');
                break;
            default:
                alert('抱歉，本店暂不售卖此水果!')
                break;
        }
    </script>

switch 语句和 if-else if 语句的区别

一般情况下，这两个语句可以互换
switch...case 语句通常处理 case 为比较确定的值的情况
if - else if 语句更灵活，常用于范围判断（大于，小于）
switch...case 语句进行条件判断后直接运行与 switch 的值相匹配的 case，效率更高
if - else if 语句则需要按部就班的判断每一个 if ，直至出现匹配的 if
当分支比较少时，if ... else 语句的执行效率比 switch 高
当分支比较多时，switch 语句的执行效率比较高，而且结构更清晰

三元表达式

由三元运算符组成的式子称为三元表达式
三元运算符包括？：
三元表达式也能做一些简单的条件选择

语法：

    <script>
        条件表达式 ? 表达式1 : 表达式2;
    </script>

    <script>
        // 条件表达式 ? 表达式1:表达式2
        // 执行过程：如果条件表达式为真，则返回表达式1 的值，否则返回表达式2 的值
        var num = prompt('请输入您的预测点数：');
        result = num > 3 ? '恭喜，您猜对了！' : 'sorry，您猜错了！';
        /* 与以下代码效果相同
        if (num > 3) {
            result = '恭喜，您猜对了！';
        } else {
            result = 'sorry，您猜错了！';
        } 
        */
        alert(result);
    </script>

案例：数字补0

    <script>
        var hour = prompt('请输入当前小时：');
        time1 = hour > 10 ? hour : '0' + hour;
        var minute = prompt('请输入当前分钟：');
        time2 = minute > 10 ? minute : '0' + minute;
        var seconds = prompt('请输入当前秒：');
        time3 = seconds > 10 ? seconds : '0' + seconds;
        alert('当前时间为：' + time1 + ':' + time2 + ':' + time3);
    </script>

作业

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

    <script>
        var num1 = prompt('请输入第一个数：');
        var num2 = prompt('请输入第二个数：');
        // 注意类型转换
        num = parseInt(num1) > (num2) ? num1 : num2;
        alert(num);
    </script>