Allenice

Appearance

代码中有过多的if-else会使得阅读起来难以理解，降低了可维护性，因此要有意识的减少if-else。

消除if-else目的是减少阅读难度，增加可维护性，对于一些不影响阅读的地方，也没必要非得去掉if-else

下面总结常用的方法减少过多的if-else

使用枚举 ​

枚举可以隐藏取值时分支判断，在JavaScript中，可以采用对象实现，对象属性为枚举值，对象值为需要取的值

优化前：

js
let msg;
if (grade === "A") {
    msg = "你真棒，取得了A";
} else if (grade === "B") {
    msg = "还有进步空间哦";
} else if (grade === "C") {
    msg = "需要再努把力哦";
} else if (grade === "D") {
    msg = "不要灰心，永不言败，加油";
}
let msg;
if (grade === "A") {
    msg = "你真棒，取得了A";
} else if (grade === "B") {
    msg = "还有进步空间哦";
} else if (grade === "C") {
    msg = "需要再努把力哦";
} else if (grade === "D") {
    msg = "不要灰心，永不言败，加油";
}

优化后：

js
const msgMap = {
    A: "你真棒，取得了A",
    B: "还有进步空间哦",
    C: "需要再努把力哦",
    D: "不要灰心，永不言败，加油",
};
const msg = msgMap[grade];
const msgMap = {
    A: "你真棒，取得了A",
    B: "还有进步空间哦",
    C: "需要再努把力哦",
    D: "不要灰心，永不言败，加油",
};
const msg = msgMap[grade];

优化逻辑结构，让正常流程走主干 ​

条件表达式通常有两种表现形式，第一种形式是：所有分支都属于正常行为；第二种形式则是：条件表达式中只有一种是正常行为，其他都是不常见的特殊情况。这两种表达式有着不同的用途，这一点应该通过代码表现出来。

优化前：

js
function getPayment(status) {
    let result;
    if (status === "dead") {
        result = deadPayment();
    } else if (status === "dismiss") {
        result = dismissPayment();
    } else if (status === "retired") {
        result = retiredPayment();
    } else {
        result = normalPayment();
    }
}
function getPayment(status) {
    let result;
    if (status === "dead") {
        result = deadPayment();
    } else if (status === "dismiss") {
        result = dismissPayment();
    } else if (status === "retired") {
        result = retiredPayment();
    } else {
        result = normalPayment();
    }
}

优化后：

js
function getPayment(status) {
    if (status === "dead") {
        return deadPayment();
    }
    if (status === "dismiss") {
        return dismissPayment();
    }
    if (status === "retired") {
        return retiredPayment();
    }
    return normalPayment();
}
function getPayment(status) {
    if (status === "dead") {
        return deadPayment();
    }
    if (status === "dismiss") {
        return dismissPayment();
    }
    if (status === "retired") {
        return retiredPayment();
    }
    return normalPayment();
}

这里还可以使用枚举的方式优化：

枚举优化：

js
const statusMap = {
    dead: deadPayment,
    dismiss: dismissPayment,
    retired: retiredPayment,
    normal: normalPayment,
};

function getPayment(status) {
    return statusMap[status]?.();
}
const statusMap = {
    dead: deadPayment,
    dismiss: dismissPayment,
    retired: retiredPayment,
    normal: normalPayment,
};

function getPayment(status) {
    return statusMap[status]?.();
}

提前return， 去除不必要的else ​

通过先判断边界条件，不符合条件时提前返回

优化前：

js
if (condition) {
    //  do something
} else {
    //
}
if (condition) {
    //  do something
} else {
    //
}

优化后：

js
if (!condition) {
    //
}
//  do something
if (!condition) {
    //
}
//  do something

使用条件三目运算符 ​

三目运算符可以简化条件判断，如果代码简短，可以用三目运算符替代if-else，如果判断条件很长，或者判断结果是计算出来，使得三目运算代码偏长，这个时候阅读起来还不如if-else，就不要用三目运算符替换if-else了

优化前：

js
let price;
if (condition) {
    price = 20;
} else {
    price = 60;
}
let price;
if (condition) {
    price = 20;
} else {
    price = 60;
}

优化后：

js
const price = condition ? 20 : 60;
const price = condition ? 20 : 60;

合并条件表达式 ​

如果有一系列条件返回一样的结果，可以将它们合并为一个条件表达式，让逻辑更加清晰。

优化前：

js
let enable = false;
function isEnable(status, color) {
    if (status) {
        return true;
    }
    if (color === "red") {
        return false;
    }
    if (color === "green") {
        return true;
    }
    if (color === "yellow") {
        return false;
    }
}
enable = isEnable(true, "red");
let enable = false;
function isEnable(status, color) {
    if (status) {
        return true;
    }
    if (color === "red") {
        return false;
    }
    if (color === "green") {
        return true;
    }
    if (color === "yellow") {
        return false;
    }
}
enable = isEnable(true, "red");

优化后：

js
let enable = false;
function isEnable(status, color) {
    if (status || color === "green") {
        return true;
    }
    return false;
}
enable = isEnable(true, "red");
let enable = false;
function isEnable(status, color) {
    if (status || color === "green") {
        return true;
    }
    return false;
}
enable = isEnable(true, "red");

还可以优化：

js
let enable = false;
function isEnable(status, color) {
    return status || color === "green";
}
enable = isEnable(true, "red");
let enable = false;
function isEnable(status, color) {
    return status || color === "green";
}
enable = isEnable(true, "red");

分解条件表达式 ​

上面合并条件表达式是将相同返回的条件合并到一个if判断里面，而分解条件表达式是有些时候条件判断很复杂，很难弄清楚条件判断的功能是什么，导致可读性下降，可以将复杂的条件判断提炼为独立函数。

虽然我们的代码长度增加了，但是我们提炼了新的函数，可读性更高，也便于单元测试。

优化前：

js
function get_discount_price(price) {
    if (
        (new Date().getMonth() === 5 && new Date().getDate() === 18) ||
        (new Date().getMonth() === 10 && new Date().getDate() === 11)
    ) {
        return price * 0.8;
    } else {
        return price;
    }
}
function get_discount_price(price) {
    if (
        (new Date().getMonth() === 5 && new Date().getDate() === 18) ||
        (new Date().getMonth() === 10 && new Date().getDate() === 11)
    ) {
        return price * 0.8;
    } else {
        return price;
    }
}

优化后：

js
function get_discount_price(price) {
    if (isDiscount()) {
        return price * 0.8;
    } else {
        return price;
    }
    function isDiscount() {
        return (
            (new Date().getMonth() + 1 === 6 && new Date().getDate() === 18) ||
            (new Date().getMonth() + 1 === 11 && new Date().getDate() === 11)
        );
    }
}
function get_discount_price(price) {
    if (isDiscount()) {
        return price * 0.8;
    } else {
        return price;
    }
    function isDiscount() {
        return (
            (new Date().getMonth() + 1 === 6 && new Date().getDate() === 18) ||
            (new Date().getMonth() + 1 === 11 && new Date().getDate() === 11)
        );
    }
}