用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未定义"; }
上面的函数实现简单的运算。