如何实现JavaScript中的记忆化函数？

记忆化通过缓存函数结果避免重复计算，适用于纯函数、高成本、频繁调用且参数重复的场景，需注意键生成、内存消耗和缓存失效等问题，可使用Lodash的_.memoize等工具简化实现。

JavaScript中的记忆化（Memoization）是一种优化技术，它通过缓存昂贵函数调用的结果，并在相同的输入再次出现时返回缓存的结果，从而避免重复计算。本质上，它是用空间换时间，尤其适用于那些计算成本高、且纯粹（即给定相同输入总是返回相同输出）的函数。

解决方案

实现记忆化函数的核心思想是创建一个高阶函数（或称为装饰器），它接受一个原始函数作为参数，并返回一个新的函数。这个新函数会在内部维护一个缓存（通常是一个Map或对象），用来存储输入参数和对应的计算结果。

一个基础的记忆化实现可能看起来像这样：

function memoize(func) {
  const cache = new Map(); // 使用Map来存储参数和结果

  return function(...args) {
    // 简单地将所有参数拼接成一个字符串作为缓存的key
    // 这对于原始类型参数是可行的，但对对象或数组有局限性
    const key = JSON.stringify(args); 

    if (cache.has(key)) {
      console.log(`从缓存中获取结果 for key: ${key}`);
      return cache.get(key);
    }

    console.log(`计算结果 for key: ${key}`);
    const result = func.apply(this, args); // 调用原始函数
    cache.set(key, result); // 存储结果
    return result;
  };
}

