ES6的Set结构

在上节中，提到了es6的set数据结构，Set本身是一个构造函数，用来生成set数据结构。

const s = new Set();
[1,2,2,3].forEach(x => s.add(x));
//此时的s就是一个set结构的数组去重后的数据类型，set结构是不会添加重复的值
s.size //3

const set = new Set(document.querySelectorAll('div'));
set.size  //56
该例子接受类似数组的对象作为参数，所以数组去重方法
[...new Set(array)]

 

在set加入值的时候，不会发生类型转换，数字和string是不同的值，Set内部判断两个值是否不同，使用的是“same-value-zero-equality”,类似于 ===，主要的区别是NaN等于它本身。

向Set实例中添加多个NaN，最后只能加入一个，表名Set内部，两个NaN是相等的。

但是两个对象却是不相等的，被视为两个值，因为是两个不同的栈内存。

let set = new Set();
set.add({});
set.add({});
set.size;   //2

Set结构的实例的属性和方法：

1,Set结构原型上面，constructor指向构造函数，size的方法返回成员总数

2，add(value)  //添加某个值，返回Set本身

3，delete(value)  //删除某个值，返回一个布尔值

4，has(value)  //判断是不是set的成员

5，clear()  //清除所有的成员

s.add(1).add(2).add(2);
// 注意2被加入了两次

s.size // 2

s.has(1) // true
s.has(2) // true
s.has(3) // false

s.delete(2);
s.has(2) // false

如何遍历Set结构？

keys()  values()  entires() //返回键值对的遍历器

forEach()

set的遍历顺序就是插入顺序。

Set机构没有键名，只有键值（键名和键值是同一个值），所以keys() 和 values()的方法行为完全一致。

let set = new Set(['red','green','blue']);
for(let item of set.keys()){
    console.log('keys==>',item)
}
for(let item of set.values()){
    console.log('values==>',item)
}
for(let item of set.entries()){
    console.log('entire==>',item)
}
VM112:4 keys==> red
VM112:4 keys==> green
VM112:4 keys==> blue
VM112:7 values==> red
VM112:7 values==> green
VM112:7 values==> blue
VM112:10 entire==> (2) ["red", "red"]
VM112:10 entire==> (2) ["green", "green"]
VM112:10 entire==> (2) ["blue", "blue"]

可以直接省略values的方法，直接使用for/of进行遍历。或者使用forEach进行key和value的遍历，但是Set结构的key和value一致。

扩展运算符内部使用的就是for...of循环，所以也是可以用于 Set结构。

使用Set可以很快实现 并集（Union），交集（Intersect），差集（Difference）

let a = new Set([1,2,3]);
let b = new Set([4,3,2]);
//并集，主要是去重
let union = new Set([...a,...b]);

//交集
let intersect = new Set([...a].filter(x => b.has(x)));

//差集
let difference = new Set([...a].filter(x => !b.has(x)));