日韩欧美国产精品免费一二-日韩欧美国产精品亚洲二区-日韩欧美国产精品专区-日韩欧美国产另-日韩欧美国产免费看-日韩欧美国产免费看清风阁

我們經常需要根據不同的條件執行不同的邏輯，傳統上，if-else 和 switch 語句是處理這類場景的常用方式。然而，隨著現代 JavaScript 的發展，出現了更優雅、更簡潔的替代方案：對象映射（Object Literal）和 Map 數據結構。

傳統 switch 語句的問題

首先，讓我們看看傳統 switch 語句的典型用法：

這種寫法存在幾個問題：

1. 冗長且重復 - 每個 case 都需要寫 case 關鍵字和 return 或 break 語句
2. 容易出錯 - 忘記 break 語句會導致意外的 fall-through 行為
3. 難以維護 - 添加或修改分支時，需要在大塊代碼中仔細添加
4. 可讀性較差 - 尤其當每個 case 分支包含較多邏輯時

使用對象映射(Object Literal)替代 switch

對象映射是替代簡單 switch 語句的最直接方式：

處理復雜邏輯

如果每個分支包含更復雜的邏輯，可以將函數作為對象的值：

使用 Map 數據結構

ES6 引入的 Map 數據結構提供了比對象字面量更強大的功能，特別適合以下場景：

1. 鍵不限于字符串，可以是任何類型（包括對象、函數等）
2. 需要頻繁添加/刪除鍵值對
3. 需要保持插入順序
4. 需要直接獲取映射的大小

用法示例

函數映射和鏈式操作

Map 非常適合實現命令模式或策略模式：

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

現代 JavaScript 為我們提供了多種工具來改進代碼質量，擁抱對象映射和 Map，可以讓我們編寫出更優雅、更易維護的代碼。

?

閱讀原文：原文鏈接