怎样实现javascript函数记忆_javascript中如何优化重复计算

函数记忆是通过缓存纯函数的计算结果来避免重复执行的优化策略，核心是用参数序列化作key查Map缓存，但需警惕副作用、动态对象参数、异步操作及this绑定问题。

什么是函数记忆（memoization）

函数记忆不是 JavaScript 原生特性，而是通过缓存已计算结果来避免重复执行的优化策略。它只对「纯函数」有效——即相同输入必然产生相同输出、且无副作用的函数。一旦函数依赖外部变量、修改全局状态或调用 Date.now()、Math.random() 等非常量值，记忆就可能返回错误结果。

手写一个通用 memoize 函数

核心逻辑是用参数序列化作为缓存 key，查表优先返回缓存值。注意：直接用 JSON.stringify(args) 处理简单参数没问题，但遇到 undefined、function、Symbol、循环引用对象会出错或失效。

• 推荐用 args.map(arg => String(arg)).join('|') 处理基础类型（数字、字符串、布尔、null），避开 JSON 的坑
• 若需支持对象/数组，应引入更健壮的哈希方案（如 lodash.memoize 内部用的 Map + 自定义 key 生成器）
• 慎用闭包缓存：长期运行的函数若不清理缓存，会导致内存泄漏

function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = args.map(arg => String(arg)).join('|');
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

什么时候不该用 memoize

记忆的收益取决于「重复调用频率 × 单次计算开销」。如果函数本身很快（比如只是加法），加一层哈希和 Map 查找反而更慢；如果参数几乎从不重复，缓存就是纯开销。

• 参数是动态生成的对象字面量（如 {x: i, y: j}），每次都是新引用 → key 永远不同 → 缓存失效
• 函数内部有异步操作（fetch、setTimeout）→ 记忆无法处理 Promise 状态，需额外封装
• 使用了 this 上下文且调用时绑定不同对象 → 手写版本默认忽略 this，需显式保存上下文或改用 bind

React 中 useMemo 和 useCallback 的区别

它们不是函数记忆的通用实现，而是 React 的渲染优化工具：只在依赖数组变化时重新计算，且缓存生命周期与组件实例绑定。

• useMemo(fn, deps) 缓存的是 计算结果，适合昂贵的同步计算（如排序、过滤大数据）
• useCallback(fn, deps) 缓存的是 函数引用，主要防止子组件因父组件重渲染而误触发更新（配合 React.memo）
• 二者都不保证「跨组件复用」或「全局缓存」，也不会自动清理，依赖项写错（如漏掉函数内使用的 state）会导致陈旧闭包问题

const expensiveList = useMemo(() => {
  return list.filter(item => item.active).sort((a, b) => a.score - b.score);
}, [list]); // 必须包含所有影响结果的依赖

实际项目中，多数场景用不到自定义 memoize。先确认瓶颈真在计算本身，再决定是否引入缓存——否则只是把问题从 CPU 换成了内存和缓存一致性。