Set

发表于 | 分类于

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

基本用法

创建 Set

Set 本身是一个构造函数，调用构造函数用来生成 Set 数据结构。

1
let s = new Set();

数据初始化

Set 函数可以接受一个数组（或类似数组的对象）作为参数，用来进行数据初始化。

1
let s = new Set([1, 2, 3, 4, 4]);

通过上面代码运行结果我们可以看到，Set 成员当中如果存在重复的值， 会被自动删除掉。

Set 实例的属性和方法

Set 结构的实例有以下属性和操作方法。

属性

  • size：返回 Set 实例的成员总数。
1
2
let s = new Set([1, 2, 3])
console.log( s.size );   // 3

方法

Set 实例的方法分为两大类：操作方法（用于数据操作）和遍历方法（用于遍历数据）。

操作方法

  • add(value)：添加数据，并返回新的 Set 结构。
  • delete(value)：删除数据，返回一个布尔值，表示是否删除成功。
  • has(value)：查看是否存在某个数据，返回一个布尔值。
  • clear()：清除所有数据，没有返回值。
1
2
3
4
5
6
7
8
9
10
11
12
13
let set = new Set([1, 2, 3, 4, 4]); 
// 添加数据 5
let addSet = set.add(5);
console.log(addSet);   // Set(5) {1, 2, 3, 4, 5}
// 删除数据 4s
let delSet = set.delete(4);
console.log(delSet);   // true
// 查看是否存在数据 4
let hasSet = set.has(4);
console.log(hasSet);   // false
// 清除所有数据
set.clear();
console.log(set);      // Set(0) {}

遍历方法

Set 提供了三个遍历器生成函数和一个遍历方法。

  • keys()：返回一个键名的遍历器。
  • values()：返回一个键值的遍历器。
  • entries()：返回一个键值对的遍历器。
  • forEach()：使用回调函数遍历每个成员。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
let color = new Set(["red", "green", "blue"]);
for(let item of color.keys()){
	console.log(item);
}
// red
// green
// blue
for(let item of color.values()){
	console.log(item);
}
// red
// green
// blue
for(let item of color.entries()){
	console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
color.forEach((item) => {
	console.log(item)
})
// red
// green
// blue

说明：

上例代码中，entries()方法返回的遍历器，同时包括了键名和键值，所以每次输出一个数组，它的两个成员完全相等。

与数组相关操作

Set 转数组

由于扩展运算符...内部的原理也是使用的for-of循环，所以也可以用于操作 Set 结构。

例如将 Set 结构转换为数组结构：

1
2
let color = new Set(["red", "green", "blue"]);
let colorArr = [...color];

数组剔重

扩展运算符和 Set 结构相结合，就可以去除数组的重复成员。

1
2
let arr = [1, 1, 2, 2, 3, 3];
let unique = [...new Set(arr)];     // [1, 2, 3]

WeakSet

WeakSet 类似于 Set，也是不重复的值的集合。但是它只能用于存储引用数据类型，而不能是基本数据类型的值。

1
new WeakSet([1, 2, 3]);   // 报错

WeakSet 无法在创建时传入一个数组进行数据初始化。但是 Set 的add()、has()、delete()三个操作方法 WeakSet 同样可以使用。

1
2
3
4
5
6
7
8
9
let ws = new WeakSet();
ws.add(1);            // 报错：不能添加基本数据类型
let arr = [1, 2, 3];
ws.add(arr);
console.log( ws );    // 看不见数据，可以通过 has() 方法查看是否存在
ws.delete(arr);
console.log( ws.has(arr) );

WeakSet 的弱引用

WeakSet 相对于 Set 来说，好像并没有什么存在的意义。它有的 Set 也有，它没有的 Set 也有。但是并不是，WeakSet 有一样功能是优于 Set 的，那就是 WeakSet 特有的“弱引用”。

1
2
3
4
5
6
let arr = [6, 7, 8];
let s = new Set(arr);
console.log(s);    // Set { 6, 7, 8 }
arr = null;
console.log(s);    // Set { 6, 7, 8 }
console.log(arr);  // null

在上例中，通过arr = null删除了对数组的引用，但是考虑到 Set 中还有对该数组的引用，所以垃圾回收机制并不会将arr的数据销毁，但是再通过arr却又访问不到这些数据了。这种情况就会造成内存泄漏。

内存泄漏，即内存中保存着不能再被访问的数据时，就会发生内存泄漏。

Set 不能避免的问题，而 WeakSet 就能很好的解决。

1
2
3
4
5
6
7
let arr = [6, 7, 8];
let ws = new WeakSet();
ws.add(arr);
console.log(ws.has(arr));    // true
arr = null;
console.log(ws.has(arr));    // false
console.log(arr);            // null

因为 WeakSet 成员的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用。也就是说，如果其他地方都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。

同时这个特点也就意味着，WeakSet 不能遍历，是因为成员都是弱引用，随时可能消失，遍历不能保证成员的存在。可能刚刚遍历结束，成员就取不到了。

WeakSet 的一个用处是存储 DOM 节点，而不用担心这些节点从文档移除时，会引起内存的泄露。

我 秦始皇 打钱