javaScript函数缓存通过存储输入与输出映射实现重复调用直接返回结果,仅适用于纯函数;需注意键的正确性、参数序列化限制及内存管理,可将指数级计算降为线性并避免重复I/O或渲染。

javascript函数缓存(也叫记忆化,memoization)的核心是:把函数某次调用的输入和对应输出记下来,下次遇到相同输入时,直接返回缓存结果,跳过重复计算。
缓存适用于纯函数
只有当函数满足“相同输入永远返回相同输出,且不产生副作用”时,缓存才安全。比如计算斐波那契数、格式化日期字符串、解析固定jsON结构等。如果函数依赖全局变量、随机数、当前时间或修改外部状态,缓存会导致错误结果。
手动实现一个基础缓存包装器
function memoize(fn) { const cache = new Map(); return function(...args) { // 将参数转为唯一字符串键(简单场景可用 json.stringify,注意函数/undefined/NaN 等限制) 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; }; } <p>// 使用示例 const fib = memoize(n => n <= 1 ? n : fib(n - 1) + fib(n - 2)); fib(40); // 第一次慢,之后再调用 fib(40) 瞬间返回</p>
注意缓存键的合理性
缓存效果高度依赖键是否准确反映“输入等价性”:
立即学习“Java免费学习笔记(深入)”;
- 对象参数不能直接用 JSON.stringify({a:1}) === JSON.stringify({a:1}) 判断相等,但若对象结构固定、字段顺序一致,可以接受;更健壮的做法是用 Map 配合自定义比较,或用库如 lodash.isEqual 生成键
- 函数、undefined、NaN、symbol 等无法被 JSON.stringify 正确序列化,需特殊处理
- 长期运行的服务中,缓存应设大小上限或过期策略,避免内存泄漏(可用 LRU 缓存,如 lru-cache 包)
它怎么真正加速计算?
不是让单次执行变快,而是减少“重复劳动”:
- 指数级降为线性:如未缓存的递归斐波那契,fib(40) 触发上亿次调用;加缓存后每个 n 值只算一次,总调用次数≈40
- 避免昂贵 I/O 或计算复用:比如反复解析同一段配置字符串、渲染相同数据的 react 组件(配合 useMemo)、服务端对固定查询参数的数据库结果缓存
- 提升响应一致性:同一输入多次获取结果完全一致,避免因中间状态变化导致 ui 闪烁或逻辑错乱
基本上就这些。缓存不是银弹,但它在合适的地方能带来数量级的性能改善——关键是识别出可缓存的纯计算,并控制好键与生命周期。