如何更优雅的写出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!");
}
}