如何实现传入相同参数时阻止复杂函数重复调用？

实现思路 #

• 利用闭包存储缓存结果，避免全局变量污染
• 将传入的参数序列化为唯一的缓存key，判断是否已经有对应缓存
• 存在缓存直接返回结果，不存在则执行原函数，存储结果后返回

完整实现代码 #

const complexFunction = (arg1, arg2) => { 
  /* 此处为复杂计算逻辑 */ 
  console.log('complexFunction');
  return true;
};

// memo缓存函数实现
const memo = (fn) => {
  // 闭包存储缓存，用Map扩展性更强
  const cache = new Map();
  return function(...args) {
    // 生成缓存key：序列化参数作为唯一标识
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      // 存在缓存直接返回
      return cache.get(key);
    }
    // 不存在缓存则执行原函数，用apply保证this指向正确
    const result = fn.apply(this, args);
    // 存储结果到缓存
    cache.set(key, result);
    return result;
  }
}

const memoComplex = memo(complexFunction);

// 测试
memoComplex(1, 2); // 打印 complexFunction
memoComplex(1, 2); // 无打印，直接返回缓存结果
memoComplex(1, 3); // 打印 complexFunction

注意事项 #

• 当前实现用JSON.stringify序列化参数生成key，不适用于参数包含循环引用、函数、Symbol类型的场景，如果需要支持这类参数，可以替换为自定义的序列化逻辑
• 缓存默认永久存储，如果调用时参数组合非常多，会占用额外内存，可根据业务需求添加缓存过期时间、LRU缓存淘汰策略优化
• 如果需要对参数做引用相等性判断而非值相等，可直接将参数数组作为Map的key，无需序列化处理

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