优化代码之if-else

前言

在工作中我们大多数人不可避免的需要卖面对一些老项目，老项目不可避免的就是大量的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)){}，也可以增加代码可读性。