在前端开发中，缓存是一个非常重要的概念。当我们需要频繁地访问某个数据时，如果每次都去重新计算或者请求数据，会严重影响性能。因此，使用缓存可以大幅提升应用的性能。
在 ECMAScript 2018 中，新增了两个标准库 Map 和 WeakMap，它们可以帮助我们实现高效的缓存。本文将详细介绍 Map 和 WeakMap 的使用方法，并给出示例代码。
Map
Map 是一种键值对的集合，其中的键和值可以是任意类型的数据。Map 中的键是唯一的，值则可以重复。我们可以使用 Map 来实现一个简单的缓存。
创建 Map
我们可以使用 new Map() 来创建一个空的 Map 对象，也可以使用数组来初始化一个 Map 对象。
const map = new Map(); map.set('key1', 'value1'); map.set('key2', 'value2'); console.log(map.get('key1')); // 'value1' console.log(map.get('key2')); // 'value2'
使用 Map 实现缓存
我们可以使用 Map 来实现一个简单的缓存，将计算结果缓存起来，下次需要时直接从缓存中取得结果。当缓存中存在结果时，直接返回结果，否则重新计算。
-- -------------------- ---- ------- ----- ----- - --- ------ -------- ------------------------- - -- ---------------- - ------ --------------- - ----- ------ - -- ---- -------------- -------- ------ ------- -展开代码
Map 的遍历
Map 提供了多种遍历方式，包括 for...of、forEach、keys、values 和 entries。
-- -------------------- ---- ------- ----- --- - --- ------------- ---------- -------- ------------ --- ------ ----- ------ -- ---- - ---------------- ------- - -- ---- ------ -- ---- ------ ------------------- ---- -- - ---------------- ------- --- -- ---- ------ -- ---- ------ --- ------ --- -- ----------- - ----------------- - -- ---- -- ---- --- ------ ----- -- ------------- - ------------------- - -- ------ -- ------ --- ------ ----- ------ -- -------------- - ---------------- ------- - -- ---- ------ -- ---- ------展开代码
WeakMap
WeakMap 是一种弱引用的集合，其中的键必须是对象，值可以是任意类型的数据。WeakMap 中的键是弱引用的，当键所对应的对象没有其他引用时，会被自动回收。因此，WeakMap 适用于一些需要动态添加和删除键值对的场景，比如缓存。
创建 WeakMap
我们可以使用 new WeakMap() 来创建一个空的 WeakMap 对象，也可以使用对象来初始化一个 WeakMap 对象。
-- -------------------- ---- ------- ----- ------- - --- ---------- ----- ---- - --- ----- ---- - --- ----------------- ---------- ----------------- ---------- ------------------------------- -- -------- ------------------------------- -- --------展开代码
使用 WeakMap 实现缓存
与 Map 不同，WeakMap 中的键是弱引用的，因此当键所对应的对象没有其他引用时，会被自动回收。我们可以使用 WeakMap 来实现一个自动清理过期缓存的功能。
-- -------------------- ---- ------- ----- ----- - --- ---------- -------- ----------- - ------ ------------- - -- ---------------- - ------ --------------- - ----- ------ - -------- -------------- -------- ------ ------- -- - ----- -------------------- - ------------- -- - -- ---- --- -- ---------- -------------展开代码
WeakMap 的限制
由于 WeakMap 中的键是弱引用的，因此有以下限制：
- 键必须是对象，不能是原始类型的数据（比如字符串、数字、布尔值等）。
- 不能遍历 WeakMap 中的键值对，也不能获取 WeakMap 的大小。
总结
Map 和 WeakMap 是 ECMAScript 2018 中新增的标准库，它们可以帮助我们实现高效的缓存。Map 是一种键值对的集合，适用于一些需要频繁访问的数据。WeakMap 是一种弱引用的集合，适用于一些需要动态添加和删除键值对的场景。在实际开发中，我们可以根据具体需求选择合适的缓存方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fcf475d10417a22284f71d
