JavaScript 中怎么用闭包缓存上一次的执行结果-js教程-PHP中文网

闭包缓存核心是用闭包封存上一次输入与输出，下次调用先比对输入是否相同，相同则直接返回缓存值；支持原始值（===）、对象/数组（json.stringify）及多参数缓存，并可手动清空，适用于确定性高、重复调用的轻量函数。

javascript 中怎么用闭包缓存上一次的执行结果

用闭包缓存上一次执行结果，核心是把上次的输入和输出“封”在闭包作用域里，在下次调用时先比对输入是否相同，相同就直接返回缓存值。

基础缓存结构：记住输入和输出

闭包能维持内部变量不被回收。你可以让一个函数返回另一个函数，后者访问外层函数定义的变量（比如 lastInput 和 lastResult），实现记忆效果。

例如，缓存一个简单计算函数的上次结果：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

function createCachedFn(fn) {
  let lastInput = undefined;
  let lastResult = undefined;
<p>return function(input) {
if (input === lastInput) {
return lastResult;
}
lastInput = input;
lastResult = fn(input);
return lastResult;
};
}</p><p>const cachedDouble = createCachedFn(x => x * 2);
console.log(cachedDouble(5)); // 计算：10
console.log(cachedDouble(5)); // 命中缓存：10
console.log(cachedDouble(6)); // 重新计算：12</p>

处理更复杂的输入（对象、数组）

上面用 === 比较只适用于原始值。如果输入是对象或数组，需要深比较或序列化判断是否“相同”。常用做法是用 JSON.stringify 粗略判断（注意它有局限，比如忽略函数、undefined、Symbol，且键顺序敏感）：

function createCachedFnDeep(fn) {
  let lastInputStr = '';
  let lastResult = undefined;
<p>return function(input) {
const inputStr = JSON.stringify(input);
if (inputStr === lastInputStr) {
return lastResult;
}
lastInputStr = inputStr;
lastResult = fn(input);
return lastResult;
};
}</p>

适合参数结构稳定、不含函数/undefined 的场景
如需严谨深比较，可引入 lodash.isEqual 替代字符串化
高频调用时注意 stringify 开销，必要时加防抖或节流

支持多参数与重置缓存

实际函数常有多个参数，可用 rest 参数 + 数组合并方式构造缓存键；同时提供手动清空缓存的能力：

function createCachedMultiFn(fn) {
  let cache = { key: null, value: undefined };
<p>const cachedFn = function(...args) {
const key = JSON.stringify(args);
if (key === cache.key) {
return cache.value;
}
cache.key = key;
cache.value = fn(...args);
return cache.value;
};</p><p>cachedFn.clear = () => {
cache = { key: null, value: undefined };
};</p><p>return cachedFn;
}</p><p>const cachedSum = createCachedMultiFn((a, b) => a + b);
console.log(cachedSum(2, 3)); // 5
console.log(cachedSum(2, 3)); // 缓存命中：5
cachedSum.clear(); // 手动清空
console.log(cachedSum(2, 3)); // 重新计算：5</p>