非零基础自学前端最后一遍二 JavaScript基础 5 JavaScript分支语句 5.11 Switch语句的使用

浅浅的花香味﹌ 2024-03-25 23:01 43阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  二 JavaScript基础
         *  5 JavaScript分支语句
         *   *  5.11 Switch语句的使用
             *   *  5.11.1 switch语句
                 *  5.11.2 switch语句的补充

![在这里插入图片描述][ded569a60d9443ce80679c3428bd4ff8.png_pic_center]

#### 二 JavaScript基础 ####

#### 5 JavaScript分支语句 ####

##### 5.11 Switch语句的使用 #####

###### 5.11.1 switch语句 ######

*  switch是分支结构的一种语句：
    
     *  它是通过判断表达式的结果（或者变量）是否等于case语句的常量，来执行相应的分支体的；
 *  与if语句不同的是，switch语句只能做值的相等判断（使用全等运算符 ===），而if语句可以做值的范围判断；
 *  switch的语法：
    
     *  switch 语句有至少一个 case 代码块和一个可选的 default 代码块。
    
    ![在这里插入图片描述][181adecaf8ad4b56a19695cd1be21a01.png_pic_center]

###### 5.11.2 switch语句的补充 ######

*  case穿透问题：
    
     *  一条case语句结束后，会自动执行下一个case的语句；
     *  这种现象被称之为case穿透；
 *  break关键字
    
     *  通过在每个case的代码块后添加break关键字来解决这个问题；
 *  注意事项：这里的相等是严格相等。
    
     *  被比较的值必须是相同的类型才能进行匹配。
 *  案例练习：播放模式（单曲循环、循环播放、随机播放）

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
    
      <script>
    
        // 语法
        // switch (表达式/变量) {
          
        //   case 常量1:
        //     // 语句
        // }
    
    
        // 案例:
        // 上一首的按钮: 0
        // 播放/暂停的按钮: 1
        // 下一首的按钮: 2
        // var btnIndex = 100
        // if (btnIndex === 0) {
          
        //   console.log("点击了上一首")
        // } else if (btnIndex === 1) {
          
        //   console.log("点击了播放/暂停")
        // } else if (btnIndex === 2) {
          
        //   console.log("点击了下一首")
        // } else {
          
        //   console.log("当前按钮的索引有问题~")
        // }
    
        var btnIndex = 0
        switch (btnIndex) {
          
          case 0:
            console.log("点击了上一首")
            break
          case 1:
            console.log("点击了播放/暂停")
            // 默认情况下是有case穿透
            break
          case 2:
            console.log("点击了下一首停")
            break
          default:
            console.log("当前按钮的索引有问题~")
            break
        }
    
      </script>
    
    </body>
    
    </html>

渲染结果

![在这里插入图片描述][bc4b55ca69ea4c519d57dc462ed9b98e.png_pic_center]

[ded569a60d9443ce80679c3428bd4ff8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/d70bc91f5e9c4f249bf291cfd7d84178.png
[181adecaf8ad4b56a19695cd1be21a01.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/d3b9ada757a0489c87bff6b67cecead8.png
[bc4b55ca69ea4c519d57dc462ed9b98e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/14469e1084fa455e905fb6c13e977b47.png