ES6——集合(Set)

原创
2019/08/30 15:21
阅读数 20

基本用法


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


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


const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4


上面代码通过add()方法向 Set 结构加入成员,结果表明 Set 结构不会添加重复的值。


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


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

// 例二
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5

// 例三
const set = new Set(document.querySelectorAll('div'));
set.size // 56

// 类似于
const set = new Set();
document
 .querySelectorAll('div')
 .forEach(div => set.add(div));
set.size // 56


上面代码中,例一和例二都是Set函数接受数组作为参数,例三是接受类似数组的对象作为参数。


上面代码也展示了一种去除数组重复成员的方法。


// 去除数组的重复成员
[...new Set(array)]


上面的方法也可以用于,去除字符串里面的重复字符。


[...new Set('ababbc')].join('')
// "abc"


向 Set 加入值的时候,不会发生类型转换,所以5"5"是两个不同的值。Set 内部判断两个值是否不同,使用的算法叫做“Same-value-zero equality”,它类似于精确相等运算符(===),主要的区别是NaN等于自身,而精确相等运算符认为NaN不等于自身。



上面代码向 Set 实例添加了两个NaN,但是只能加入一个。这表明,在 Set 内部,两个NaN是相等。


另外,两个对象总是不相等的。



上面代码表示,由于两个空对象不相等,所以它们被视为两个值。


Set 实例的属性和方法


Set 结构的实例有以下属性。


  • Set.prototype.constructor:构造函数,默认就是Set函数。
  • Set.prototype.size:返回Set实例的成员总数。


Set 实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。下面先介绍四个操作方法。


  • add(value):添加某个值,返回 Set 结构本身。
  • delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
  • has(value):返回一个布尔值,表示该值是否为Set的成员。
  • clear():清除所有成员,没有返回值。


上面这些属性和方法的实例如下。



下面是一个对比,看看在判断是否包括一个键上面,Object结构和Set结构的写法不同。



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



这就提供了去除数组重复成员的另一种方法。



遍历操作


Set 结构的实例有四个遍历方法,可以用于遍历成员。


  • keys():返回键名的遍历器
  • values():返回键值的遍历器
  • entries():返回键值对的遍历器
  • forEach():使用回调函数遍历每个成员


需要特别指出的是,Set的遍历顺序就是插入顺序。这个特性有时非常有用,比如使用 Set 保存一个回调函数列表,调用时就能保证按照添加顺序调用。


(1)keys()values()entries()


keys方法、values方法、entries方法返回的都是遍历器对象(详见《Iterator 对象》一章)。由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致。



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


Set 结构的实例默认可遍历,它的默认遍历器生成函数就是它的values方法。



这意味着,可以省略values方法,直接用for...of循环遍历 Set。



(2)forEach()


Set 结构的实例与数组一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值。



上面代码说明,forEach方法的参数就是一个处理函数。该函数的参数与数组的forEach一致,依次为键值、键名、集合本身(上例省略了该参数)。这里需要注意,Set 结构的键名就是键值(两者是同一个值),因此第一个参数与第二个参数的值永远都是一样的。


另外,forEach方法还可以有第二个参数,表示绑定处理函数内部的this对象。


(3)遍历的应用


扩展运算符(...)内部使用for...of循环,所以也可以用于 Set 结构。



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



而且,数组的mapfilter方法也可以间接用于 Set 了。



因此使用 Set 可以很容易地实现并集(Union)、交集(Intersect)和差集(Difference)。



如果想在遍历操作中,同步改变原来的 Set 结构,目前没有直接的方法,但有两种变通方法。一种是利用原 Set 结构映射出一个新的结构,然后赋值给原来的 Set 结构;另一种是利用Array.from方法。



上面代码提供了两种方法,直接在遍历操作中改变原来的 Set 结构。


WeakSet


含义


WeakSet 结构与 Set 类似,也是不重复的值的集合。但是,它与 Set 有两个区别。


首先,WeakSet 的成员只能是对象,而不能是其他类型的值。



上面代码试图向 WeakSet 添加一个数值和Symbol值,结果报错,因为 WeakSet 只能放置对象。


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


这是因为垃圾回收机制依赖引用计数,如果一个值的引用次数不为0,垃圾回收机制就不会释放这块内存。结束使用该值之后,有时会忘记取消引用,导致内存无法释放,进而可能会引发内存泄漏。WeakSet 里面的引用,都不计入垃圾回收机制,所以就不存在这个问题。因此,WeakSet 适合临时存放一组对象,以及存放跟对象绑定的信息。只要这些对象在外部消失,它在 WeakSet 里面的引用就会自动消失。


由于上面这个特点,WeakSet 的成员是不适合引用的,因为它会随时消失。另外,由于 WeakSet 内部有多少个成员,取决于垃圾回收机制有没有运行,运行前后很可能成员个数是不一样的,而垃圾回收机制何时运行是不可预测的,因此 ES6 规定 WeakSet 不可遍历。


这些特点同样适用于本章后面要介绍的 WeakMap 结构。


语法


WeakSet 是一个构造函数,可以使用new命令,创建 WeakSet 数据结构。



作为构造函数,WeakSet 可以接受一个数组或类似数组的对象作为参数。(实际上,任何具有 Iterable 接口的对象,都可以作为 WeakSet 的参数。)该数组的所有成员,都会自动成为 WeakSet 实例对象的成员。



上面代码中,a是一个数组,它有两个成员,也都是数组。将a作为 WeakSet 构造函数的参数,a的成员会自动成为 WeakSet 的成员。


注意,是a数组的成员成为 WeakSet 的成员,而不是a数组本身。这意味着,数组的成员只能是对象。



上面代码中,数组b的成员不是对象,加入 WeaKSet 就会报错。


WeakSet 结构有以下三个方法。


  • WeakSet.prototype.add(value):向 WeakSet 实例添加一个新成员。
  • WeakSet.prototype.delete(value):清除 WeakSet 实例的指定成员。
  • WeakSet.prototype.has(value):返回一个布尔值,表示某个值是否在 WeakSet 实例之中。


下面是一个例子。



WeakSet 没有size属性,没有办法遍历它的成员。



上面代码试图获取sizeforEach属性,结果都不能成功。


WeakSet 不能遍历,是因为成员都是弱引用,随时可能消失,遍历机制无法保证成员的存在,很可能刚刚遍历结束,成员就取不到了。WeakSet 的一个用处,是储存 DOM 节点,而不用担心这些节点从文档移除时,会引发内存泄漏。


下面是 WeakSet 的另一个例子。



上面代码保证了Foo的实例方法,只能在Foo的实例上调用。这里使用 WeakSet 的好处是,foos对实例的引用,不会被计入内存回收机制,所以删除实例的时候,不用考虑foos,也不会出现内存泄漏。

本文同步分享在 博客“羊羽”(other)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享

作者的其它热门文章

加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部