前言
ES6（ECMAScript 6）是 JavaScript 的一种新规范，该规范在 2015 年正式发布。ES6 新特性非常丰富，包括 let、const、箭头函数、模板字符串、解构赋值、Promise、Class 等，其中暂时性死区、模块化、Proxy、Reflect、Promise 等特性已经成为前端开发中热门且广泛使用的技术。
本文将着重介绍 WeakSet 和 WeakMap 这两个 ES6 新特性的详细内容及应用场景，在你学习本文之后，相信你会有更大的视野面对前端开发中的相关问题。
WeakSet
定义与用法
WeakSet 是 ES6 中新增加的数据结构，它和 Set 很像，也是用来存储一组不能重复的值。与 Set 不同的是，WeakSet 中的值都必须是对象类型，且这些对象都是弱引用。
WeakSet 对象中存储的对象都是弱引用，也就是说如果这些对象在其他地方没有引用时，就会被当做垃圾回收掉。因此，我们不能直接添加一个普通值，否则将会抛出一个 TypeError 错误。
示例
-- -------------------- ---- ------- -- ---- ------- -- ----- ------- - --- ---------- -- ---------- ------- - --- --- - --- ----------------- -- ------------------ --------- -- ----------------------
上述代码中，我们首先创建了一个空的 WeakSet 对象，然后创建了一个空对象，并将其添加到 weakset 对象中。接着，我们试图将一个字符串直接添加到 weakset 中，此时会抛出一个 TypeError 错误。
应用场景
- 缓存数据结构
如果你在前端开发中需要一种缓存数据的方式，但希望这些数据在系统内存有限的情况下不会引起内存泄漏，那么 WeakSet 是个不错的选择。
-- -------------------- ---- -------
-- ---- ------- --
----- ---------- - --- ----------
-- ------
-------- --------------- -
-- ---------------------- -
-- ------------- -----
------ ------
-
-- ---------------- ---------- -
---------------------
------ -----
-
-- ------
--- --- - - ----- ------ --
---------------
-- ---------- ---------------- ---------- ------------上述代码中，我们首先创建了一个空的 WeakSet 对象 cachedData，然后定义了一个用于缓存数据的函数 cacheData。每当有一个新数据需要被缓存时，我们都会将其作为参数传入 cacheData 函数，判断该数据是否已经在 cachedData 中，如果数据已经存在，就返回 false；否则，就将该数据添加到 cachedData 中。由于 cachedData 中存储的对象都是弱引用，因此不需要手动对其进行清除操作。
WeakMap
定义与用法
WeakMap 是 ES6 中新增加的数据结构，它和 Map 很像，也是用来存储一组键值对。与 Map 不同的是，WeakMap 中的键都必须是对象类型，且这些键都是弱引用。
WeakMap 对象中存储的键都是弱引用，也就是说如果这些键在其他地方没有引用时，就会被当做垃圾回收掉。因此，我们不能直接通过 set 方法添加一个普通值，否则将会抛出一个 TypeError 错误。
示例
-- -------------------- ---- ------- -- ---- ------- -- ----- ------- - --- ---------- -- ------------ --- --- - --- ---------------- --------- -- --------------------- --------- -- ------------------ ---------
上述代码中，我们首先创建了一个空的 WeakMap 对象 weakmap，然后创建了一个键为 emptyObject 的键值对，并将其添加到 weakmap 对象中。接着，我们试图将一个字符串直接设置为键值，此时会抛出一个 TypeError 错误。
应用场景
- 缓存数据结构
如果你在前端开发中需要一种缓存数据的方式，但希望这些数据在系统内存有限的情况下不会引起内存泄漏，那么 WeakMap 是个不错的选择。
-- -------------------- ---- -------
-- ---- ------- --
----- ---------- - --- ----------
-- ------
-------- -------------- ------ -
-- --------------------- -
-- ------------- -----
------ ------
-
-- ---------------- ---------- -
------------------- -------
------ -----
-
-- ------
--- --- - - ----- ------ --
-------------- -----
-- ---------- ---------------- ---------- ------------上述代码中，我们首先创建了一个空的 WeakMap 对象 cachedData，然后定义了一个用于缓存数据的函数 cacheData。每当有一个新数据需要被缓存时，我们都会将其键和值作为参数传入 cacheData 函数，判断该数据是否已经在 cachedData 中，如果数据已经存在，就返回 false；否则，就将该数据作为一个键值对添加到 cachedData 中。由于 cachedData 中存储的键都是弱引用，因此不需要手动对其进行清除操作。
总结
本文对 ES6 新特性中的 WeakSet 和 WeakMap 进行了详细的介绍，并针对它们的特点和应用场景进行了讲解。前端开发中的内存问题一直都是一个难点，希望本文能对你解决相关的问题起到一定的指导作用。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6495353848841e989427656d