JavaScript中的switch详解

周晓风

已于 2022-02-10 22:56:53 修改

阅读量3.7w

点赞数 16

CC 4.0 BY-SA版权

分类专栏： JS web ES 文章标签： javascript 前端开发语言

于 2022-02-10 22:49:14 首次发布

本文链接：https://blog.youkuaiyun.com/u011140116/article/details/122870529

web 同时被 3 个专栏收录

18 篇文章

订阅专栏

9 篇文章

订阅专栏

3 篇文章

订阅专栏

本文详细讲解了JavaScript switch语句的语法、工作原理，包括case和default的使用，以及严格比较规则。通过实例演示了不同场景下如何正确运用switch来选择执行代码块。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

switch 语句用来选择多个需被执行的代码块之一。

1. 语法

switch(表达式) {
  case n:
    代码块
      break;
  case n:
      代码块
      break;
  default:
      默认代码块
}

2. 代码解释

计算一次 switch 表达式
把表达式的值与每个 case 的值进行对比
如果存在匹配，则执行关联代码

3. break 关键词

如果 JavaScript 遇到 break 关键词，它会跳出 switch 代码块。不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。

4. default 关键词

default 关键词规定不存在 case 匹配时所运行的代码。

default 不必是 switch 代码块中最后一个 case。
如果 default 不是 switch 代码块中最后一个 case，请记得用 break 结束默认 case。
default 是可选的，并非必不可少（虽然惯例如此）。break 相关规则对 default 仍
然适用。

5. 严格的比较

Switch case 使用严格比较（===）。值必须与要匹配的类型相同。只有操作数属于同一类型时，严格比较才能为 true。

function demo(param) {
    switch (param) {
        case '1':
            console.log('1')
            break
        case '2':
            console.log('2')
            break
        default:
            console.log('default')
    }
}

demo('2') // 2
demo(2) // default
demo(new String('2')) // default

let o1 = {}
let o2 = {}
let o3 = {}
let o4 = o3

function demo (o) {
    switch (o) {
        case o1:
            console.log('o1')
            break
        case o2:
            console.log('o2')
            break
        case o3:
            console.log('o3')
            break
        default:
            console.log('default')
    }
}
    
demo(o1) // o1
demo(o3) // o3
demo(o4) // o3

6. case后接表达式

function demo (param) {
    switch (true) {
        case param == '1':
            console.log('1')
            break
        case param == '2':
            console.log('2')
            break
        default:
            console.log('default')
    }
}

demo (1) // 1
demo ('1') // 1
demo (2) // 2

function demo () {
    switch (3) {
        case 1 + 1:
            console.log('1 + 1')
            break
        case 1 + 2:
            console.log('1 + 2')
            break
        case 1 + 3:
            console.log('1 + 3')
            break
        default:
            console.log('default')
    }
}

demo() // 1 + 2

function demo (a, b) {
    switch (a) {
        case b + 1:
            console.log('b + 1')
            break
        case b + 2:
            console.log('b + 2')
            break
        case b + 3:
            console.log('b + 3')
            break
        default:
            console.log('default')
    }
}

demo(3, 1) // b + 2
demo(4, 1) // b + 3
demo(4, 2) // b + 2
demo(4, 4) // default

7. 表达式中的严格相等

function demo () {
    let a = 'hello'
    let b = '10'

    switch (true) {
        case (a || b == 10):
            console.log('1')
            break
        default:
            console.log('default')
    }
}

// a || b == 10 的值为 hello，和 true 不严格相等
demo() // default

function demo () {
    let a = 'hello'
    let b = '10'

    switch (true) {
        case !!(a || b == 10):
            console.log('1')
            break
        default:
            console.log('default')
    }
}

demo() // 1