V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Flands
V2EX  ›  程序员

关于 js 中使用 switch (true) 和 if else

  •  1
     
  •   Flands · 2020-12-22 10:18:18 +08:00 · 3481 次点击
    这是一个创建于 1435 天前的主题,其中的信息可能已经有所发展或是发生改变。
    switch (true) {
      case this.status === 0 && data.type === 1:
      case (this.status === 2 || this.status === 3) && data.status === 2:
        this.nextBtnIsOk = true
        break;
    
      default:
        break;
    }
    
    if (
      (this.status === 0 && data.type === 1) ||
      ((this.status === 2 || this.status === 3) && data.status === 2)
    ) {
      this.nextBtnIsOk = true;
    }
    

    投个票,大家习惯写哪种格式?两种都可以,看团队代码风格。
    主要是 if else 的括号太多,看着有点累,哈哈。。

    38 条回复    2021-03-14 23:43:14 +08:00
    islxyqwe
        1
    islxyqwe  
       2020-12-22 10:23:59 +08:00 via Android
    this.nextBtnIsOk = (this.status === 0 && data.type === 1) ||
    ((this.status === 2 || this.status === 3) && data.status === 2)
    Flands
        2
    Flands  
    OP
       2020-12-22 10:29:43 +08:00
    @islxyqwe 还在开发的功能,有可能有其他判断和逻辑,不一定只有 `this.nextBtnIsOk = true` 这一行
    Flands
        3
    Flands  
    OP
       2020-12-22 10:31:20 +08:00
    这里只讨论这两种风格,不要在意逻辑~
    3dwelcome
        4
    3dwelcome  
       2020-12-22 10:32:24 +08:00   ❤️ 4
    我还是第一次看到 switch 还能有这种用法,果然 JS 是万能的,涨姿势。
    3dwelcome
        5
    3dwelcome  
       2020-12-22 10:35:59 +08:00
    就个人而言,我喜欢写 early return,就是 nextBtnIsOk = true 后就直接一句 return, 也没多余判断。
    可能子函数会多一点点,但流程比较容易看懂,也没有那么多括号和 else 。
    Bijiabo
        6
    Bijiabo  
       2020-12-22 10:45:32 +08:00 via iPhone
    我倾向写 switch(true)
    BreadKiller
        7
    BreadKiller  
       2020-12-22 10:48:56 +08:00   ❤️ 2
    我也是第一次看到 switch 这种写法。
    就可读性来说 switch 这种写法确实比下面这种一大串的括号好看。

    但是我一般遇到这种很多条件的情况都会把各种条件分别定义:
    let a = this.status === 0 && data.type === 1;
    let b = (this.status === 2 || this.status === 3) && data.status === 2;
    if (a || b) {
    this.nextBtnIsOk = true;
    }
    faceRollingKB
        8
    faceRollingKB  
       2020-12-22 11:23:05 +08:00
    我的写法一般是 if + return

    if(this.status === 0 && data.type === 1){
    return;
    }
    if((this.status === 2 || this.status === 3) && data.status === 2){
    this.nextBtnIsOk = true
    return;
    }
    ...
    enjoyCoding
        9
    enjoyCoding  
       2020-12-22 11:23:52 +08:00   ❤️ 2
    if (condition1) {
    ...
    return
    }
    if (condition2) {
    ...
    return
    }
    对于 condition 比较长的
    const isCondition = () => {}
    if (isCondition()) {}
    faceRollingKB
        10
    faceRollingKB  
       2020-12-22 11:24:30 +08:00
    相对于其他写法我觉得要更灵活
    EscYezi
        11
    EscYezi  
       2020-12-22 11:44:44 +08:00 via iPhone
    如果是这两种的话选第一种,有时也用#9 的方式
    wednesdayco
        12
    wednesdayco  
       2020-12-22 11:45:07 +08:00
    为了方便扩展和理解我大概会这么写
    condition = {conditionName0:[0,1],conditionName1:[[2,3],2]};

    const getConditionResult = (cdt)=>{
    const cdt0=Array.isArray(cdt[0])?cdt[0].includes(this.status):cdt[0]===this.status;
    const cdt1=Array.isArray(cdt[1])?cdt[1].includes(data.status):cdt[1]===data.status;
    return cdt0&&cdt1;
    }

    if(getConditionResult(condition.conditionName0)||getConditionResult(condition.conditionName1)){
    return xxx=true;
    }
    kyuuseiryuu
        13
    kyuuseiryuu  
       2020-12-22 11:49:05 +08:00 via iPhone   ❤️ 3
    condition 很长的话应该把他写成函数,而不是搞这种取巧。
    abelmakihara
        14
    abelmakihara  
       2020-12-22 11:50:47 +08:00
    要么就极简 直接 this.nextBtnIsOk = (this.status === 0 && data.type === 1) || ((this.status === 2 || this.status === 3) && data.status === 2)
    特别复杂就两遍 switch 好了
    根据不同 type 做不同处理
    abelmakihara
        15
    abelmakihara  
       2020-12-22 11:51:55 +08:00
    switch(type){
    case 1: xxx();break;
    case 2: xxx2();break;
    huichao
        16
    huichao  
       2020-12-22 11:54:41 +08:00
    switch. 喜欢 switch 的写法,性能比 if else 高。
    solobat
        17
    solobat  
       2020-12-22 11:57:54 +08:00
    break 挺丑的
    AoEiuV020
        18
    AoEiuV020  
       2020-12-22 12:03:12 +08:00
    后者,
    switch 这样写太丑了,
    heyzoo
        19
    heyzoo  
       2020-12-22 12:13:02 +08:00 via Android
    这让我想起了 switch case 正则判断。我更倾向于 switch
    Biwood
        20
    Biwood  
       2020-12-22 12:54:00 +08:00
    看到过这种写法,但是我个人一直都没这么写过,代码毕竟是写给人看的,怎么直观怎么来。如果条件语句太长,要么换行,格式化代码,要么封装成函数。
    love
        21
    love  
       2020-12-22 12:58:54 +08:00
    这种 switch 写法是什么鬼?从来没见过,而且感觉很容易出错。

    switch (true) { case true: console.log("FUCK"); }
    这的确可以


    switch (true) { case 1: console.log("FUCK"); }
    这就不行了吧,你得确保条件都返回 true 别的 true 值都不行,这太容易出错了,比如一个函数返回值你不能确定就是 true,你得用 case Boolean(isSomething())包一层
    weixiangzhe
        22
    weixiangzhe  
       2020-12-22 13:00:34 +08:00
    还能这样玩啊,涨见识了,话说这个 do-expression 也挺好的
    https://babeljs.io/docs/en/babel-plugin-proposal-do-expressions
    dartabe
        23
    dartabe  
       2020-12-22 13:01:43 +08:00
    楼上的 if + early return 比较好

    反正我感觉只有 if 没有 else 的代码比较好读
    zmNv0
        24
    zmNv0  
       2020-12-22 14:03:13 +08:00
    若单变量,使用 switch
    若多变量,使用 if return
    xingchong
        25
    xingchong  
       2020-12-22 14:17:23 +08:00
    js 成天被喷简单,是个人都会用,看楼上回复竟然这么多第一次见到 switch ???
    都是后端程序猿吗?
    用哪种方式,主要看业务逻辑,比如判断订单状态,每个状态对应一种逻辑的话,switch 很直观,最后再加一个 default,这种用 ifelse 就看着有点啰嗦。
    GuuJiang
        26
    GuuJiang  
       2020-12-22 14:20:30 +08:00 via iPhone
    @xingchong 这是我见过后端被黑的最惨的一次,楼上说的不是第一次见 switch,而是第一次见 switch(true)
    xingchong
        27
    xingchong  
       2020-12-22 14:28:11 +08:00
    @GuuJiang soga,我说呢,看错了,哈哈哈
    chenyu0532
        28
    chenyu0532  
       2020-12-22 14:53:47 +08:00
    我绝大多数情况下使用 if else,莫名的看 swtich 不顺眼
    leeton
        29
    leeton  
       2020-12-22 14:56:26 +08:00
    居然能用 switch 。
    Lemeng
        30
    Lemeng  
       2020-12-22 15:01:30 +08:00
    喜欢 if
    DOLLOR
        31
    DOLLOR  
       2020-12-22 15:54:41 +08:00
    不喜欢 switch-case 的可以直接用 label 语句,

    let nextBtnIsOk = true
    label:{
    if(this.status === 0 && data.type === 1) break label;
    if((this.status === 2 || this.status === 3) && data.status === 2) break label;
    nextBtnIsOk = false;
    }
    this.nextBtnIsOk = nextBtnIsOk;
    forgottencoast
        32
    forgottencoast  
       2020-12-22 15:56:00 +08:00
    考虑代码可读性,if 。
    acmore
        33
    acmore  
       2020-12-22 16:06:00 +08:00
    如果 If 语句都要写成下边这种形式我选 Switch,读起来太累,然而你不必非要这么写 If 语句,7 楼的写法就舒服很多了。
    DOLLOR
        34
    DOLLOR  
       2020-12-22 16:27:59 +08:00
    @BreadKiller
    你的这写法会导致每次执行都要计算每个条件的值。改进一下可以使得前面的条件满足后不再计算后面的条件值。

    let willSet;
    willSet = willSet || this.status === 0 && data.type === 1;
    willSet = willSet || (this.status === 2 || this.status === 3) && data.status === 2;
    willSet = willSet || xxxxx;
    willSet = willSet || yyyyy;
    willSet = willSet || zzzzz;
    // ...

    if (willSet) {
    this.nextBtnIsOk = true;
    }
    Reapper
        35
    Reapper  
       2020-12-22 16:29:25 +08:00
    if + return
    ciddechan
        36
    ciddechan  
       2020-12-23 09:06:52 +08:00
    let a = '3';
    switch (a) {
    case 3:
    console.log(false)
    break;
    case '3':
    console.log(true)
    break;
    }

    console.log(a==3)
    console.log(a=='3')
    console.log(a===3)
    console.log(a==='3')

    switch 约等于 ===
    jifengg
        37
    jifengg  
       2020-12-23 13:53:46 +08:00
    也是第一次知道 switch 还能这么玩。
    cnelf
        38
    cnelf  
       2021-03-14 23:43:14 +08:00
    switch 的可读性确实要强一些,但是感觉不太符合 switch 在设计上的语义。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5450 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 01:23 · PVG 09:23 · LAX 17:23 · JFK 20:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.