// 示例：一个计算成本较高的斐波那契数列函数
function fibonacci(n) {
  if (n <= 1) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const memoizedFibonacci = memoize(fibonacci);

console.log(memoizedFibonacci(10)); // 第一次计算，并缓存
console.log(memoizedFibonacci(10)); // 第二次调用相同参数，从缓存获取
console.log(memoizedFibonacci(5));  // 第一次计算，并缓存
console.log(memoizedFibonacci(5));  // 从缓存获取

这个基础实现用

JSON.stringify

JSON.stringify

立即学习“Java免费学习笔记（深入）”；

记忆化技术在哪些场景下能发挥最大效用？

记忆化并非万能药，它有其最适合的“用武之地”。我个人认为，它最能发光发热的场景主要集中在以下几类：

1. 纯函数（Pure Functions）：这是前提中的前提。一个函数必须是纯函数，即给定相同的输入总是返回相同的输出，且没有副作用。如果函数依赖于外部状态或者有随机性，记忆化就毫无意义，甚至可能导致错误结果。
2. 计算成本高昂的函数：如果一个函数的执行需要大量的CPU时间或资源，比如复杂的数学运算、递归算法（如斐波那契数列、阶乘），或者涉及大量数据处理。对这些函数进行记忆化，可以显著减少重复计算带来的性能损耗。
3. 频繁调用且参数重复的函数：如果一个函数在程序生命周期中会被多次调用，并且它被调用的参数组合经常重复出现，那么记忆化就能大显身手。每次重复调用都能直接从缓存中获取结果，避免了重新计算。
4. 递归函数：特别是那些存在大量重复子问题计算的递归函数（比如经典的斐波那契数列）。通过记忆化，可以将每个子问题的解缓存起来，当再次遇到相同的子问题时直接返回，从而将原本指数级的复杂度降低到线性级别，这在算法优化中非常常见。

举个例子，我在处理一些前端数据可视化项目时，经常会遇到需要对原始数据进行复杂聚合或转换的场景。这些转换操作往往是纯粹的，但计算量不小。如果用户频繁切换筛选条件，但很多筛选组合又会产生相同的中间数据，这时候引入记忆化就能让界面响应速度快很多，用户体验自然就好。

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包

508

查看详情

实现记忆化时需要注意哪些潜在的陷阱或性能考量？

在享受记忆化带来的性能提升时，我们也不能忽视它可能引入的问题。我在实际应用中，尤其关注以下几点：

1. 缓存键的生成：这是最容易出错的地方。如前面提到的，

   JSON.stringify

   登录后复制
   对于复杂对象（如包含函数、循环引用、Set、Map等）或参数顺序不固定的对象作为键时，是不可靠的。如果键生成不当，可能导致缓存命中失败（性能下降）或错误地返回旧结果。更严谨的方案可能需要自定义哈希函数，或者使用专门的库来处理复杂参数的哈希。
2. 内存消耗：记忆化是用空间换时间。如果被记忆化的函数有非常多的不同输入组合，或者输入参数本身就很大，那么缓存可能会迅速膨胀，消耗大量的内存。这在长时间运行的应用程序中尤其需要警惕，可能导致内存泄漏或应用崩溃。有时需要考虑缓存淘汰策略（例如LRU - 最近最少使用），但自己实现会增加复杂性。
3. 缓存失效（Cache Invalidation）：如果被记忆化的函数依赖于外部的可变状态，而这个状态发生了变化，那么缓存中的结果就可能变得过时。此时，必须有一种机制来清除或更新缓存，否则函数会返回错误的数据。这通常意味着需要手动管理缓存的生命周期，或者设计更智能的缓存系统。
4. 函数纯度要求：记忆化只适用于纯函数。如果函数有副作用（比如修改了全局变量、发起了网络请求），或者依赖于外部可变状态，记忆化会破坏其预期行为，导致不可预测的结果。这是使用记忆化前必须严格审查的。
5. 额外开销：虽然记忆化旨在提升性能，但它本身也引入了额外的开销：检查缓存、生成缓存键、存储结果等。对于那些本身计算速度就非常快的函数，记忆化的这些额外开销可能反而会超过其带来的好处，甚至导致性能下降。所以，并不是所有函数都适合记忆化，需要根据实际情况进行性能分析。

我曾经遇到过一个情况，团队为了优化一个渲染组件的数据处理，对一个函数进行了记忆化。但后来发现，这个函数接收的参数里包含了一些每次渲染都会重新创建的对象实例，即使它们的内容完全一样，

JSON.stringify

JSON.stringify

除了手动实现，JavaScript生态中是否有现成的记忆化工具或库？

当然有，JavaScript社区非常活跃，很多常见的优化模式都有成熟的库支持。对于记忆化，最广为人知且广泛使用的工具之一就是 Lodash 库中的

_.memoize

_.memoize

import _ from 'lodash'; // 或者通过CDN引入

// 示例：一个计算成本较高的函数
function expensiveCalculation(a, b) {
  console.log(`正在进行昂贵计算: ${a} + ${b}`);
  // 模拟耗时操作
  let sum = 0;
  for (let i = 0; i < 10000000; i++) {
    sum += Math.random();
  }
  return a + b + Math.floor(sum / 1000000); // 加上一个随机数，模拟计算结果的复杂性
}

const memoizedCalculation = _.memoize(expensiveCalculation);

console.log(memoizedCalculation(1, 2)); // 第一次计算
console.log(memoizedCalculation(1, 2)); // 从缓存获取
console.log(memoizedCalculation(3, 4)); // 第一次计算
console.log(memoizedCalculation(3, 4)); // 从缓存获取

// _.memoize 还可以接受一个 resolver 函数作为第二个参数
// 这个 resolver 函数用于自定义生成缓存键的逻辑
function customKeyResolver(a, b) {
  // 例如，我们只关心第一个参数，或者将两个参数拼接起来
  return `${a}_${b}`;
}

const memoizedWithCustomKey = _.memoize(expensiveCalculation, customKeyResolver);

console.log(memoizedWithCustomKey(10, 20)); // 第一次计算
console.log(memoizedWithCustomKey(10, 20)); // 从缓存获取
console.log(memoizedWithCustomKey(20, 10)); // 第一次计算 (因为key是"20_10")

_.memoize

• 易用性：只需将函数传入即可，无需手动管理缓存逻辑。
• 灵活性：它允许你传入一个

  resolver

  登录后复制
  函数作为第二个参数，来定制缓存键的生成方式。这对于处理复杂参数或只需要部分参数作为键的场景非常有用，大大解决了前面提到的

  JSON.stringify

  登录后复制
  的局限性。
• 性能优化：Lodash 的实现经过了优化，通常在性能和内存管理方面表现良好。

除了Lodash，还有一些其他专注于记忆化的库，比如

reselect

_.memoize

以上就是如何实现JavaScript中的记忆化函数？的详细内容，更多请关注php中文网其它相关文章！