拋棄 switch，讓 JavaScript 代碼更簡潔
作者：JavaScript
現(xiàn)代 JavaScript 為我們提供了多種工具來改進代碼質量，擁抱對象映射和 Map，可以讓我們編寫出更優(yōu)雅、更易維護的代碼。?
我們經(jīng)常需要根據(jù)不同的條件執(zhí)行不同的邏輯，傳統(tǒng)上，if-else 和 switch 語句是處理這類場景的常用方式。然而，隨著現(xiàn)代 JavaScript 的發(fā)展，出現(xiàn)了更優(yōu)雅、更簡潔的替代方案：對象映射（Object Literal）和 Map 數(shù)據(jù)結構。
傳統(tǒng) switch 語句的問題
首先，讓我們看看傳統(tǒng) switch 語句的典型用法：
這種寫法存在幾個問題：
- 冗長且重復 - 每個 case 都需要寫 case 關鍵字和 return 或 break 語句
- 容易出錯 - 忘記 break 語句會導致意外的 fall-through 行為
- 難以維護 - 添加或修改分支時，需要在大塊代碼中仔細添加
- 可讀性較差 - 尤其當每個 case 分支包含較多邏輯時
使用對象映射(Object Literal)替代 switch
對象映射是替代簡單 switch 語句的最直接方式：
處理復雜邏輯
如果每個分支包含更復雜的邏輯，可以將函數(shù)作為對象的值：
使用 Map 數(shù)據(jù)結構
ES6 引入的 Map 數(shù)據(jù)結構提供了比對象字面量更強大的功能，特別適合以下場景：
- 鍵不限于字符串，可以是任何類型（包括對象、函數(shù)等）
- 需要頻繁添加/刪除鍵值對
- 需要保持插入順序
- 需要直接獲取映射的大小
用法示例
函數(shù)映射和鏈式操作
Map 非常適合實現(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);
}
// 擴展計算器功能
addOperation(operator, fn) {
this.operations.set(operator, fn);
return this; // 支持鏈式調用
}
}
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 為我們提供了多種工具來改進代碼質量，擁抱對象映射和 Map，可以讓我們編寫出更優(yōu)雅、更易維護的代碼。
責任編輯：趙寧寧
來源：
JavaScript
