随着 JavaScript 的发展和标准的更新，语言的规模和复杂程度也不断提高。借助 ES6 和后续版本的新特性，我们可以更加高效、灵活地编写代码。本文将介绍 ES6 中的 WeakMap 和 Set 数据结构，探讨它们的优点和用法，为前端开发者提供更多实用的工具。
1. WeakMap
在 JavaScript 中，Map 是一种常见的数据结构，其允许我们存储任意类型的键值对，并方便地对其进行遍历和操作。但是，Map 也有一些不足之处，比如它会阻止垃圾回收器清理其中的键对象。这意味着，即使这些对象已经不再被使用，它们也不能被回收，而只能永久地留在内存中，从而导致内存泄漏。
WeakMap 的出现就是为了解决这个问题。类似于 Map，WeakMap 同样也是一种键值对集合，不过其中的键是弱引用。在 JavaScript 中，弱引用是一种特殊的引用类型，它不会阻止垃圾回收器清理对象。因此，使用 WeakMap 可以避免内存泄漏，提高代码的健壮性和可维护性。
1.1 创建 WeakMap
创建 WeakMap 的方式与 Map 类似，我们可以使用构造函数或字面量语法。
// 使用构造函数创建 WeakMap const wm = new WeakMap(); // 使用字面量语法创建 WeakMap const wm = new WeakMap([ [key1, value1], [key2, value2] ]);
需要注意的是，创建 WeakMap 时只能使用对象作为键，而不能使用原始类型的值，例如字符串、数字、布尔值等。
1.2 添加和获取值
添加和获取 WeakMap 中的值也与 Map 基本相同。我们可以使用 set() 方法添加键值对，使用 get() 方法获取值。
-- -------------------- ---- ------- ----- -- - --- ---------- ----- ---- - - ----- ------- -- ----- ------ - - ---- -- -- ----- ---- - - ----- ----- -- ----- ------ - - ---- -- -- ------------ -------- ------------ -------- -------------------------- -- - ---- -- - -------------------------- -- - ---- -- -
需要注意的是，因为 WeakMap 中的键是弱引用，只要键对象被销毁，对应的键值对也会从 WeakMap 中自动删除，并且 get() 方法将返回 undefined。
1.3 使用场景
WeakMap 的主要使用场景是存储对象值的相关元信息，如对象的私有属性、缓存数据等。这些元信息不需要跟随对象的存活，因而可以使用 WeakMap 保存，并在对象销毁时自动清除。
下面是一个使用 WeakMap 存储对象私有属性的例子。
-- -------------------- ---- -------
----- ------------ - --- ----------
----- ------ -
----------------- ---- -
-- ------
---------------------- - ----- --- ---
-
--------- -
-- ------
------ ----------------------------
-
-------- -
-- ------
------ ---------------------------
-
-
----- ------ - --- --------------- ----
------------------------------ -- -----
----------------------------- -- --在上面的例子中，我们使用 WeakMap 存储了 Person 类的实例对象的私有属性，从而实现了封装和安全性。
2. Set
Set 是 JavaScript 中的另一种数据结构，它允许我们存储任意类型的值，并保证其中的每个值都是唯一的。在 ES6 之前，我们可以使用数组或对象来存储唯一的值，但是这些方法都需要手动去重、排序等操作，效率低下。而 Set 提供了更为高效、简洁的实现方式。
2.1 创建 Set
创建 Set 的方式也与 Map 和 WeakMap 类似，我们可以使用构造函数或字面量语法。
// 使用构造函数创建 Set const set = new Set(); // 使用字面量语法创建 Set const set = new Set([value1, value2, value3]);
特别地，Set 中可以包含任何类型的值，包括对象、数组、函数等。
2.2 添加和获取值
添加和获取 Set 中的值也很简单，我们可以使用 add() 方法添加值，使用 has() 方法判断值是否存在，使用 size 属性获取 Set 中的元素个数。
-- -------------------- ---- ------- ----- --- - --- ------ ----------- ----------------- --------- ----- ------- --- ------------------------------ -- ---- ------------------------------ -- ----- ---------------------- -- -
需要注意的是，Set 中的值可以是 NaN 和 undefined，且 NaN 不等于自身。
const set = new Set(); set.add(NaN); set.add(undefined); console.log(set.has(NaN)); // true console.log(set.has(undefined)); // true console.log(NaN === NaN); // false
2.3 使用场景
Set 的主要使用场景是对数组去重，比如从一个数组中筛选出所有重复的元素。以下是一种简单的实现方式。
const arr = [1, 2, 3, 4, 1, 2, 5]; const set = new Set(arr); const result = Array.from(set); console.log(result); // [1, 2, 3, 4, 5]
在上面的例子中，我们先创建了一个包含重复元素的数组，然后将其转化为 Set。由于 Set 中的值唯一，我们随后可以使用 Array.from() 方法将其转化为一个新的数组，从而实现去重的效果。
总结
通过本文的介绍，我们了解了 ES6 中的 WeakMap 和 Set 数据结构，它们分别解决了 Map 和数组等数据结构的内存泄漏和低效问题。在实际的应用中，我们可以根据数据的特点和需求，选择适合的数据结构，从而提高代码的效率和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a69a1e48841e989433fc25