Set
基本用法
ES6 提供了新的数据结构Set，它类似于数组，但是成员的值都是唯一的，没有重复的值。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函数接受数组作为参数，例三是接受类似数组的对象作为参数。
在 Set 内部，两个NaN是相等的。另外，两个对象总是不相等的。
Set 实例的属性和方法
Set 实例的属性
Set 结构的实例有以下属性：
| 属性 | 属性处理程序性 | 描述 |
|---|---|---|
| constructor | Set.prototype.constructor | 构造函数，默认就是Set函数 |
| size | Set.prototype.size | 返回Set实例的成员总数 |
Set 实例的方法
Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）
操作方法
下面先介绍四个操作方法：
| 方法 | 方法处理程序性 | 描述 |
|---|---|---|
| add | Set.prototype.add(value) | 添加某个值，返回 Set 结构本身 |
| delete | Set.prototype.delete(value) | 删除某个值，返回一个布尔值，表示删除是否成功 |
| has | Set.prototype.has(value) | 返回一个布尔值，表示该值是否为Set的成员 |
| clear | Set.prototype.clear() | 清除所有成员，没有返回值 |
上面这些属性和方法的实例如下:
let s = new Set();
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
遍历方法
下面再介绍四个遍历方法：
| 方法 | 方法处理程序性 | 描述 |
|---|---|---|
| keys | Set.prototype.keys() | 返回键名的遍历器 |
| values | Set.prototype.values() | 返回键值的遍历器 |
| entries | Set.prototype.entries() | 返回键值对的遍历器 |
| forEach | Set.prototype.forEach() | 遍历 Set 的所有成员 |
需要特别指出的是，Set的遍历顺序就是插入顺序。这个特性有时非常有用，比如使用 Set 保存一个回调函数列表，调用时就能保证按照添加顺序调用。
- keys()、values()、entries()
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
for (let item of set.values()) {
console.log(item);
}
// red
// green
// blue
for (let item of set.entries()) {
console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
上面代码中，entries方法返回的遍历器，同时包括键名和键值，所以每次输出一个数组，它的两个成员完全相等。
- forEach()
Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。
let set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value))
// 1 : 1
// 4 : 4
// 9 : 9
上面代码说明，forEach方法的参数就是一个处理函数。该函数的参数与数组的forEach一致，依次为键值、键名、集合本身（上例省略了该参数）。这里需要注意，Set 结构的键名就是键值（两者是同一个值），因此第一个参数与第二个参数的值永远都是一样的。
另外，forEach方法还可以有第二个参数，表示绑定处理函数内部的this对象。
Set 使用场景
去重
Set可用于去除数组重复成员的方法
- 方法一
// 去除数组的重复成员
const array = [...new Set(array)]
也可以用于，去除字符串里面的重复字符
const str = [...new Set('ababbc')].join('')
// "abc"
- 方法二
Array.from方法可以将 Set 结构转为数组，这就提供了去除数组重复成员的另一种方法
const array = Array.from(new Set(array))
Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）
交集、并集、差集
使用 Set 可以很容易地实现并集（Union）、交集（Intersect）和差集（Difference）
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}
// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}
// （a 相对于 b 的）差集
let difference = new Set([...a].filter(x => !b.has(x)));
Map
基本用法
Map 数据结构，它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。
const m = new Map();
const o = {p: 'Hello World'};
m.set(o, 'content')
m.get(o) // "content"
m.has(o) // true
m.delete(o) // true
m.has(o) // false
上面代码使用 Map 结构的set方法，将对象o当作m的一个键，然后又使用get方法读取这个键，接着使用delete方法删除了这个键。
上面的例子展示了如何向 Map 添加成员。作为构造函数，Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。
const map = new Map([
['name', '张三'],
['title', 'Author']
]);
map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"
上面代码在新建 Map 实例时，就指定了两个键name和title。
如果对同一个键多次赋值，后面的值将覆盖前面的值。
const map = new Map();
map
.set(1, 'aaa')
.set(1, 'bbb');
map.get(1) // "bbb"
上面代码对键1连续赋值两次，后一次的值覆盖前一次的值。
注意，只有对同一个对象的引用，Map 结构才将其视为同一个键。这一点要非常小心。
const map = new Map();
map.set(['a'], 555);
map.get(['a']) // undefined
上面代码的set和get方法，表面是针对同一个键，但实际上这是两个不同的数组实例，内存地址是不一样的，因此get方法无法读取该键，返回undefined。
Map 实例的属性和方法
Map 实例的属性
Map 结构的实例有以下属性：
| 属性 | 属性处理程序性 | 描述 |
|---|---|---|
| constructor | Map.prototype.constructor | 构造函数，默认就是Map函数 |
| size | Map.prototype.size | 返回Map实例的成员总数 |
Map 实例的方法
Map 实例的方法也分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）
操作方法
下面先介绍四个操作方法：
| 方法 | 方法处理程序性 | 描述 |
|---|---|---|
| set | Map.prototype.set(key,value) | 设置键名key对应的键值为value，然后返回整个 Map 结构 |
| get | Map.prototype.get(key) | 读取key对应的键值，如果找不到key，返回undefined |
| delete | Map.prototype.delete(value) | 删除某个值，返回一个布尔值，表示删除是否成功 |
| has | Map.prototype.has(value) | 返回一个布尔值，表示该值是否为Map的成员 |
| clear | Map.prototype.clear() | 清除所有成员，没有返回值 |
上面这些属性和方法的实例如下:
const m = new Map();
m.set('edition', 6) // 键是字符串
m.set(262, 'standard') // 键是数值
m.set(undefined, 'nah') // 键是 undefined
map.size // 3
m.get('edition') //6
m.has('edition') // true
m.has('years') // false
m.has(262) // true
m.has(undefined) // true
m.delete(undefined)
m.has(undefined) // false
map.clear()
map.size // 0
遍历方法
Map 结构原生提供三个遍历器生成函数和一个遍历方法
| 方法 | 方法处理程序性 | 描述 |
|---|---|---|
| keys | Map.prototype.keys() | 返回键名的遍历器 |
| values | Map.prototype.values() | 返回键值的遍历器 |
| entries | Map.prototype.entries() | 返回键值对的遍历器 |
| forEach | Map.prototype.forEach() | 遍历 Map 的所有成员 |
const map = new Map([
['F', 'no'],
['T', 'yes'],
]);
for (let key of map.keys()) {
console.log(key);
}
// "F"
// "T"
for (let value of map.values()) {
console.log(value);
}
// "no"
// "yes"
for (let item of map.entries()) {
console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"
// 或者
for (let [key, value] of map.entries()) {
console.log(key, value);
}
// "F" "no"
// "T" "yes"
// 等同于使用map.entries()
for (let [key, value] of map) {
console.log(key, value);
}
// "F" "no"
// "T" "yes"
Map 结构转为数组结构，比较快速的方法是使用扩展运算符（...）
const map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
[...map.keys()]
// [1, 2, 3]
[...map.values()]
// ['one', 'two', 'three']
[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]
[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]
