重学ES6 Set 数据结构(1)

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

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

Set 结构不会添加重复的值。

const s = new Set();
[2,3,5,4,4,2,2].froEach(x => s.add(x));

for(let i of s) {
    console.log(i)
}
// 2 3 4 5
复制代码

Set函数接受一个数组（或者具有 iterable接口的其他数据结构）作为参数。

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

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

// example 3
function divs(){
    return [...document.querySelectorAll('div')]
}
const set = new Set(divs());
set.size // 60

//类似于
divs().forEach(div => set.add(div))
复制代码

数组去重的方法 [...new Set(array)]

注意：向Set加入值时，不会发生类型转换，所以 5 和 “5” 是两个不同的值。Set内部判断两个值是否相同使用的算法叫做“Same-value equality”类似于“===”，主要区别在于 NaN等于自身，而 精确相等认为 NaN 不等于自身。

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

let set = new Set();
set.add({});
set.size // 1
set.add({})
set.size // 2
复制代码

Set 实例的属性和方法

属性

Set.prototype.constructor: 构造函数

Set.prototype.size: Set 实例的成员总数

方法

add(value) ：添加某个值，返回set结构本身

delete(value) ：删除某个值，返回布尔值，表示是否成功

has(value)：返回布尔值，表示参数是否为Set成员

clear(value)：清除所有成员，没有返回值。

// 对象写法
const properties = {
    'width' : 1,
    'height': 1
}

if(properties[someName]){
    // do something
}

//Set 写法
const properties = new Set();
properties.add('width');
properties.add('height');

if(properties.has(someName){
    // do something
}
复制代码

Array.from方法将Set转化为数组。

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

// 去除数组重复元素的方法
function dedupe(array){
    return Array.from(new Set(array))
}

dedupe([1,2,3,3,2]); // [1,2,3]
复制代码

遍历操作

• keys()
• values()
• entries()
• forEach()

特别指出：Set遍历顺序就是插入顺序。比如可以使用Set保存一个回调函数列表，调用时，就可以按照添加顺序来调用。

keys,values,entries 方法都是返回遍历器对象。由于Set没有键名，只有键值，（或者说是 键名和键值是一样的），所以，keys和values方法的行为完全一致。

let set = new Set(['red','green','blue']);
for(let item of set.keys()){
    console.log(item)
}
// red
// green
// blue

let set = new Set(['red','green','blue']);
for(let item of set.values()){
    console.log(item)
}
// red
// green
// blue

let set = new Set(['red','green','blue']);
for(let item of set.entries()){
    console.log(item)
}
// ["red","red"]
// ["green","green"]
// ["blue","blue"]
复制代码

可以直接用 for ... of 循环遍历Set。

forEach()

set 结构的 forEach 对于每个成员执行操作，没有返回值。

let set = new Set([1,2,3])
set.forEach((value,key) => console.log(value * 2))
复制代码

遍历的应用

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

let set = new Set(['red','green','blue'])
let arr = [...set]
//['red','green','blue']
复制代码

扩展运算符(...)结合set，就可以进行数组去重

let arr = [1,2,3,2,5,3,4,5]
let unique = [... new Set(arr)]
// [1,2,3,4,5]
复制代码

map和filter 也可以用于 Set

let set = new Set([1,2,3])
set = new Set([...set].map(x => x*2))
// set {2,4,6}
复制代码

let set = new Set([1,2,3,4,5])
set = new Set([...set].filter(x => (x%2) == 0))
复制代码

使用Set结构，很容易实现 并集，交集，差集

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)))
复制代码

如果想在遍历操作中，同步改变原来的Set结构，没有直接的办法。只能变通一下，一种是利用原来的Set结构映射一个新的结构，然后赋值给原来的Set结构，另一种就是Array.from

//1
let set = new Set([1,2,3])
set = new Set([...set].map(val => val*2)

//2
let set = new Set([1,2,3])
set = new Set(Array.from(set,val => val*2))
复制代码