JavaScript 中怎么使用内存缓存减少重复计算与高频数据请求-js教程-PHP中文网

内存缓存是最轻量快速的方式，适合页面期间复用的计算结果或api数据；推荐用map（支持任意键、有序、性能稳）而非对象（仅适用字符串键）；需防内存泄漏，应设容量上限、监听卸载清理、加时间戳淘汰过期项。

javascript 中怎么使用内存缓存减少重复计算与高频数据请求

直接用内存缓存是最轻量、最快速的方式，适合页面运行期间反复使用的计算结果或 API 数据，不涉及磁盘 IO，响应在微秒级。

用 Map 或对象做基础缓存容器

Map 比普通对象更推荐：支持任意类型键（如对象、函数）、天然记录插入顺序、性能更稳定；对象适合简单字符串键场景。

用 Map 缓存异步请求结果（按 URL 去重）：

  // 全局缓存实例，生命周期 = 页面存活期
  const requestCache = new Map();

  async function fetchWithMemoryCache(url) {
    if (requestCache.has(url)) {
      return requestCache.get(url);
    }

    const res = await fetch(url);
    const data = await res.json();
    requestCache.set(url, data);
    return data;
  }

用普通对象缓存同步计算（如斐波那契、格式化函数）：

  const fibCache = {};
  function fib(n) {
    if (n in fibCache) return fibCache[n];
    if (n
    fibCache[n] = fib(n - 1) + fib(n - 2);
    return fibCache[n];
  }

封装通用记忆化函数（memoize）

把缓存逻辑抽离成高阶函数，复用到任意纯函数上。关键点：参数序列化为唯一 key，避免引用误判。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

基础版（只支持单个参数，且为基本类型）：

  function memoize(fn) {
    const cache = new Map();
    return function(arg) {
      const key = arg;
      if (cache.has(key)) return cache.get(key);
      const result = fn(arg);
      cache.set(key, result);
      return result;
    };
  }

增强版（支持多参数、对象/数组等复杂类型）：

  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(...args);
      cache.set(key, result);
      return result;
    };
  }

结合状态管理做组件级缓存

在 Vue/React 中，内存缓存常融合进响应式状态中，避免跨组件重复请求同一数据。

Vue 3 + Pinia 示例（请求一次，多组件共享）：

  // stores/user.ts
  export const useUserStore = defineStore('user', {
    state: () => ({
      cache: new Map(), // 内存缓存池
      currentUser: null as User | null,
    }),
    actions: {
      async fetchUser(id: string) {
        if (this.cache.has(id)) {
          this.currentUser = this.cache.get(id);
          return;
        }
        const user = await api.getUser(id);
        this.cache.set(id, user);
        this.currentUser = user;
      },
    },
  });