JS大型switch语句的两种方案：性能内存对比及更佳实现探讨

方案1 vs 方案2：性能与内存分析 #

性能表现 #

• 方案1：
  代码初始化阶段就创建了所有case对应的函数实例，switch匹配到目标case后直接调用已存在的函数。开销仅为switch的匹配成本+函数直接调用，性能更稳定，尤其是高频调用场景下。
• 方案2：
  每次调用lookup函数时，都要走switch匹配逻辑，匹配成功后才创建新的箭头函数并返回调用。不仅多了一层函数调用的开销，还会重复创建相同逻辑的函数实例（除非引擎做了特殊缓存，一般不会），高频调用同一case时性能损耗明显。

结论：方案1的性能优于方案2。

内存占用 #

• 方案1：
  初始化时就将所有case的函数实例存入内存，不管是否被调用。如果case数量极大且大部分很少触发，会造成不必要的内存占用。
• 方案2：
  仅当case被触发时才创建对应的函数实例，但同一case被多次调用时，每次都会生成新的函数实例（无缓存的情况下），反而会积累更多内存对象；但初始内存占用比方案1低。

结论：内存表现取决于场景——如果大部分case很少被用，方案2初始内存占优；如果高频调用多个case，方案1的内存更稳定（不会重复创建函数）。

更优的实现方式 #

1. 纯对象映射直接调用（推荐，适合大多数场景） #

去掉冗余的switch，直接用表达式作为key访问映射对象并执行函数，属性访问为O(1)，性能比switch更优，代码也更简洁：

const actionMap = {
  case1: () => { /* case1的逻辑 */ },
  case2: () => { /* case2的逻辑 */ },
  // ... 其他case
};

// 调用逻辑
const targetAction = actionMap[expression];
if (targetAction) {
  targetAction();
} else {
  // 处理未匹配到的默认情况
}

2. 惰性初始化映射（适合case数量极多、大部分很少触发的场景） #

通过对象getter实现函数的惰性创建，第一次调用时才初始化函数并缓存，兼顾初始内存占用和后续调用性能：

const actionMap = {
  get case1() {
    const action = () => { /* case1的逻辑 */ };
    // 替换getter，下次直接访问缓存的函数
    Object.defineProperty(this, 'case1', { value: action });
    return action;
  },
  get case2() {
    const action = () => { /* case2的逻辑 */ };
    Object.defineProperty(this, 'case2', { value: action });
    return action;
  },
  // ... 其他case
};

// 调用方式和纯映射一致
const targetAction = actionMap[expression];
if (targetAction) {
  targetAction();
}

补充说明 #

• 现代JS引擎会对switch做一定优化（比如连续值的跳转表），但对象映射的属性访问在多数场景下仍有性能优势，尤其是case数量超过10个时。
• 如果需要处理大量动态case，还可以考虑Map结构，它的key支持更复杂的类型，性能和对象映射接近。

内容的提问来源于stack exchange，提问作者Robert