JavaScript 记忆（Memoization）函数

最新推荐文章于 2025-05-13 17:37:20 发布
最新推荐文章于 2025-05-13 17:37:20 发布
阅读量964 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5cb8a0555188253238022b7c
记忆化（Memoization）是一种性能优化技术，通过缓存函数结果来避免重复计算。本文以 fibonacci 数列为例，对比普通递归与记忆化递归的执行效率，并介绍了 lodash/memoize 和 memoize-one 两个库的使用。在 React 组件中，使用 memoize-one 可以有效避免内存泄漏，提高组件性能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

记忆函数（Memoization）是一种用于长递归或长迭代操作性能优化的编程实践。

记忆函数实现原理：使用一组参数初次调用函数时，缓存参数和计算结果，当再次使用相同的参数调用该函数时，直接返回相应的缓存结果。

注意: 记忆化函数不能有副作用。

以求解 fibonacci 数为例演示记忆函数

普通递归版

function fibonacci(n) {
    console.log(`calculate fibonacci(${n})...`)
    if (n < 2) {
        return 1;
    } else {
        return fibonacci(n - 2) + fibonacci(n - 1);
    }
}
复制代码

记忆递归版

const memoizedFibonacci = (function () {
    const cache = {} // 计算结果缓存

    return function fibonacci(n) {
        // 不同的参数按一定的规则计算得到不同的缓存键值
        const key = n

        // 每次执行时首先检查缓存
        // 若当前参数的计算结果已有缓存，直接返回缓存结果
        if (cache[key]) {
            return cache[key]
        }

        // 否则，计算、缓存并返回结果
        console.log(`calculate fibonacci(${n})...`)
        if (n < 2) {
            return cache[key] = 1;
        } else {
            return cache[key] = fibonacci(n - 2) + fibonacci(n - 1);
        }
    }
})()
复制代码

执行过程对比

// 依次执行下述语句，观察输出

fibonacci(3);
/**
 * execution-log:
 *   calculate fibonacci(3)...
 *   calculate fibonacci(1)...
 *   calculate fibonacci(2)...
 *   calculate fibonacci(0)...
 *   calculate fibonacci(1)...
 *
 * return-value:
 *   3
 */

fibonacci(5);
/**
 * execution-log:
 *   calculate fibonacci(5)...
 *   calculate fibonacci(3)...
 *   calculate fibonacci(1)...
 *   calculate fibonacci(2)...
 *   calculate fibonacci(0)...
 *   calculate fibonacci(1)...
 *   calculate fibonacci(4)...
 *   calculate fibonacci(2)...
 *   calculate fibonacci(0)...
 *   calculate fibonacci(1)...
 *   calculate fibonacci(3)...
 *   calculate fibonacci(1)...
 *   calculate fibonacci(2)...
 *   calculate fibonacci(0)...
 *   calculate fibonacci(1)...
 *
 * return-value:
 *   8
 */

/* ------------------------------- */

memoizedFibonacci(3);
/**
 * execution-log:
 *   calculate fibonacci(3)...
 *   calculate fibonacci(1)...
 *   calculate fibonacci(2)...
 *   calculate fibonacci(0)...
 *
 * return-value:
 *   3
 */

memoizedFibonacci(5);
/**
 * fibonacci(0), fibonacci(1), ..., fibonacci(3) 已缓存结果，无须重新计算
 *
 * execution-log:
 *   calculate fibonacci(5)...
 *   calculate fibonacci(4)...
 *
 * return-value:
 *   8
 */

memoizedFibonacci(10);
/**
 * fibonacci(0), fibonacci(1), ..., fibonacci(5) 已缓存结果，无须重新计算
 *
 * execution-log:
 *   calculate fibonacci(10)...
 *   calculate fibonacci(8)...
 *   calculate fibonacci(6)...
 *   calculate fibonacci(7)...
 *   calculate fibonacci(9)...
 *
 * return-value:
 *   89
 */

memoizedFibonacci(9);
/**
 * fibonacci(0), fibonacci(1), ..., fibonacci(10) 已缓存结果，无须重新计算
 *
 * execution-log:
 *
 * return-value:
 *   55
 */
