-switch-case分支/三元表达式

最新推荐文章于 2023-10-24 14:53:32 发布

喵帕斯_喵太

最新推荐文章于 2023-10-24 14:53:32 发布

阅读量499

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/116331371

版权

javascript 专栏收录该内容

58 篇文章 2 订阅

订阅专栏

01-switch-case分支

<body>
    <input type="text" name="age"><br>
    <button>提交</button>
    <script>
        // switch-case是一种条件匹配：是全等匹配匹配

        /*
            switch(表达式){	  // 不是布尔类型：是一个确定的变量
                case 值1:	  // 值1,值2...都是字面量
                    表达式的结果 === 值1，需要执行的代码
                    break;
                case 值2:
                    表达式的结果 === 值2，需要执行的代码
                    break;
                case 值3：
                    表达式的结果 === 值3，需要执行的代码
                    break;
                .......
                default:
                    表达式的结果和上面所有的case后面的值都不全等，则会执行这里的代码
                    break;
            }
        */

        // 获取用户输入的值
        document.querySelector('button').onclick = function () {
            // 获取用户输入的数据
            let age = +document.querySelector('input').value

            // 判定：整数20，30，40，50，60，70 
            switch (age) {
                case 20:
                    console.log('弱冠之年')
                    break
                case 30:
                    console.log('而立之年')
                    break

                // 条件判定：age === 30
                default:
                    console.log('不认识')
                    break
            }

            // switch-case：就是用来解决变量是固定的某些值的判定

            // switch-case：基本好处，如果条件很多很细的时候，结构比较简单
            // 事实是：使用if分支最多，switch-case使用很少

        }
    </script>
</body>

</html>

注意：
1.switch-case是一种条件匹配：是全等匹配匹配
2. case 值1: // 值1,值2…都是字面量
表达式的结果 === 值1，需要执行的代码
break;
case 值2:
表达式的结果 === 值2，需要执行的代码
break;
case 值3：
表达式的结果 === 值3，需要执行的代码
break;
…
default:
表达式的结果和上面所有的case后面的值都不全等，则会执行这里的代码
break;
}

02-switch-case分支-穿透语法

<body>
    <input type="text" name="month"><br>
    <button>提交</button>

    <script>
        // 需求：前导0补充，保证月份一定有2位

        // 用switch-case实现
        document.querySelector('button').onclick = function () {
            let month = +document.querySelector('input').value

            switch (month) {
                case 1: // 当1匹配上之后，会自动执行1下所有的代码：如果没有break，不需要满足case 2的条件，也会自动执行，直到遇到break
                case 2:
                case 3:
                case 4:
                case 5:
                case 6:
                case 7:
                case 8:
                case 9:
                    month = '0' + month
                    console.log(month)
                    break
            }

            // 没有break：就会形成穿透效果：即使后面的条件不满足，也会执行对应的代码

            // 穿透语法等给于if中的(month == 1 || month == 2 || month == 3 || month == 4...)
        }
    </script>
</body>

注意：
1.当1匹配上之后，会自动执行1下所有的代码：如果没有break，不需要满足case 2的条件，也会自动执行，直到遇到break
2.没有break：就会形成穿透效果：即使后面的条件不满足，也会执行对应的代码
3.穿透语法等给于if中的(month == 1 || month == 2 || month == 3 || month == 4…)

03-三元表达式

<body>
    <script>
        // 三元，三个表达式参与
        // 条件表达式 ？ 表达式1 : 表达式2
        // 条件表达式用于判定：true  || false
        // true：执行表达式1
        // false：执行表达式2

        // 本质就是简化if-else
        /*
            if(条件表达式){
                表达式1
            }else{
                表达式2
            }
        */

        // 三元运算：用来简化if-else的赋值
        let res = false ? 1 : 0
        console.log(res)
    </script>

    <input type="radio" name="gender">男
    <input type="radio" name="gender">女

    <script>
        let inputs = document.querySelectorAll('input')

        inputs.forEach(function (input, i) {
            input.onclick = function () {

                // let res
                // if (i == 0) {
                //     res = '男'
                // } else {
                //     res = '女'
                // }

                let gender = i == 0 ? '男' : '女'

                console.log(gender)
            }
        })
    </script>
</body>

</html>