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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1430 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

2020-12-22 10:29:43 +08:00

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

Flands

2020-12-22 10:31:20 +08:00

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

3dwelcome

2020-12-22 10:32:24 +08:00

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

3dwelcome

2020-12-22 10:35:59 +08:00

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

Bijiabo

2020-12-22 10:45:32 +08:00 via iPhone

我倾向写 switch(true)

BreadKiller

2020-12-22 10:48:56 +08:00

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

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

2020-12-22 11:23:52 +08:00

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

faceRollingKB

2020-12-22 11:24:30 +08:00

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

EscYezi

2020-12-22 11:44:44 +08:00 via iPhone

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

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

2020-12-22 11:49:05 +08:00 via iPhone

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

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

2020-12-22 11:51:55 +08:00

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

huichao

2020-12-22 11:54:41 +08:00

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

solobat

2020-12-22 11:57:54 +08:00

break 挺丑的

AoEiuV020

2020-12-22 12:03:12 +08:00

后者，
switch 这样写太丑了，

heyzoo

2020-12-22 12:13:02 +08:00 via Android

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

Biwood

2020-12-22 12:54:00 +08:00

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

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

2020-12-22 13:00:34 +08:00

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

dartabe

2020-12-22 13:01:43 +08:00

楼上的 if + early return 比较好

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

zmNv0

2020-12-22 14:03:13 +08:00

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

xingchong

2020-12-22 14:17:23 +08:00

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

GuuJiang

2020-12-22 14:20:30 +08:00 via iPhone

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

xingchong

2020-12-22 14:28:11 +08:00

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

chenyu0532

2020-12-22 14:53:47 +08:00

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

leeton

2020-12-22 14:56:26 +08:00

居然能用 switch 。

Lemeng

2020-12-22 15:01:30 +08:00

喜欢 if

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

2020-12-22 15:56:00 +08:00

考虑代码可读性，if 。

acmore

2020-12-22 16:06:00 +08:00

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

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

2020-12-22 16:29:25 +08:00

if + return

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

2020-12-23 13:53:46 +08:00

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

cnelf

2021-03-14 23:43:14 +08:00

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