代码中如果if-else比较多,阅读起来比较困难,维护起来也比较困难。不会把if-else重构成高质量代码的程序员,不是个优秀的程序员。
要明确一点,不是所有的if/else,switch/case都需要优化,当我们发现有“痛点”或者“闻到代码有坏味道”再来优化才是最好的,不然你可能会写了一个从不扩展的可扩展代码,所有的优化都是为了更好的迭代项目,更好的服务于业务,而不是为了优化而优化。
1、枚举或者构建数组取值,来避免大量if/else和switch/case
如要获取今天是星期几?
function returnWeekday(){
let string = "今天是星期";
let date = new Date().getDay();
if (date === 0) {
string += "日";
} else if (date === 1) {
string += "一";
} else if (date === 2) {
string += "二";
} else if (date === 3) {
string += "三";
} else if (date === 4) {
string += "四";
} else if (date === 5) {
string += "五";
} else if (date === 6) {
string += "六";
}
return string
}
console.log(returnWeekday())
上面的代码确实 elseif 块太多了,看着就不舒服。
我们在看《JavaScript 高级程序设计》的时候,看到这样一句话:
switch 语句与 if 语句的关系最为密切,而且也是在其他语言中普遍使用的一种流控制语句。
所以我们是不是可以考虑使用 switch 语句来优化一下呢?
注意:switch 语句在比较值的时候使用的是全等操作符,不会有类型转换的情况。
let string = "今天是星期";
let date = new Date().getDay();
switch (date) {
case 0 :
string += "日";
break;
case 1 :
string += "一";
break;
case 2 :
string += "二";
break;
case 3 :
string += "三";
break;
case 4 :
string += "四";
break;
case 5 :
string += "五";
break;
case 6 :
string += "六";
break;
}
return string
}
console.log(returnWeekday())
这里的结构看起来确实比 if 语句清晰了一点。可是还是有点疑惑?
假设哪一天,相关组织发现,星象有变。每周需要变成八天(产品的思维,你无法想象)。我们这个 returnWeekday() 方法就需要多加一层判断了。
我们的希望是已经封装好的方法,不要频繁的修改。可是需求的变动是你无法控制的。
let string = "今天是星期";
let date = new Date().getDay();
// 使用数组
let dateArr = [ 天 , 一 , 二 , 三 , 四 , 五 , 六 ];
return string + dateArr[date]
}
console.log(returnWeekday())
let string = "今天是星期";
let date = new Date().getDay();
// 使用对象
dateObj = {
0: 天 ,
1: "一",
2: "二",
3: "三",
4: "四",
5: "五",
6: "六",
};
return string + dateObj[date]
}
console.log(returnWeekday())
function returnWeekday(){
return "今天是星期" + "日一二三四五六".charAt(new Date().getDay());
}
console.log(returnWeekday())
2、以下直接提前判断:
if(condition){
//dost
}else{
return ;
}
//改为:
if(!condition){
return ;
}
//dost
3、三元运算符
handleScroll: function () {
let offsetTop = this.$refs.pride_tab_fixed.getBoundingClientRect().top;
if( offsetTop < 0 ){
this.titleFixed = true
} else {
this.titleFixed = false
}
// 改成三元
(offsetTop < 0) ? this.titleFixed = true : this.titleFixed = false;
// 我们发现条件块里面的赋值情况是布尔值,所以可以更简单
this.titleFixed = offsetTop < 0;
}
4、逻辑与运算符
falg && someMethod();
5、使用 includes 处理多重条件
if( [ 202 , 203 , 204 ].includes(code) ){ someMethod() }
6、合并条件表达式
double disablityAmount(){
if(_seniority < 2)
return 0;
if(_monthsDisabled > 12)
return 0;
if(_isPartTime)
return 0;
//do somethig
}
改为:
double disablityAmount(){
if(_seniority < 2 || _monthsDisabled > 12 || _isPartTime)
return 0;
//do somethig
}
其他还有很多,待总结。