ES6之新增set数据结构

学习set

set是ES6中的新增的数据结构，是一种构造函数，类似于数组，但是里面的元素都是唯一的，不重复的。

例如：

const set = new Set();

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

for(let i of set) {

    console.log(i); // 1 2 3 4 5

}

set的属性

set的属性包括constructor（set原型）和size（用来记录set的大小）。

用法：Set.prototype.constructor,Set.prototype.size。

例如：

let set = new Set([1,2,3,2,2,2,1,2,34,4,45,523]);

console.log(set.constructor); // ƒ Set() { [native code] }

console.log(set.size); // 7

set的方法

set的操作方法

add(val); 添加某个值
delete(val); // 删除某个值，返回布尔值，表示结果。
has(val); // 判断该值是否存在于Set中。
clear(); // 清楚所有的值

例如：

let set = new Set();

//1.add();

set.add(12).add(32);

console.log(set); // Set(2) {12, 32}

// 2.delete(val);

set.delete(32);

console.log(set); // Set(1) {12}

//3.has(val);

console.log(set.has(88)); // false

//4.clear();

set.clear();

console.log(set); // Set(0) {}

set的遍历方法

set的键和值是同一个值。

keys() 返回键名的方法
values() 返回键值的方法
entries() 返回键值对的方法
forEach() 用回调函数遍历各个元素的方法

例如：

let set = new Set([2,2,2,1,5,34,45,33,23,32]);

for(let item of set.keys()) {

    console.log(item); // // 2 1 5 34 45 33 23 32

}

for(let item of set.values()) {

    console.log(item); // // 2 1 5 34 45 33 23 32

}

for(let item of set.entries()) {

    console.log(item); // [2, 2] [1, 1] [5, 5] [34, 34] [45, 45] [33, 33] [23, 23] [32, 32]

}

set.forEach((value,key) => console.log(key+ '=' +value)); // 2=2 1=1 5=5 34=34 45=45 33=33 23=23 32=32

应用

...运算符和Array.from以及map和filter都可以遍历set结构。

`...`运算符

例如：

let set = new Set('123456654321');

console.log([...set]); // ["1", "2", "3", "4", "5", "6"]

...和数组加起来可以去重

例如：

let arr = [1,2,3,4,6,3,3,1,3,4];

let removeRepeat = [...new Set(arr)];

console.log(removeRepeat); //[1, 2, 3, 4, 6]

`map`方法

例如：

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

console.log(new Set([...set].map(x => x*2))); // {2, 4, 6, 8}

`filter`方法

例如：

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

console.log(new Set([...set].filter(x => x%2 === 0))); // {2, 4}

`Array.from`

例如：

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

console.log(new Set(Array.from(set, x => x*2))); // {2, 4, 6, 8}

小案例

使用这个set可以实现数学中的交集，并集效果。

例如：

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

let b = new Set([3,4,5]);

let numa = new Set([...a,...b]);

console.log(numa); // {1, 2, 3, 4, 5}

//并集

let numb = new Set([...a].filter(x => b.has(x)));

console.log(numb); // {3}

学习WeakSet

WeakSet和Set类似，也是没有重复的值。注意的是，它里面的成员只能是对象，其他数据类型不接受。

例如：

let ws = new WeakSet(1); // Uncaught TypeError: number 1 is not iterable (cannot read property Symbol(Symbol.iterator))

let wsa = new WeakSet('1'); // Uncaught TypeError: Invalid value used in weak set

let wsb = new WeakSet({x:1}); // Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))

let wsc = new WeakSet([1,3]); // Uncaught TypeError: Invalid value used in weak set

let wsc = new WeakSet([[1,2],[3,4]]);

console.log(wsc); // WeakSet {Array(2), Array(2)}

结论：从上面的例子中，可以看出1.WeakSet构造函数的参数不接受字符串，数字，普通对象，数组（数组中的参数必须是对象）；接受数组（数组中的参数是对象的数组）。

WeakSet的方法

WeakSet.prototype.add(val)添加一个值;
WeakSet.prototype.delete(val)删除一个值;
WeakSet.prototype.has(val)是否有这个值;

例如：

let wset = new WeakSet([[1,3,4],[23,4,52,2]]);

//1.添加值

wset.add([12,33,23]);

console.log(wset); // WeakSet {Array(3), Array(4), Array(3)}

//2.删除值

wset.delete([12,33,23]);

console.log(wset); // WeakSet {Array(4), Array(3)}

//3.是否有这个值

console.log(wset.has([12,33,23])); // false

WeakSet的属性

由于WeakSet中的值都是弱属性，随时可能消失，被垃圾回收，遍历机制无法保证值是否还存在，所以不能用size和forEach()。

例如：

let wset = new WeakSet([[1,3,4],[23,4,52,2]]);

console.log(wset.size); // undefined

for(let i=0;i<wset.length;i++) {

    console.log(wset[i]);

}

写在最后

Set和WeakSet就介绍到这里，赶快用起来吧！