ES6 的 Set 集合的基本用法

282 阅读3分钟

ES6 中的 Set 集合

1. Set 集合的概念:

Set 集合是一种有序列表,用于存储相互独立的非重复的值。

2. Set 集合中的方法

  1. add() 方法:用于向集合中添加元素;
  2. has() 方法:检测集合中是否存在某个值;
  3. delete() 方法:移除集合中的某个元素;
  4. clear() 方法:移除集合中的所有元素;
  5. forEach() 方法:遍历集合中的元素。

在 Set 集合中,不会对所存值进行强制的类型转换。引擎内部使用 Object.is() 方法检测两个值是否一致。唯一例外的是, Set 集合认为 +0 和 -0 是相等的。

let set = new Set()
set.add(5)
set.add('5')

let obj1 = {},
  obj2 = {}

set.add(5) // 重复,直接被忽略

set.add(obj1)
set.add(obj2)
console.log(set.size) // 4

// has()
console.log(set.has(5)) // true

// delete()
set.delete(5)
console.log(set.has(5)) // false

// clear()
set.clear()
console.log(set.size) // 0

上述代码中,由于 Set 集合不会对存储的值进行强制类型转换,所以数字 5 和字符串 '5' 是两个独立的值。由于 obj1 和 obj2 不会被转换为字符串 '[object Object]' ,所以 obj1 和 obj2 在集合中也是两个独立的值。Set 集合会忽略保存重复的值。

let set = new Set([1, 2, 3, 4, 5, 5, 5, 5, 5])

console.log(set) // Set { 1, 2, 3, 4, 5 }

console.log(set.size) // 5

Set 构造函数可以接受所有可迭代对象作为参数。比如数组,Set集合,Map集合~

3. 将 Set 集合转换为数组

将数组转换为 Set 集合

let arr = [1, 3, 4, 5, 6, 6, 6]
let set = new Set(arr)
console.log(set) // Set { 1, 3, 4, 5, 6 }

将Set 集合转换为数组,使用展开运算符(...)

let set = new Set([1, 3, 4, 5, 6, 6, 6])
let arr = [...set]
console.log(arr) // [ 1, 3, 4, 5, 6 ]

ES6 中的 Weak Set 集合

Weak Set 集合主要是为了解决 Set 集合中的强引用问题而出现的。将对象存储在 Set 集合中与存储在变量中完全一样。只要 Set 中的引用存在,垃圾回收机制就不能释放该对象的存储空间。(内存泄漏)

let set = new Set(),
  key = {}

set.add(key)
console.log(set.size) // 1

// 移除原始引用
key = null
console.log(set.size) // 1

// 重新取回原始引用
key = [...set][0]
console.log(key) // {}

上述代码中,我们虽然清除了 key 对初始对象的引用,但是 Set 实例中依然保留了这个引用,甚至还可以取回原始引用。这样会造成内存空间的浪费。所以 Weak Set 集合出现了。

1. Weak Set 集合的概念:

Weak Set 集合(弱引用 Set 集合),只能存储对象的弱引用,不可以存储原始值。集合中的弱引用如果是对象唯一的引用,则会被回收并释放相应内存。

2. Weak Set 集合的方法,仅支持三个:

  1. add() 方法
  2. has() 方法
  3. delete() 方法
let set = new WeakSet(),
  key = {}

set.add(key)
console.log(set.has(key)) // true

// 移除原始引用
key = null
console.log(set.has(key)) // false

也可以调用 WeakSet 构造函数并传入一个可迭代对象来创建 Weak Set 集合。

let key1 = {},
  key2 = {}

let set = new WeakSet([key1, key2])

console.log(set.has(key1)) // true
console.log(set.has(key2)) // true

Set 集合和 Weak Set 集合的区别

  1. 最大的区别就是 Weak Set 保存的是对象值的弱引用,Weak Set 集合不能存储非对象值;
  2. 如果向 Weak Set 的 add() 方法传入非对象值会导致程序报错,而向 has() 方法和 delete() 方法传入非对象值会返回 false;
  3. Weak Set 集合不可迭代,不能用于 for-of 循环;
  4. Weak Set 集合不支持 forEach() 方法;
  5. Weak Set 集合不支持 size 属性;
  6. Weak Set 集合不暴露任何迭代器,没有 keys() 和 values() 方法。