如何更优雅的写出js条件判断

发表于 | 分类于

数组方法 Array.includes

举例：

1
2
3
4
5
6
7
8
9
10
// 当要判断多个或条件的时候
// 之前的写法
if(condition==='A' || condition==='B' || condition==='C'){
  console.log("Passed!")
}
// 使用Array.includes
const conditions=['A','B','C']
if(conditions.includes(condition)){
  console.log("Passed!")
}

通过比较我们可以看出，第一种写法代码量会多很多，而且容易出错，代码维护效率低，第二种写法代码结构更清晰，当要添加额外的条件时，只需要到条件数组定义处添加即可。

提前退出 / 提前返回

1
2
3
4
5
6
7
8
9
10
11
12
13
// 嵌套的if else 语句
if(conditionA){
   if(conditonB){
     if(conditionC){
        console.log("see me")
     }
   }
} 
// 提前返回
if(!conditionA) return;
if(!conditionB) return;
if(!conditionC) return;
console.log("see me")

对象字面量代替Switch语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// switch
function switchFn(str){
  switch(str){
    case 'apple':console.log("I'm an apple!"); break;
    case 'orange':console.log("I'm an orange!"); break;
    default:console.log("I'm fruit!");
  }
}
//对象字面量
function switchFn(str){
  const fruitObj={
    'apple':"I'm an apple!",
    "orange":"I'm an orange!"
  }
  console.log(fruitObj[str]||"I'm fruit!")
}

很直观的可以看出，对象字面量的写法更清晰简洁，建议采用这用写法。

默认参数与解构

1
2
3
4
const fn=({name,age}={})=>{
  console.log(name);
  console.log(age);
}

这样可以避免出现引用的的对象的属性的提示对象为undefined
name和age的值可能是undefined 但是不会出现报错异常的问题

用Array.every & Array.some 匹配全部/部分内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 匹配全部
function allPatch(){
  const arr=[1,2,3]
  if(arr.every(item=>typeof item === 'number')){
    console.log("we are all number!");
  }
}
// 部分匹配
function partPatch(){
  const arr=['1','2','3',4]
  if(arr.some(item=>typeof item === 'number')){
    console.log("4 says: I'm a number!");
  }
}