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

关注

发布于: 2021 年 04 月 18 日

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

复制代码

上面的函数实现简单的运算。

总结

关于如何写出优雅代码，是一个不断学习，不断实践的过程。

发布于: 2021 年 04 月 18 日阅读数: 11

原文链接:【http://xie.infoq.cn/article/d185bef6bd3c5dc9dbd0ee0d2】。文章转载请联系作者。

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发，用技术创造价值！

发布

暂无评论

创作场景

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

开始优化

总结

devpoint

评论