最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 在JavaScript中使用对象来优化if/else和switch

    正文概述 掘金(天行无忌)   2021-05-31   403

    用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中使用对象来优化if/else和switch

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元