Map 在前端缓存计算结果时的核心优势是支持任意类型键（如对象、函数、Symbol），比普通对象更可靠，也比 Object.create(null) 更易维护，适合做“输入 → 输出”的记忆化缓存。

Map 在前端缓存计算结果时，核心优势是支持任意类型键（比如对象、函数、Symbol），比普通对象更可靠，也比 Object.create(null) 更易维护。它适合做“输入 → 输出”的记忆化缓存，尤其在重复调用开销大的计算场景中很实用。

用 Map 缓存函数计算结果（记忆化）

把函数的参数序列化为唯一键，存入 Map；下次遇到相同输入，直接返回缓存值，跳过计算。

• 参数是基本类型（字符串、数字等）：可直接用数组作为键，Map 支持数组作键
• 参数含对象或函数：建议用 JSON.stringify 简单序列化（注意限制：不能处理函数、undefined、循环引用）；更健壮的做法是用自定义 key 生成器（如基于参数结构哈希）
• 示例：缓存一个耗时的格式化函数

const cache = new Map();
function expensiveFormat(date, formatStr) {
  const key = JSON.stringify([date.getTime(), formatStr]);
  if (cache.has(key)) return cache.get(key);
  const result = /* 实际格式化逻辑 */;
  cache.set(key, result);
  return result;
}

缓存 DOM 计算结果（避免重复 layout/reflow）

像 getBoundingClientRect()、getComputedStyle() 这类方法触发重排/重绘，频繁调用影响性能。用 Map 把元素实例作为键，缓存其尺寸或样式结果。

Alibabacloud Sdk Client Initialization For Java

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

下载

• 键用 DOM 元素本身（Map 支持对象键，且弱引用不影响 GC）
• 可配合 ResizeObserver 或 MutationObserver 清除过期缓存
• 示例：缓存某元素的宽高

const sizeCache = new Map();
function getCachedSize(el) {
  if (sizeCache.has(el)) return sizeCache.get(el);
  const rect = el.getBoundingClientRect();
  const size = { width: rect.width, height: rect.height };
  sizeCache.set(el, size);
  return size;
}

按需清理缓存，防止内存泄漏

Map 不会自动释放不再使用的条目，长期运行的应用需主动管理。

立即学习“Java免费学习笔记（深入）”；

• 设置最大缓存数量，超出时删除最早插入项（LRU 策略）
• 监听组件卸载（如 React useEffect cleanup、Vue onUnmounted）时 delete 对应键
• 对临时数据，可用 WeakMap 替代 —— 键必须是对象，且是弱引用，适合绑定 DOM 或组件实例

和 WeakMap、普通对象对比选型

不是所有缓存都该用 Map。选型看场景：

• 需要稳定键（含原始值）、手动控制生命周期 → 用 Map
• 键全是对象，且希望随对象销毁自动清理 → 用 WeakMap（但不支持遍历和 size）
• 只缓存字符串/数字键，且不需要动态增删 → 普通对象或 Object.create(null) 更轻量