复制代码

可以看到

  • 普通递归版执行大量的重复计算
  • 记忆化递归版避免了重复计算

函数记忆化之 lodash/memoize

_.memoize(func, [resolver])

使用该函数可以创建记忆化版本的 func 函数，例如：

import memoize from 'lodash/memoize';

function fibonacci(n) {
    if (n < 2) {
        return 1;
    } else {
        return fibonacci(n - 2) + fibonacci(n - 1);
    }
}

const memoizedFibonacci = memoize(fibonacci);
复制代码

注意，使用 _.memoize 函数有内存泄漏的风险，可以根据应用场景定制 _.memoize.Cache 进行优化，例如：

import memoize from 'lodash/memoize';

/**
 * @param max {number} 缓存结果数上限
 */
function getLimitedCache(max = 200) {
    class LimitedCache {
        constructor() {
            this._max = max; // 设定缓存结果数上限
            this._store = new Map();
        }
        set(key, value) {
            const store = this._store;
            const max = this._max;
            if (store.size >= max) {
                store.clear();
            }
            return store.set(key, value);
        }
        get(key) {
            return this._store.get(key);
        }
        delete(key) {
            return this._store.delete(key);
        }
        has(key) {
            return this._store.has(key);
        }
        clear() {
            return this._store.clear();
        }
    }
}

function limitedMemoize(...args) {
    const DefaultCache = memoize.Cache;
    memoize.Cache = getLimitedCache();
    return memoize(...args);
    memoize.Cache = DefaultCache;
}
复制代码

实现：lodash/memoize.js (github 链接)

/**
 * Creates a function that memoizes the result of `func`. If `resolver` is
 * provided, it determines the cache key for storing the result based on the
 * arguments provided to the memoized function. By default, the first argument
 * provided to the memoized function is used as the map cache key. The `func`
 * is invoked with the `this` binding of the memoized function.
 * 
 * **Note:** The cache is exposed as the `cache` property on the memoized
 * function. Its creation may be customized by replacing the `memoize.Cache`
 * constructor with one whose instances implement the
 * [`Map`](http://ecma-international.org/ecma-262/7.0/#sec-properties-of-the-map-prototype-object)
 * method interface of `clear`, `delete`, `get`, `has`, and `set`.
 *
 * @since 0.1.0
 * @category Function
 * @param {Function} func The function to have its output memoized.
 * @param {Function} [resolver] The function to resolve the cache key.
 * @returns {Function} Returns the new memoized function.
 * @example
 *
 * const object = { 'a': 1, 'b': 2 }
 * const other = { 'c': 3, 'd': 4 }
 *
 * const values = memoize(values)
 * values(object)
 * // => [1, 2]
 *
 * values(other)
 * // => [3, 4]
 *
 * object.a = 2
 * values(object)
 * // => [1, 2]
 *
 * // Modify the result cache.
 * values.cache.set(object, ['a', 'b'])
 * values(object)
 * // => ['a', 'b']
 *
 * // Replace `memoize.Cache`.
 * memoize.Cache = WeakMap
 */
function memoize(func, resolver) {
  if (typeof func != 'function' || (resolver != null && typeof resolver != 'function')) {
    throw new TypeError('Expected a function')
  }
  const memoized = function(...args) {
    const key = resolver ? resolver.apply(this, args) : args[0]
    const cache = memoized.cache

    if (cache.has(key)) {
      return cache.get(key)
    }
    const result = func.apply(this, args)
    memoized.cache = cache.set(key, result) || cache
    return result
  }
  memoized.cache = new (memoize.Cache || Map)
  return memoized
}

memoize.Cache = Map

export default memoize
复制代码

函数记忆化之 memoize-one

github.com/alexreardon…

memoize-one 生成的记忆函数只缓存最近一次调用的参数和计算结果。当使用与最近一次相同的参数调用 memoized 函数时，返回上一次的缓存的结果，否则执行完整的计算过程，并更新缓存为此次调用的参数和结果。

