一文读懂 JS 中的 Set 结构

你好，我是沐爸，欢迎点赞、收藏、评论和关注。

今天聊下 Set 数据结构，看下它如何使用？和 Map 有什么区别？有哪些属性和方法？又有哪些使用场景？WeakMap 又是什么？下面直接进入正题。

一、Set 和 Map 有什么区别？

• Set 是一个集合，类似于数组，但是成员的值都是唯一的，不能重复。主要用于快速查找、去重等场景。
• Map 是一组键值对的集合，其中每个元素都是一个键值对。与普通的对象不同，Map 的键不仅限于字符串，也可以是任意类型（如对象或函数）。

二、WeakSet 和 Set 的区别？

WeakSet 结构与 Set 类似，也是不重复的值的集合。两者的区别在于：

• WeakSet 的成员只能是对象和 Symbol 值，而不能是其他类型的值。
• WeakSet 对象不计入垃圾回收机制。
• Set 可遍历，WeakSet 不可遍历。

三、Set 实例有哪些属性和方法？

1. 属性 ：

• constructor：构造函数，默认就是 Set 函数
• size：返回 Set 实例的成员总数

2. 方法 ：

• 操作方法 ：
  • add(value) 添加某个值，返回 Set 实例本身
  • delete(value) 删除某个值，返回一个布尔值，表示删除是否成功
  • has(value) 查询该值是否是 Set 实例的成员，返回一个布尔值
  • clear() 清除所有成员，没有返回值
• 遍历方法：
  • keys() 返回键名的遍历器
  • values() 返回键值的遍历器
  • entries() 返回键值对的遍历器
  • forEach() 使用回调函数遍历每个成员
• 集合运算方法：
  • intersection(other) 交集
  • union(other) 并集
  • difference(other) 差集
  • symmetricDifference(other)：对称差集
  • isSubsetOf(other)：判断是否为子集
  • isSupersetOf(other)：判断是否为超集
  • isDisjointFrom(other)：判断是否不相交

let s1 = new Set()
s1.add(1)
s1.add(2)
s1.add(3)
s1.add(4)
s1.size 
s1.has(1) 
s1.has(5) 
s1.delete(5) 
s1.delete(1) 
s1.clear()


let s2 = new Set(['red', 'green', 'blue'])

for (let item of s2.keys()) console.log(item)
for (let item of s2.values()) console.log(item)
s2.forEach(item => console.log(item))


for (let item of s2.entries()) console.log(item)





let s3 = new Set(['a', 'b', 'c', 'd'])
let s4 = new Set(['c', 'd', 'e', 'f'])
let s5 = new Set(['a', 'b'])

s3.union(s4) 
s3.intersection(s4) 
s3.difference(s4) 
s4.difference(s3) 
s3.symmetricDifference(s4) 
s3.isSubsetOf(s4) 
s5.isSubsetOf(s3) 
s3.isSupersetOf(s5) 
s4.isDisjointFrom(s5) 

四、Set 的使用场景有哪些？

1. 数组去重

const set = new Set([1, 2, 3, 4, 4])
[...set] 

2. 字符串去除重复字符

[...new Set('ababbc')].join('')

3. 集合运算

求两个数组之间的并集、交集、差集等，上面已有示例。

五、WeakSet 如何使用？

• 成员只能是对象或 Symbol，不能是其他数据类型的值
• 有 3 个方法：add、delete、has，用法同 Set
• 没有 size 属性和 clear 方法，不支持遍历，for/forEach/keys()/values()/entries() 都不能用

const ws = new WeakSet()

ws.add(1) 
ws.add(Symbol()) 

const a = [[1, 2], [3, 4]]
const ws = new WeakSet(a)


const b = [3, 4];
const ws = new WeakSet(b);


ws.size 
ws.forEach 

六、WeakSet 的使用场景？

1. 内存管理 ：当你需要跟踪一组对象但不希望阻止这些对象被垃圾回收时，WeakSet 是个好选择。它帮助避免内存泄漏，因为它不会阻止成员对象被自动回收。
2. 私有成员管理 ：在面向对象编程中，WeakSet 可用于存储类的私有成员或状态，同时保持对内存使用的控制。
3. 缓存失效 ：当缓存或映射依赖于对象存在时，使用 WeakSet 可以确保当对象被垃圾回收时，相关的缓存或映射也自动失效，减少内存浪费。
4. DOM 元素管理 ：在处理 DOM 元素时，WeakSet 可用于跟踪一组特定的元素，而无需担心因保留引用而阻止元素被垃圾回收。

七、其他知识点

1.Set() 函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。

const set = new Set([1, 2, 3, 4, 4]);
[...set]



const set = new Set(document.querySelectorAll('div'));
set.size 

2. 向 Set 加入值的时候，不会发生类型转换，类似严格相等，区别在于，Set 认为 NaN 等于 NaN。

let s = new Set()
s.add(5)
s.add('5')
s.size 

s.add(NaN)
s.add(NaN)
s.size 

3.Array.from() 方法可以将 Set 结构转为数组。

const items = new Set([1, 2, 3, 4, 2, 3]);
const array = Array.from(items); 

4.Set 具有 iterator 接口，可直接用 for…of 循环遍历。

let set = new Set(['red', 'green', 'blue']);

for (let x of set) {
  console.log(x);
}

好了，分享结束，谢谢点赞，下期再见。