JavaScript函数缓存的实现与应用

在 JavaScript 中，函数缓存（Function Memoization）是一种优化技术，用于存储函数的结果，以避免重复计算相同的输入。这在处理计算密集型或递归函数时特别有用。以下是实现函数缓存的几种方法及其应用场景。

1. 基本实现

最简单的函数缓存可以通过使用一个对象来存储已经计算过的结果。以下是一个基本的实现：

function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = fn.apply(this, args);
    cache[key] = result;
    return result;
  };
}

// 示例函数
function expensiveCalculation(n) {
  console.log('Calculating...');
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.log(memoizedCalculation(5)); // 计算并缓存结果
console.log(memoizedCalculation(5)); // 直接从缓存中获取结果

2. 使用 Map 实现缓存

Map 是 ES6 引入的数据结构，适合用于缓存键值对。与普通对象相比，Map 的键可以是任意类型，而不仅仅是字符串。

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;
  };
}

// 示例函数
function expensiveCalculation(n) {
  console.log('Calculating...');
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.log(memoizedCalculation(5)); // 计算并缓存结果
console.log(memoizedCalculation(5)); // 直接从缓存中获取结果

3. 使用 WeakMap 实现缓存

WeakMap 是另一种 ES6 引入的数据结构，它的键必须是对象，并且不会阻止垃圾回收。这在某些场景下非常有用，特别是当你希望缓存的对象在不再被引用时自动被回收。

function memoize(fn) {
  const cache = new WeakMap();
  return function(...args) {
    const key = args[0]; // 假设第一个参数是对象
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

// 示例函数
function expensiveCalculation(obj) {
  console.log('Calculating...');
  return obj.value * 2;
}

const obj = { value: 5 };
const memoizedCalculation = memoize(expensiveCalculation);

console.log(memoizedCalculation(obj)); // 计算并缓存结果
console.log(memoizedCalculation(obj)); // 直接从缓存中获取结果

4. 应用场景

函数缓存在以下场景中非常有用：

1. 递归函数：如斐波那契数列计算，避免重复计算相同的子问题。
2. 计算密集型函数：如复杂的数学计算或数据处理，缓存结果可以显著提高性能。
3. API 调用：在需要频繁调用相同参数的 API 时，缓存结果可以减少网络请求。
4. DOM 操作：在需要频繁查询或操作 DOM 元素时，缓存结果可以减少 DOM 访问次数。

5. 注意事项

• 内存管理：缓存会占用内存，特别是在缓存大量数据时。需要根据实际情况考虑缓存的大小和生命周期。
• 缓存键的选择：确保缓存键的唯一性和正确性，避免因键冲突导致错误的结果。
• 缓存失效：在某些情况下，缓存的结果可能会失效（如依赖外部数据变化），需要设计合理的缓存失效策略。

通过合理使用函数缓存，可以显著提高 JavaScript 应用的性能，特别是在处理复杂计算或频繁调用相同函数时。