我們經(jīng)常需要根據(jù)不同的條件執(zhí)行不同的邏輯,傳統(tǒng)上,if-else
和 switch
語句是處理這類場景的常用方式。然而,隨著現(xiàn)代 JavaScript 的發(fā)展,出現(xiàn)了更優(yōu)雅、更簡潔的替代方案:對(duì)象映射(Object Literal)和 Map 數(shù)據(jù)結(jié)構(gòu)。
傳統(tǒng) switch 語句的問題
首先,讓我們看看傳統(tǒng) switch
語句的典型用法:
這種寫法存在幾個(gè)問題:
- 冗長且重復(fù) - 每個(gè)
case
都需要寫 case
關(guān)鍵字和 return
或 break
語句 - 容易出錯(cuò) - 忘記
break
語句會(huì)導(dǎo)致意外的 fall-through 行為 - 難以維護(hù) - 添加或修改分支時(shí),需要在大塊代碼中仔細(xì)添加
- 可讀性較差 - 尤其當(dāng)每個(gè) case 分支包含較多邏輯時(shí)
使用對(duì)象映射(Object Literal)替代 switch
對(duì)象映射是替代簡單 switch
語句的最直接方式:
處理復(fù)雜邏輯
如果每個(gè)分支包含更復(fù)雜的邏輯,可以將函數(shù)作為對(duì)象的值:
使用 Map 數(shù)據(jù)結(jié)構(gòu)
ES6 引入的 Map
數(shù)據(jù)結(jié)構(gòu)提供了比對(duì)象字面量更強(qiáng)大的功能,特別適合以下場景:
- 鍵不限于字符串,可以是任何類型(包括對(duì)象、函數(shù)等)
用法示例
函數(shù)映射和鏈?zhǔn)讲僮?/span>
Map 非常適合實(shí)現(xiàn)命令模式或策略模式:
classCalculator {
constructor() {
this.operations = newMap([
['+', (a, b) => a + b],
['-', (a, b) => a - b],
['*', (a, b) => a * b],
['/', (a, b) => a / b],
['%', (a, b) => a % b],
['', (a, b) => a b]
]);
}
calculate(a, operator, b) {
const operation = this.operations.get(operator);
if (!operation) {
throw new Error(`Unsupported operator: ${operator}`);
}
return operation(a, b);
}
// 擴(kuò)展計(jì)算器功能
addOperation(operator, fn) {
this.operations.set(operator, fn);
return this; // 支持鏈?zhǔn)秸{(diào)用
}
}
const calc = new Calculator()
.addOperation('log', (a, b) =>Math.log(a) / Math.log(b));
console.log(calc.calculate(10, '+', 5)); // 15
console.log(calc.calculate(10, 'log', 10)); // 1
現(xiàn)代 JavaScript 為我們提供了多種工具來改進(jìn)代碼質(zhì)量,擁抱對(duì)象映射和 Map,可以讓我們編寫出更優(yōu)雅、更易維護(hù)的代碼。
?
閱讀原文:原文鏈接
該文章在 2025/5/6 12:16:02 編輯過