用JavaScript編寫復雜的條件總是有可能創(chuàng)建一些相當混亂的代碼，很長列表的if/else語句或switch會使代碼變得臃腫。那么如何去優(yōu)化很多if/else或者switch的代碼呢？同時需要避免過多使用if/else或者switch。對象能夠幫忙我們寫出易讀的代碼，本文就跟大家分享一下。

舉例來說，假設(shè)有一個函數(shù)，該函數(shù)需要根據(jù)輸入的比較運算符，獲取該運算符的讀法。使用if/else語句，它看起來像這樣：

本文的實例僅用于說明問題，可能實現(xiàn)的方法不是最佳。

function getComparisonTitle(strOperator) {
    if (strOperator === ">") {
        return "大于";
    } else if (strOperator === ">=") {
        return "大于等于";
    } else if (strOperator === "<") {
        return "小于";
    } else if (strOperator === "<=") {
        return "小于等于";
    } else {
        return "等于";
    }
}

上面這段代碼看起來臃腫，并且可讀性也不好，使用switch，可以是這樣的：

function getComparisonTitle(strOperator) {
    let title = "";
    switch (strOperator) {
        case ">":
            title = "大于";
            break;
        case ">=":
            title = "大于等于";
            break;
        case "<":
            title = "小于";
            break;
        case "<=":
            title = "小于等于";
            break;
        default:
            title = "等于";
            break;
    }
    return title;
}

代碼看起來比之前稍微好一點，但是switch容易導致程序錯誤，并且代碼可讀性仍然不高。

開始優(yōu)化

上面的情況可以使用對象結(jié)構(gòu)來實現(xiàn)，如下：

function getComparisonTitle(strOperator) {
    const operators = {
        ">": "大于",
        ">=": "大于等于",
        "<": "小于",
        "<=": "小于等于",
        "==": "等于",
    };
    return operators[strOperator];
}

使用對象，讓代碼看起更加易讀，更簡潔。在項目過程中特別是用到switch的建議使用對象字面量的方式來優(yōu)化。

通常項目中又根據(jù)不同的情況調(diào)用不同的方法，也是可以使用同樣的方式，下面列一個簡單的例子：

function calculate(num1, num2, action) {
    const actions = {
        add: (a, b) => a + b,
        subtract: (a, b) => a - b,
        multiply: (a, b) => a * b,
        divide: (a, b) => a / b,
    };

    return typeof actions[action] === "function"
        ? actions[action](num1, num2)
        : "action未定義";
}

上面的函數(shù)實現(xiàn)簡單的運算。關(guān)于如何寫出優(yōu)雅代碼，是一個不斷學習，不斷實踐的過程，下面這些文章如有興趣，可以看看。

javascript代碼優(yōu)化的4個小技巧

Javascript代碼優(yōu)化的15個小知識