ES6--Set之再理解

Set

其实2016年就看过阮大神的ECMAScript 6 入门，当时看了Set之后，大致看懂了，但事实上根本没有理解Set到底是什么，所以更记不住，平时做项目大多用到的还是ES5的传统写法，以至于始终觉得Set很神秘。

上上周闲来无事，翻了翻《数据结构与算法JavaScript描述》，第9章讲的是集合，很好理解，跟高中数学课上学的集合差不多，可以存一些数据，但是集合中的每个元素都是唯一的（不重复），然后就是交集、并集、补集、全集、子集的一些概念，都很好理解。

今天又回过头来看阮神的ES6入门Set，突然恍然大悟！原来神秘的Set，其实就是集合而已！JS中也原生实现了这种数据结构！哈哈哈哈哈

知识点

下面简单梳理记录主要知识点，不完善之处后续慢慢补充。

• Set类似于数组，其成员的值唯一
• Set是一个构造函数，用来生成Set数据结构。就像Array是个构造函数一样
• Set函数可以接受具有iterable接口的其他数据结构作为参数，用来初始化
• 在Set内部，两个NaN是相等的，不能重复add
• 向Set加入值的时候，不会进行类型转换，所以5和"5"是两个不同的值。

PS：

Set 内部判断两个值是否不同，使用的算法叫做“Same-value-zero equality”，它类似于精确相等运算符（===），主要的区别是NaN等于自身，而精确相等运算符认为NaN不等于自身。

初始化Set的一些代码示例

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

// 示例二
const set = new Set(document.querySelectorAll('div'));
set.size // 11

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

// 数组去重
[...new Set([3, 2, 5, 3, 1, 6, 2, 7])]  // [3, 2, 5, 1, 6, 7]

Set 实例的属性和方法

属性：

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

操作方法（用于操作数据）：

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

代码示例如下：

let s = new Set();
s.add(1).add(1).add(2).add(3); 

s.size; // 3

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

s.delete(2) // true

s.clear()

ps: Array.from方法可以将Set 结构转为数组（Array.from方法用于将两类对象转为真正的数组：类数组对象和可遍历对象）

实现数组去重

function dedupe(array) {
    return Array.from(new Set(array))
}

遍历方法（用于遍历成员）：

• keys()：返回键名的遍历器
• values()：返回键值的遍历器
• entries()：返回键值对的遍历器
• forEach()：使用回调函数遍历每个成员
  
  PS：Set 的遍历顺序就是插入顺序。这个特性有时非常游泳，比如使用Set保存一个回调函数列表，调用时就能保证按照添加顺序调用。

未完待续。。。。。。