• switch语句


    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                 800px;
                height: 50px;
                border: 1px solid #000;
                padding: 0 20px;
                font-size: 30px;
                line-height: 50px;
                color: blue;
            }
        </style>
    </head>

    <body>
        请您输入商品编号: <input type="text"><br>
        <button>查询</button>

        <div></div>

        <script>
            // switch语句
            // if语句 和 switch语句 都是分支结构语句
            // 两个语句应用环境是有区别的
            // if语句更适合做 范围条件的判断以及 嵌套的判断
            //     >  <  >=   <=   以及 判断的嵌套
            // switch语句,更适合做判断是否是某个具体数值的判断
            //     ===  

            // switch的语法格式

            /*
                switch( 变量 ){
                    case 数值1:
                        执行程序1;
                        break;

                    case 数值2:
                        执行程序2;
                        break;

                    ....

                    default:
                        default执行程序;
                        break;
                }
            
            switch      是 语句的关键词
            switch()    ()中是要判断的变量
            case 数值   判断变量中的数据,是否是某个具体的数值   
                        在JavaScript中 switch 语句 执行的 是 === 全等判断 数据类型和数值必须都是一致的
            执行程序     当变量中存储的数值 全等于 case 后定义的数值,所执行的程序
            break       终止语句
                        switch语句,默认会从定位的程序处,一直执行到所有程序的结束,除非遇到break语句,才会终止执行
                        if判断,执行完一个条件的语句之后,不会执行之后条件的语句
                        switch,执行完一个条件的语句之后,默认会执行之后条件的语句,不管满足不满足判断条件
                        switch语句中,每一个判断条件case执行的程序,最后一定要加一个break
                        除非特殊需要的情况,才会不写break

            default     就相当于 if语句 的 else
                        当 变量的数值 , 不满足所有 case 定位的数据时
                        执行default中定义的程序
                        也是做容错处理的
                        一般都把 default 写在代码的最后
                        break 关键词 可以不写    
            
            */




            // 例如有 5种 商品 输入对应的商品编号,可以获取到指定的商品信息

            var oBtn = document.querySelector('button');
            var oDiv = document.querySelector('div');
            oBtn.onclick = function () {
                var num = document.querySelector('input').value;
                // input输入获取的数据都是字符串类型
                // if( num === '1' ){
                //     oDiv.innerHTML = '商品编号1,商品名称 可口可乐 , 单价 1 元,库存 1 件';
                // }else if(num === '2'){
                //     oDiv.innerHTML = '商品编号2,商品名称 百事可乐 , 单价 2 元,库存 2 件';
                // }else if(num === '3'){
                //     oDiv.innerHTML = '商品编号3,商品名称 非常可乐 , 单价 3 元,库存 3 件';
                // }else if(num === '4'){
                //     oDiv.innerHTML = '商品编号4,商品名称 就是可乐 , 单价 4 元,库存 4 件';
                // }else if(num === '5'){
                //     oDiv.innerHTML = '商品编号5,商品名称 反正是可乐 , 单价 5 元,库存 5 件';
                // }else{
                //     oDiv.innerHTML = '没有您输入的产品编号,输入错误,您是不是瞎啊';
                // }


                // 总结:
                // if语句,执行效果,没有任何问题,只是执行效率偏低
                // if语句,是从第一个条件开始判断,如果是true就执行输出,不再执行之后的程序
                //        如果是false,继续执行下一个条件判断
                // 如果现在输入的是错误数据,需要从第一个条件,依次判断,一直到最后一个条件,都是false
                // 之后执行else中的程序
                // 实际上会执行判断所有的条件,效率就比较低

                // 在判断是否是某个数值时 如果使用 switch 语句
                // 会直接将执行程序定位 至 匹配的数值程序 上 直接执行对应的程序
                // 不用依次执行判断
                // 像这样 多个条件 都是 判断 === 某个数值 使用 switch 语句,效率更高

                switch (num) {
                    case '1':
                        oDiv.innerHTML = '商品编号1,商品名称 可口可乐 , 单价 1 元,库存 1 件';
                        break;
                    case '2':
                        oDiv.innerHTML = '商品编号2,商品名称 百事可乐 , 单价 2 元,库存 2 件';
                        break;
                    case '3':
                        oDiv.innerHTML = '商品编号3,商品名称 非常可乐 , 单价 3 元,库存 3 件';
                        break;
                    case '4':
                        oDiv.innerHTML = '商品编号4,商品名称 就是可乐 , 单价 4 元,库存 4 件';
                        break;
                    case '5':
                        oDiv.innerHTML = '商品编号5,商品名称 反正是可乐 , 单价 5 元,库存 5 件';
                        break;
                    default:
                        oDiv.innerHTML = '没有您输入的产品编号,输入错误,您是不是瞎啊';
                        break;
                }
            }

        </script>
    </body>

    </html>
    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    药方
    Git配置
    黄俊俊:做一个有想法的技术人
    刘铁猛:程序员:造阀门前,先蓄满‘情商池’
    Nginx + Tomcat 配置负载均衡集群简单实例
    mysql 用户权限管理详细
    mysql数据权限操作
    搭建分布式系统
    数据库 -- 悲观锁与乐观锁
    tomcat7以下线程控制
  • 原文地址:https://www.cnblogs.com/ht955/p/14021430.html
Copyright © 2020-2023  润新知