代码优化之减少if else前言 在工作中我们大多数人不可避免的需要卖面对一些老项目,老项目不可避免的就是大量的if嵌套

前言
在工作中我们大多数人不可避免的需要卖面对一些老项目,老项目不可避免的就是大量的if嵌套,可读性差。大段的if else 对于我们排查bug也很不利,对于一些cr严格的项目组,可能还会强制要求进行替换。所以我总结了几种优化if的方法,希望能帮的上忙。
尽早使用return
最简单的方法就是尽早return优化,减少else
if(value == 1) {
.....
} else {
.....
}
可以简写为
if(value == 1) {
.....
return
}
.....
使用switch case语法进行替换
提到if
想到的一定是他的好姐妹switch
了。
我们用一个小例子来直观的对比一下,假设我们有个单选项,有多个选项,针对其中一部分选项我们需要做针对性的处理。
switch (e.target.value) {//此处的e.target.value即为选中的value
case 1:
console.log('选择了选项一');
break;
case 2:
console.log('选择了选项二');
break;
case 3:
console.log('选择了选项三');
break;
default:
console.log('选择了其他');
break;
}
//如果使用if
if(e.target.value == 1){
console.log('选择了选项一');
} else if (e.target.value == 2) {
console.log('选择了选项二');
} else if (e.target.value == 3) {
console.log('选择了选项三');
}else {
console.log('选择了其他');
}
switch 后面的 (n) 可以是表达式,也可以(并通常)是变量。然后表达式中的值会与 case 中的数字作比较,如果与某个 case 相匹配,那么其后的代码就会被执行。break 的作用是防止代码自动执行到下一行。
很直观的可以看到代码的可读性增加了,但请注意,switch
并且不一定在所有情况下都比 if-else
更优。
使用三元运算符
直接使用三元运算符进行赋值操作 当需要进行一些简单的条件语句进行赋值时,可以使用三元运算符替代if 。
条件表达式 ? 表达式1 : 表达式2
if(age >= 18) {
str = '已成年'
} else {
str = '未成年'
}
//使用三元运算符
str = age >= 18 ? '已成年' : '未成年'
需要注意的是三元运算符不建议多层嵌套,可读性较差。多层嵌套三元运算符个人认为还不如if嵌套,我称之为屎山中的山头头。
运用逻辑运算
合理运用逻辑运算符 ||
(或) &&
(与)
表达式1 && 表达式2,只有所有表达式都为true,则整个表达式的运算结果才为true。
表达式1 || 表达式2,只要任意表达式为true,则整个表达式的运算结果为true。
if(flag ){
method()
}
flag && method()
可选链操作符
a?.V
if(info.data) {
data = info.data.age
}
data = info.data?.age
映射表
将具体的操作抽离成映射表,这样对于需求的增加我们只需要增加映射表中的映射就可以了,不用再去改if-else,大大减少了代码维护的成本,并且使得代码变得简洁明朗,增大了代码的可读性。
//使用映射表
let changeNumObj = {
'山': function (num) {
//进行针对1的数据处理
num = num * 4
....
},
'风': function (num) {
num = num * 5;
},
'岚': function (num) {
num = num * 2;
}
}
let calculateBonus = function (key,para){
return changeNumObj[ key ]( para );
}
calculateBonus('岚',7)
总结和反思
在实际项目中,一开始可能只针对其中一个条件有所要求,因此不存在什么if嵌套和if-else过多的情况,往往是随着项目的一次次迭代,项目代码逐渐变成了防御式代码(谁都看不懂)。当然是希望大家不要遇到这种防御式编码的屎山,但是也不至于在遇到需要优化时找不到方法。我的方法也只是自己的总结,还有许多可以用的方法运用,举个小例子,比如if(value == 1 || value == 3 || value == 5){}这样的写法已经比一个一个if好一些了,但是我们可以把他变为 if([1,3,5].includes(value)){},也可以增加代码可读性。
转载自:https://juejin.cn/post/7384636945253187611