memoize-one 生成的记忆函数不存在内存泄漏的风险。

memoize-one 源码（JavaScript 版）：

function areInputsEqual(newInputs, lastInputs) {
  if (newInputs.length !== lastInputs.length) {
    return false;
  }
  for (let i = 0; i < newInputs.length; i++) {
    if (newInputs[i] !== lastInputs[i]) {
      return false;
    }
  }
  return true;
}

function memoize(resultFn, isEqual = areInputsEqual) {
  let lastThis;
  let lastArgs = [];
  let lastResult;
  let calledOnce = false;

  // breaking cache when contex (this) or arguments change
  const result = function(...newArgs) {
    if (calledOnce && lastThis === this && isEqual(newArgs, lastArgs)) {
      return lastResult;
    }

    lastResult = resultFn.apply(this, newArgs);
    calledOnce = true;
    lastThis = this;
    lastArgs = newArgs;
    return lastResult;
  };

  return result;
}
复制代码

在 React 组件中使用 memoize-one

场景：组件接收一个 list 以及其他一些参数(<FilterList list={list} {...otherProps} />)，根据不同的 state.activeKey 过滤 props.list 并展示，根据其他参数完成其他事务。

方案：

  1. 一种比较繁琐的方案：维护 state.filteredList，手动监听 props.list 和 state.activeKey， 当 props.list 或 state.activeKey 变化时更新 state.filteredList。

  2. 一种简洁但存在性能问题的方案：每次 render() 时使用 state.activeKey 过滤 props.list 并渲染。

  3. 使用 memoize-one 的优化方案：使用 memoize-one 生成记忆函数 memoizedFilter()，在每次 render() 时使用记忆函数 memoizedFilter(list, activeKey) 获得过滤结果并渲染。

方案3具体实现如下：

import React from 'react';
import { Tab } from 'antd';
import memoize from 'memoize-one';

const tabKeys = ['1', '2', '3'];

class FilterList extends React.Component {
  state = {
    activeKey: '1',
  };

  // 创建 memoized filter
  memoizedFilter = memoize(
    (list, activeKey) => list.filter(item => item.key === activeKey)
  );

  switchTab = (key) = {
    this.setState({ activeKey: key });
  }

  render() {
    const { list } = this.props
    const { activeKey } = this.state

    /**
     * 在每次 render 时进行过滤，使用 memoizedFilter 保证了
     * 只有当 list 或 activeKey 变化时才重新计算过滤结果
     */
    const filteredList = this.memoizedFilter(list, activeKey);

    /**
     * 如果直接使用 list.filter(item => item.key === activeKey)
     * 则每次 render 时都要重新计算过滤结果，不管 list 和 activeKey 有无变化
     */

    return (
      <div>
        <div className="tabs">
          {tabKeys.map(key => (
            <div
              key={key}
              onClick={() => { this.switchTab(key); }}
            >
              {`tab ${key}`}
            </div>
          ))}
        </div>

        <div className="list">
          {filteredList.map(item => (
            <div key={item.id}>{item.label}</div>
          ))}
        </div>
      </div>
    );
  }
}

class Page extends React.Component {
  state = {
    list: [],
  }

  // ...

  render() {
    const { list } = this.state;
    return (
      <div>
        {/* ... */}

        <FilterList list={list} />

        {/* ... */}
      </div>
    )
  }
}
复制代码

方案3：

  • 不用维护 filteredList
  • 不用手动监听 props.list 和 state.activeKey 的变化
  • 只在 props.list 或 state.activeKey 变化时重新计算 filteredList，不存在性能问题

转载于:https://juejin.im/post/5cb8a0555188253238022b7c

