在前端开发中，经常需要对一些数据进行集合操作，例如去重、过滤等。在 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()：清空集合中的所有元素。
// javascriptcn.com 代码示例
const set = new Set([1, 2, 3, 4, 5]);
set.add(6); // 添加元素 6
console.log(set); // Set(6) {1, 2, 3, 4, 5, 6}
set.delete(1); // 删除元素 1
console.log(set); // Set(5) {2, 3, 4, 5, 6}
console.log(set.has(2)); // true
console.log(set.has(1)); // false
set.clear(); // 清空集合
console.log(set); // Set(0) {}Set 的遍历
Set 可以使用 for...of 循环进行遍历，也可以使用 forEach 方法。
// javascriptcn.com 代码示例
const set = new Set([1, 2, 3, 4, 5]);
// 使用 for...of 循环遍历
for (const item of set) {
console.log(item);
}
// 使用 forEach 方法遍历
set.forEach((item) => {
console.log(item);
});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)：判断集合中是否存在指定元素，返回一个布尔值。
// javascriptcn.com 代码示例
const obj1 = { name: '张三' };
const obj2 = { name: '李四' };
const obj3 = { name: '王五' };
const weakSet = new WeakSet();
weakSet.add(obj1);
weakSet.add(obj2);
weakSet.add(obj3);
console.log(weakSet.has(obj1)); // true
weakSet.delete(obj2);
console.log(weakSet.has(obj2)); // false注意：WeakSet 中的对象是弱引用，当没有其他引用指向这个对象时，这个对象会被垃圾回收器回收，因此不能使用 forEach 方法遍历 WeakSet。
总结
本文介绍了 ES6+ 中的 Set 和 WeakSet 两种数据结构，可以方便地进行集合操作，例如去重、判断元素是否存在等。使用时需要注意 WeakSet 中只能存储对象类型的值，并且这些对象是弱引用，不会阻止垃圾回收器回收。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650eeb6f95b1f8cacd7e5e2b