在前端开发中，经常需要对一些数据进行集合操作，例如去重、过滤等。在 ES6+ 中，引入了 Set 和 WeakSet 两种数据结构，可以方便地进行集合操作。本文将详细介绍这两种数据结构的用法和注意事项。
Set
Set 是一种无序、不重复的集合，类似于数组，但成员的值都是唯一的，没有重复的值。可以使用 Set 对象来进行去重、判断元素是否存在等操作。
创建 Set
可以通过以下两种方式创建 Set：
// 方法一：通过构造函数创建 const set1 = new Set([1, 2, 3, 4, 5]); // 方法二：通过字面量创建 const set2 = new Set(); set2.add(1); set2.add(2); set2.add(3);
Set 的基本操作
Set 有以下基本操作：
- add(value)：添加元素到集合中，返回 Set 对象本身，可以链式调用。
- delete(value)：删除集合中的指定元素，返回一个布尔值，表示是否删除成功。
- has(value)：判断集合中是否存在指定元素，返回一个布尔值。
- clear()：清空集合中的所有元素。
-- -------------------- ---- ------- ----- --- - --- ------- -- -- -- ---- ----------- -- ---- - ----------------- -- ------ --- -- -- -- -- -- -------------- -- ---- - ----------------- -- ------ --- -- -- -- -- ------------------------ -- ---- ------------------------ -- ----- ------------ -- ---- ----------------- -- ------ --
Set 的遍历
Set 可以使用 for...of 循环进行遍历，也可以使用 forEach 方法。
-- -------------------- ---- ------- ----- --- - --- ------- -- -- -- ---- -- -- -------- ---- --- ------ ---- -- ---- - ------------------ - -- -- ------- ---- ------------------ -- - ------------------ ---
Set 转换为 Array
可以使用 Array.from 方法将 Set 转换为数组。
const set = new Set([1, 2, 3, 4, 5]); const arr = Array.from(set); console.log(arr); // [1, 2, 3, 4, 5]
WeakSet
WeakSet 与 Set 类似，也是一种无序、不重复的集合，但是它只能存储对象类型的值，且这些对象是弱引用，不会阻止垃圾回收器回收。
创建 WeakSet
可以通过以下方式创建 WeakSet：
const weakSet = new WeakSet();
WeakSet 的基本操作
WeakSet 有以下基本操作：
- add(value)：添加元素到集合中，返回 WeakSet 对象本身，可以链式调用。
- delete(value)：删除集合中的指定元素，返回一个布尔值，表示是否删除成功。
- has(value)：判断集合中是否存在指定元素，返回一个布尔值。
-- -------------------- ---- ------- ----- ---- - - ----- ---- -- ----- ---- - - ----- ---- -- ----- ---- - - ----- ---- -- ----- ------- - --- ---------- ------------------ ------------------ ------------------ ------------------------------- -- ---- --------------------- ------------------------------- -- -----
注意：WeakSet 中的对象是弱引用，当没有其他引用指向这个对象时，这个对象会被垃圾回收器回收，因此不能使用 forEach 方法遍历 WeakSet。
总结
本文介绍了 ES6+ 中的 Set 和 WeakSet 两种数据结构，可以方便地进行集合操作，例如去重、判断元素是否存在等。使用时需要注意 WeakSet 中只能存储对象类型的值，并且这些对象是弱引用，不会阻止垃圾回收器回收。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650eeb6f95b1f8cacd7e5e2b