在JavaScript中复杂的条件判断经常会导致代码变得混乱,一长串的if/else或者switch会使代码块变得臃肿。
例如,假设我们有个函数需要根据实际业务知识对一段短语进行语义转换,只用if/else语句的结构如下:
function getTranslation (str) {
if (str.toLowerCase() === 'stock') {
return 'fall in stock';
} else if (str.toLowerCase() === 'fund') {
return 'welfare fund';
} else if (str.toLowerCase() === 'bond') {
return 'short-term liabilities';
} else if (str.toLowerCase() === 'deposit') {
return 'fixed deposit';
}
return 'finance';
}
复制代码
这段代码的可读性并不高,而且还有重复的toLowerCase()语句。如果使用switch语句:
function getTranslation (str) {
switch (str.toLowerCase()) {
case 'stock':
return 'fall in stock';
case 'fund':
return 'welfare fund';
case 'bond':
return 'short-term liabilities';
case 'deposit':
return 'fixed deposit';
default:
return 'finance';
}
}
复制代码
虽然只调用了一次toLowerCase(),但是仍然觉得不那么可读,swtich语句遇到更复杂的逻辑容易容易遗漏break导致错误。
可以使用对象以更简洁的方式实现上述功能:
function getTranslation (str) {
const obj = {
'stock': 'fall in stock',
'fund': 'welfare fund',
'bond': 'short-term liabilities',
'deposit': 'fixed deposit'
};
return obj[str.toLowerCase()] ?? 'finance';
}
复制代码
第九行最后一部分使用空合并运算符(??)来设置默认值。也就是只有obj[str.toLowerCase()]为null或者undefined(但不是0或者false)时返回'finance'。这点很关键,因为我们可能会想合法的返回0或者false,例如:
function getTranslation (str) {
const obj = {
'true': true,
'false': false
};
return obj[str.toLowerCase()] ?? 'not boolean';
}
复制代码
当有更复杂的逻辑可以将函数作为值传递给对象的键并执行响应:
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 actions[action]?.(num1, num2) ?? "Calculation is not recognised";
}
复制代码
这里第9行使用了可选链操作符(?.)来执行已定义的响应,否则则返回默认字符串。