鲁斯前端布鲁斯前端

文章中英模式

布鲁斯前端JS面试题目 - 实现 Memoize 记忆化函数

学习如何实现 JavaScript 的记忆化（memoization）函数，提升函数执行效率，避免重复计算，掌握缓存策略及其在前端开发中的应用。

影片縮圖

懒得看文章？那就来看视频吧

什么是 Memoize 记忆化

记忆化（Memoization）是一种优化技术，通过存储昂贵的函数调用结果，并在相同输入再次发生时返回缓存结果，来加速程序执行效率。它主要适用于函数式程序设计中的纯函数（相同输入总是产生相同输出）。

记忆化的核心概念

  • 1. 缓存结果：存储函数调用的结果
  • 2. 缓存命中：当相同参数再次调用时直接返回先前计算的结果
  • 3. 纯函数：没有副作用且输出仅由输入决定的函数，适合记忆化
  • 4. 性能优化：显著减少重复计算的时间成本

实现基本的 Memoize 函数

下面是一个基本的 memoize 函数实现，能够记忆任何纯函数的结果：

function memoize(fn) {
  // 创建缓存对象
  const cache = {};
  
  // 返回一个新函数
  return function(...args) {
    // 将参数转换为字符串作为键值
    const key = JSON.stringify(args);
    
    // 检查缓存中是否有相应结果
    if (key in cache) {
      console.log('从缓存返回结果');
      return cache[key];
    }
    
    // 如果没有缓存，则调用原函数计算结果
    const result = fn.apply(this, args);
    
    // 将结果存储到缓存中
    cache[key] = result;
    
    return result;
  };
}

使用范例

// 计算斐波那契数列
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// 未记忆化的函数调用 (效能差)
console.time('未记忆化');
console.log(fibonacci(35)); // 这将花费较长时间
console.timeEnd('未记忆化');

// 记忆化版本
const memoizedFibonacci = memoize(function(n) {
  if (n <= 1) return n;
  return memoizedFibonacci(n - 1) + memoizedFibonacci(n - 2);
});

// 记忆化后的函数调用 (效能大幅提升)
console.time('记忆化');
console.log(memoizedFibonacci(35)); // 快速返回结果
console.timeEnd('记忆化');