在JavaScript中使用对象来优化if/else和switch

用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个小知识