JavaScript函数缓存本质是用空间换时间，通过存储输入与结果映射实现重复调用直接返回；需满足纯函数、计算耗时、输入有限且调用频繁才真正受益。
JavaScript函数缓存（也叫记忆化，memoization）本质是用空间换时间：把函数之前算过的输入和对应结果存起来，下次遇到相同输入就直接返回缓存值，跳过重复计算。核心不难，但关键在“什么时候该缓存”“缓存什么”“怎么判断输入相同”。
怎么实现一个基础的函数缓存
最常用的是封装一个 memoize 工具函数，接收目标函数，返回带缓存能力的新函数：
它内部用一个对象（或 Map）存 参数组合 → 结果 的映射。注意：原始类型可直接当 key；对象/数组需转成唯一字符串（比如 JSON.stringify），但要注意循环引用、undefined、函数等无法序列化的值会出问题。
- 简单场景用 Object 作 cache，key 拼接参数（适合全为原始值）
- 复杂参数建议用 Map + 自定义 key 生成逻辑（如结构化克隆后哈希）
- 注意处理 this 上下文——被缓存的函数若依赖 this，需 bind 或箭头函数处理
- 可加 maxCacheSize 控制缓存数量，避免内存泄漏
典型应用场景：哪些函数值得缓存
不是所有函数都适合缓存。真正受益的是那些纯函数 + 计算耗时 + 输入范围有限 + 调用频繁的场景：
立即学习“Java免费学习笔记（深入）”；
- 递归算法优化：比如斐波那契数列，不缓存时时间复杂度 O(2ⁿ)，缓存后降到 O(n)
- 数据格式转换：将深层嵌套对象按规则扁平化、生成树形结构、路径解析（如路由匹配、JSON Schema 校验预处理）
- 渲染相关计算：React 中 useMemo 就是典型应用——组件内派生状态（如过滤列表、排序、计算汇总值），避免每次 render 都重算
- 工具类函数：正则匹配预编译（RegExp 构造开销大）、日期格式化模板编译、CSS 类名拼接逻辑
需要注意的边界和陷阱
缓存不是银弹，用错反而引入 bug 或性能倒退：
- 非纯函数不能缓存：含副作用（发请求、改全局变量）、依赖外部状态（Date.now()、Math.random()）的函数缓存后结果失效
- 参数为引用类型时，浅比较容易误判：{a:1} 和 {a:1} 是两个对象，直接当 key 会存两次，必须标准化 key
- 缓存未及时清理：长期运行的页面中，无限增长的 cache 可能导致内存占用飙升
- 服务端渲染（SSR）中缓存可能跨请求污染：需确保缓存作用域隔离（如按请求实例维护 cache）
现代框架中的缓存实践
不用从零手写 memoize，主流方案已封装好语义化接口：
- React：useMemo（缓存计算值）、useCallback（缓存函数引用）、reselect（Redux 中派生状态缓存）
- Lodash：_.memoize 提供 maxAge、resolver 等配置项
- TypeScript 项目可结合装饰器（如 @memoize）或泛型工具类型约束缓存行为
- 构建工具层：Webpack/Vite 的持久化缓存、Babel 插件对 AST 处理结果缓存，也属同源思想
不复杂但容易忽略。缓存的价值不在“用了”，而在“用得准”——盯住纯度、输入稳定性、调用频次这三个支点，就能避开大多数坑。
