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

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 2149 days ago, the information mentioned may be changed or developed.

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 replies • 2021-03-14 23:43:14 +08:00

islxyqwe

Dec 22, 2020 via Android

this.nextBtnIsOk = (this.status === 0 && data.type === 1) ||
((this.status === 2 || this.status === 3) && data.status === 2)

Flands

Dec 22, 2020

@islxyqwe 还在开发的功能，有可能有其他判断和逻辑，不一定只有 `this.nextBtnIsOk = true` 这一行

Flands

Dec 22, 2020

这里只讨论这两种风格，不要在意逻辑~

3dwelcome

Dec 22, 2020

我还是第一次看到 switch 还能有这种用法，果然 JS 是万能的，涨姿势。

3dwelcome

Dec 22, 2020

就个人而言，我喜欢写 early return，就是 nextBtnIsOk = true 后就直接一句 return, 也没多余判断。
可能子函数会多一点点，但流程比较容易看懂，也没有那么多括号和 else 。

Bijiabo

Dec 22, 2020 via iPhone

我倾向写 switch(true)

BreadKiller

Dec 22, 2020

我也是第一次看到 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

Dec 22, 2020

我的写法一般是 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

Dec 22, 2020

if (condition1) {
...
return
}
if (condition2) {
...
return
}
对于 condition 比较长的
const isCondition = () => {}
if (isCondition()) {}

faceRollingKB

Dec 22, 2020

相对于其他写法我觉得要更灵活

EscYezi

Dec 22, 2020 via iPhone

如果是这两种的话选第一种，有时也用#9 的方式

wednesdayco

Dec 22, 2020

为了方便扩展和理解我大概会这么写
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;
}

Chemist

Dec 22, 2020 via iPhone

condition 很长的话应该把他写成函数，而不是搞这种取巧。

BornThisWay

Dec 22, 2020

要么就极简直接 this.nextBtnIsOk = (this.status === 0 && data.type === 1) || ((this.status === 2 || this.status === 3) && data.status === 2)
特别复杂就两遍 switch 好了
根据不同 type 做不同处理

BornThisWay

Dec 22, 2020

switch(type){
case 1: xxx();break;
case 2: xxx2();break;

huichao

Dec 22, 2020

switch. 喜欢 switch 的写法，性能比 if else 高。

solobat

Dec 22, 2020

break 挺丑的

AoEiuV020

Dec 22, 2020

后者，
switch 这样写太丑了，

heyzoo

Dec 22, 2020 via Android

这让我想起了 switch case 正则判断。我更倾向于 switch

Biwood

Dec 22, 2020

看到过这种写法，但是我个人一直都没这么写过，代码毕竟是写给人看的，怎么直观怎么来。如果条件语句太长，要么换行，格式化代码，要么封装成函数。

love

Dec 22, 2020

这种 switch 写法是什么鬼？从来没见过，而且感觉很容易出错。

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

但
switch (true) { case 1: console.log("FUCK"); }
这就不行了吧，你得确保条件都返回 true 别的 true 值都不行，这太容易出错了，比如一个函数返回值你不能确定就是 true，你得用 case Boolean(isSomething())包一层

weixiangzhe

Dec 22, 2020

还能这样玩啊，涨见识了，话说这个 do-expression 也挺好的
https://babeljs.io/docs/en/babel-plugin-proposal-do-expressions

dartabe

Dec 22, 2020

楼上的 if + early return 比较好

反正我感觉只有 if 没有 else 的代码比较好读

zmNv0

Dec 22, 2020

若单变量，使用 switch
若多变量，使用 if return

xingchong

Dec 22, 2020

js 成天被喷简单，是个人都会用，看楼上回复竟然这么多第一次见到 switch ？？？
都是后端程序猿吗？
用哪种方式，主要看业务逻辑，比如判断订单状态，每个状态对应一种逻辑的话，switch 很直观，最后再加一个 default，这种用 ifelse 就看着有点啰嗦。

GuuJiang

Dec 22, 2020 via iPhone

@xingchong 这是我见过后端被黑的最惨的一次，楼上说的不是第一次见 switch，而是第一次见 switch(true)

xingchong

Dec 22, 2020

@GuuJiang soga，我说呢，看错了，哈哈哈

chenyu0532

Dec 22, 2020

我绝大多数情况下使用 if else，莫名的看 swtich 不顺眼

leeton

Dec 22, 2020

居然能用 switch 。

Lemeng

Dec 22, 2020

喜欢 if

AV1

Dec 22, 2020

不喜欢 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

Dec 22, 2020

考虑代码可读性，if 。

acmore

Dec 22, 2020

如果 If 语句都要写成下边这种形式我选 Switch，读起来太累，然而你不必非要这么写 If 语句，7 楼的写法就舒服很多了。

AV1

Dec 22, 2020

@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

Dec 22, 2020

if + return

ciddechan

Dec 23, 2020

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

Dec 23, 2020

也是第一次知道 switch 还能这么玩。

cnelf

Mar 14, 2021

switch 的可读性确实要强一些，但是感觉不太符合 switch 在设计上的语义。