如何利用 Memoization 技术缓存数组计算结果避免重复迭代-js教程-PHP中文网

Memoization 的核心是用空间换时间，通过缓存纯函数的计算结果提升性能；关键在于为数组输入生成稳定可哈希的键（如 JSON.stringify），并注意适用场景与限制。

如何利用 memoization 技术缓存数组计算结果避免重复迭代

Memoization 的核心是“用空间换时间”——把已算出的结果存起来，下次遇到相同输入就直接返回。对数组类计算（比如求和、去重、排序、查找最大值、转换结构等），只要函数是纯的（无副作用、输出只依赖输入），就非常适合加缓存。

关键前提：确保输入可哈希作为缓存键

数组本身不能直接当 key（引用类型，每次 new [] 都是新对象），必须生成稳定、唯一、可复用的字符串键。常见做法：

对简单数字/字符串数组，用 JSON.stringify(arr) 最直观（注意顺序敏感、不支持 undefined / function / NaN 等）
若数组含对象或需忽略顺序，先深克隆 + 排序 + JSON 化，或用更健壮的序列化库（如 fast-deep-equal 的 key 生成逻辑）
若数组长度固定且元素类型明确（如 RGB 三元组），可用 arr.join('|') 提升性能
避免对超长数组（如 >10k 元素）做 stringify，可能触发内存或性能问题；此时应评估是否真需缓存，或改用分块/采样策略

手写通用 memoize 工具函数（支持数组输入）

下面是一个轻量、可复用的 memoize 实现，自动处理数组参数：

function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    // 将所有参数转为可比较的 key：数组用 JSON.stringify，其他用 String()
    const key = args.map(arg => 
      Array.isArray(arg) ? JSON.stringify(arg) : String(arg)
    ).join('|');
    
    if (cache.has(key)) {
      return cache.get(key);
    }
    
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
}

// 使用示例：缓存一个耗时的数组去重并求和函数
const expensiveSumUnique = memoize((arr) => {
  console.log('执行实际计算...');
  return [...new Set(arr)].reduce((a, b) => a + b, 0);
});

console.log(expensiveSumUnique([1, 2, 2, 3])); // 打印"执行实际计算..." → 6
console.log(expensiveSumUnique([1, 2, 2, 3])); // 直接返回 6，不打印

Vue/React 中的数组计算场景优化

框架本身已内置部分 memoization 能力，合理利用能省去手动缓存：

Vue 计算属性：只要依赖的数组是响应式数据（如 data 或 ref），其 getter 默认缓存。修改数组内容（push/splice）会触发更新，但未变时不重复执行
React useMemo：第二个参数传入数组依赖项（如 [inputArray]），仅当该数组引用变化或浅层值变化时才重新计算。注意：useMemo 不深比较数组内容，所以要确保 inputArray 是稳定引用（例如用 useRef 或 useCallback 包装生成）
不要对每次渲染都新建数组（如 list.map(...) 直接传给 memoized 函数），这会导致 key 总是不同，缓存失效