JavaScript惰性求值与缓存-js教程-PHP中文网

JavaScript惰性求值与缓存

狼影

发布： 2025-11-09 09:33:03

原创

699人浏览过

惰性求值和缓存可提升JavaScript性能，通过延迟计算和记忆化避免重复运算。1. 惰性求值：用函数或闭包实现按需计算，如延迟初始化对象；2. 缓存：利用Map存储结果，相同输入直接返回值，适用于纯函数和递归；3. 结合使用：如惰性单例模式，首次调用创建实例并缓存，后续直接复用，减少开销。合理应用能显著优化资源密集操作，但需注意控制缓存生命周期防止内存泄漏。

javascript惰性求值与缓存

惰性求值（Lazy Evaluation）和缓存（Caching）是优化JavaScript性能的两种重要技术，尤其在处理开销较大的计算或延迟资源加载时非常有用。它们能帮助我们避免不必要的运算，提升响应速度。

惰性求值：按需计算

惰性求值指的是表达式在真正需要时才进行计算，而不是在定义时立即执行。这在JavaScript中可以通过函数封装、闭包或代理对象来实现。

常见应用场景包括：

延迟初始化大型对象或模块
避免在条件分支中执行无用计算
处理无限序列或大数据流

示例：使用函数包装实现惰性求值

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

function lazyValue() {
console.log("计算中...");
return expensiveOperation();
}

// 只有调用时才执行
const value = lazyValue(); // 此时才输出"计算中..."并计算

缓存：记忆化避免重复计算

缓存通常与惰性求值结合使用，尤其是通过“记忆化（Memoization）”技术，将已计算的结果保存下来，下次请求相同输入时直接返回结果。

适合缓存的场景：

存了个图

视频图片解析/字幕/剪辑，视频高清保存/图片源图提取

查看详情

纯函数（输入相同，输出不变）
递归算法，如斐波那契数列
频繁调用但参数变化少的函数

示例：实现一个带缓存的惰性计算函数

function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

const fib = memoize(function(n) {
if (n <= 1) return n;
return fib(n - 1) + fib(n - 2);
});

fib(30); // 快速返回，避免重复递归