devpoint.cn

用JavaScript编写复杂的条件总是有可能创建一些相当混乱的代码，很长列表的if/else语句或switch会使代码变得臃肿。那么如何去优化很多if/else或者switch的代码呢？同时需要避免过多使用if/else或者switch。对象能够帮忙我们写出易读的代码，本文就跟大家分享一下。

举例来说，假设有一个函数，该函数需要根据输入的比较运算符，获取该运算符的读法。使用if/else语句，它看起来像这样：

本文的实例仅用于说明问题，可能实现的方法不是最佳。

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容易导致程序错误，并且代码可读性仍然不高。

开始优化

上面的情况可以使用对象结构来实现，如下：

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

使用对象，让代码看起更加易读，更简洁。在项目过程中特别是用到switch的建议使用对象字面量的方式来优化。

通常项目中又根据不同的情况调用不同的方法，也是可以使用同样的方式，下面列一个简单的例子：

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未定义";
}

上面的函数实现简单的运算。关于如何写出优雅代码，是一个不断学习，不断实践的过程，下面这些文章如有兴趣，可以看看。

javascript代码优化的4个小技巧

Javascript代码优化的15个小知识