JS中的函数记忆
gghhb12的博客
01-17 1782
Memoization — 函数记忆或函数缓存，是一种优化技术，用于许多编程语言中，以减少冗余、昂贵的函数调用。这是通过缓存函数的返回值来实现的。函数记忆是指将上次的计算结果缓存起来，当下次调用时，如果遇到相同的参数，就直接返回缓存中的数据// 假设 memoize 可以实现函数记忆memoizedAdd(1, 2) // 相同的参数，第二次调用时，从缓存中取出数据，而非重新计算一次。
JS函数式编程之--函数记忆
orchid_djl的博客
04-16 415
处理一件事物，有些是过程中已经运算好的，可以将它们存储起来，以便于之后的直接使用。 相信大家都知道阶乘： n! = n*(n-1)! n! = n*(n-1)*(n-2)! ... n! = n*(n-1)*(n-2)*...*1; 阶乘封装成函数： function factorial1(n){ if(n === 0 || n === 1){ return 1; //函数...
JS专题之memoization
weixin_34074740的博客
02-08 202
前言 在计算机领域，记忆（memoization）是主要用于加速程序计算的一种优化技术，它使得函数避免重复演算之前已被处理过的输入，而返回已缓存的结果。 -- wikipedia Memoization 的原理就是把函数的每次执行结果都放入一个对象中，在接下来的执行中，在对象中查找是否已经有相应执行过的值，如果有，直接返回该值，没有才真...
JS记忆函数
码飞_CC的博客
07-19 1422
对于一种纯函数（即只要是同一种输入就能得到唯一一个相同的结果的函数），我们可以设置记忆函数来节约资源，当输入的参数不变时，我们就可以采用缓存的结果，当输入参数有所变化时才重新计算。函数如下所示： function memoize(fn) { var cachedArg; var cachedResult; return function(arg) { if (cachedAr...
js函数的记忆
weixin_39214481的博客
01-03 362
函数可将之前操作的结果记录在某个对象里，避免无谓的重复计算，js的对象和数组要实现这种优化是非常方便的。 下面这是一个构造带记忆功能函数的函数： var  memoizer = function(memo,formula){        var  recur = function(n){               var  result = memo[n];             ...
JavaScript 函数记忆
lio-zero 的博客
05-31 299
本文已整理到 Github，地址 ???? blog。 如果我的内容帮助到了您，欢迎点个 Star ???????????? 鼓励鼓励 :) ~~ 我希望我的内容可以帮助你。现在我专注于前端领域，但我也将分享我在有限的时间内看到和感受到的东西。 Memoization — 函数记忆或函数缓存，是一种优化技术，用于许多编程语言中，以减少冗余、昂贵的函数调用。这是通过缓存函数的返回值来实现的。 以下是一个昂贵的函数调用，它...
js记忆函数
m0_61482364的博客
06-20 139
记忆函数有点类似于vue的computed , 都会对结果进行缓存 , 结果发生改变的时候才会进行重新调用 , 但我个人认为记忆函数要比computed强大 , 记忆函数可以对已经存储过的值直接拿出来调用 而非像computed只有上次值和本次值发生改变才执行。
JS中【记忆函数】内容详解与应用
2301_79858914的博客
09-07 1265
在 JavaScript 中，（Memoization）是一种优化技术，旨在通过存储函数的调用结果，避免重复计算以提高性能。它非常适用于纯函数（同样的输入总是产生同样的输出），特别是在需要大量重复计算的场景中。为了彻底理解 JavaScript 中的记忆函数，本文将从其原理、实现方式、应用场景及优化方法等多个方面详细讨论。
什么是 JavaScript 记忆化（Memoization）？
前端达人
07-26 122
什么是 Memoization？Memoization（记忆化）是一种优化技术，主要用于加速计算机程序。它通过存储耗时函数的计算结果，在相同输入再次传递时，直接返回缓存的结果，从而避免重复计算。为什么需要 Memoization？让我们通过一个简单的例子来了解 Memoization 的必要性。functionsquare(num){ returnnum*num; } consol...
js 自记忆函数
zzuliguoyangyang的专栏
11-03 436
function isPrime(num){ if(isPrime.primes[num]!=null) return isPrime.prime[num]; var prime = num !=1; for(var i=2;i<num;i++){ if(num%i ==0){ prime = false; break; } } return is
JavaScript学习笔记之函数记忆
12-08
本文讲解函数记忆与菲波那切数列的实现，分享给大家，具体如下 定义 函数记忆是指将上次的计算结果缓存起来，当下次调用时，如果遇到相同的参数，就直接返回缓存中的数据。 举个例子： function add(a, b) { return a + b; } // 假设 memorize 可以实现函数记忆 var memoizedAdd = memorize(add); memoizedAdd(1, 2) // 3 memoizedAdd(1, 2) // 相同的参数，第二次调用时，从缓存中取出数据，而非重新计算一次 原理 实现这样一个 memorize 函数很简单，原理上只用把参数和对应
memoize-js：一个JavaScript库，用于记录纯函数的结果
02-12
@ bigcommerce / memoize 该库可用于记忆纯函数的结果。 不同于默认memoize由Lodash提供的功能，它可以被应用到接受多个非原始参数的函数。 也可以将其配置为在一定数量的唯一调用之后使缓存过期。 默认情况下，它会浅浅地比较基于对象的参数。 但可以将其配置为根据您的使用要求严格或深入地比较参数。 安装 您可以使用安装该库。 npm install --save @bigcommerce/memoize 用法 要记住一个功能： function fn ( a , b ) { return { a , b } ; } const memoizedFn = memoize ( fn ) ; const result = memoizedFn ( { message : 'hello' } , { message : 'world' } ) ; const
记忆函数
宫晨的专栏
04-15 768
函数记忆是一种编程技巧,通过牺牲算法的空间复杂度以换取更优的时间复杂度记忆化（memoization）是一种构建函数的处理过程，能够记住上次计算结果 1. 定义: 自记忆函数其实就是能够记住上次计算结果的函数。 2.实现: 在实现中，我们可以这样进行处理：当函数计算得到结果时，就将该结果按照参数存储起来。采取这种方式时，如果另外一个调用也使用相同的参数，我们则可以直接返回上次存储的结果而不是再计算一遍。 显而易见，像这样避免既重复又复杂的计算可以显著提高性能。对于动画中的计算、搜索不经常...
提升JavaScript递归效率：Memoization技术详解
kongls08的专栏
12-08 1267
递归是拖慢脚本运行速度的大敌之一，太多的递归会让浏览器变得越来越慢直到死掉或者莫名其妙的突然自动退出。这里我们可以通过memoization技术来替代函数中太多的递归调用，提升JavaScript效率。 AD： 递归是拖慢脚本运行速度的大敌之一。太多的递归会让浏览器变得越来越慢直到死掉或者莫名其妙的突然自动退出，所以我们一定要解决在JavaScript中出现的这
JavaScript函数式编程之记忆（memorize）
weixin_33958585的博客
09-07 830
为什么80%的码农都做不了架构师？>>> ...
JavaScript中的memoization(memoizing) 技术介绍
kongls08的专栏
12-08 1432
最近在读《JavaScript 设计模式》一书，其中工厂模式中提到了memoizing技术，今天仔细整理了一下memoization 相关的资料，与大家共享。 Memoization的定义： memoization 一词是Donald Michie 根据拉丁语memorandum杜撰的一个词。相应的动词、过去分词、ing形式有memoiz、memoized、memoizing.
js之纯函数与记忆函数
domino~~的博客
08-15 424
js之纯函数与记忆函数 1.js纯函数 对于纯函数在接触最开始接触到js时是完全不明白的，在后来当学习到react中时对其的理解就是尤为的重要了，因为在react中所涉及的reduce，这个reduce就是采用了纯函数来实现的。那么说...
javascript记忆函数
最新发布
qq_51029996的博客
05-13 212
此时，每次调用add函数都会增加callCount值，如果我们使用记忆化，callCount只会在第一次调用时增加，后续再传递参数（2，2）时，记忆化逻辑会检测到这些参数以前已经传递，会立即返回缓存的值，而不再调用add。初始化一个用于新的记忆化函数的缓存对象cache，每次调用记忆化函数时，将传递到参数转换为字符串。检查键是否已存在于缓存中，如果时，则返回关联的值，否则调用提供的函数，将输出放入缓存，并返回输出。如果之前已传递过这些参数，它应返回之前的输出而且无需调用所提供的函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值