ES6语法和知识点：set和map

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 加入值的时候，不会发生类型转换，所以5和"5"是两个不同的值。Set 实例添加了两个NaN，但是只能加入一个。这表明，在 Set 内部，两个NaN是相等。另外，两个对象总是不相等的。两个空对象不相等，它们被视为两个值。

let set = new Set();

set.add({});
set.size // 1

set.add({});
set.size // 2

 

四个操作方法。

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

 Array.from方法可以将 Set 结构转为数组。

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

 

Set 结构的实例有四个遍历方法，可以用于遍历成员。

 

• keys()：返回键名的遍历器
• values()：返回键值的遍历器
• entries()：返回键值对的遍历器
• forEach()：使用回调函数遍历每个成员

for (let item of set.entries()) {
  console.log(item);
}

set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value))
// 1 : 1
// 4 : 4
// 9 : 9

 

数组的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结构：{2, 4}

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}

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

遍历操作中，同步改变原来的 Set 结构， 一种是利用原 Set 结构映射出一个新的结构，然后赋值给原来的 Set 结构；另一种是利用Array.from方法。

/ 方法一
let set = new Set([1, 2, 3]);
set = new Set([...set].map(val => val * 2));
// set的值是2, 4, 6

// 方法二
let set = new Set([1, 2, 3]);
set = new Set(Array.from(set, val => val * 2));
// set的值是2, 4, 6

 

WeakSet 结构与 Set 类似，也是不重复的值的集合。WeakSet 的成员只能是对象，而不能是其他类型的值。

• WeakSet.prototype.add(value)：向 WeakSet 实例添加一个新成员。
• WeakSet.prototype.delete(value)：清除 WeakSet 实例的指定成员。
• WeakSet.prototype.has(value)：返回一个布尔值，表示某个值是否在 WeakSet 实例之中。

JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。

 ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

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构造函数接受数组作为参数，实际上执行的是下面的算法。

const items = [
  ['name', '张三'],
  ['title', 'Author']
];

const map = new Map();

items.forEach(
  ([key, value]) => map.set(key, value)
);

 只有对同一个对象的引用，Map 结构才将其视为同一个键。

const map = new Map();

map.set(['a'], 555);
map.get(['a']) // undefined

实际上这是两个值，内存地址是不一样的，因此get方法无法读取该键，返回undefined。如果 Map 的键是一个简单类型的值（数字、字符串、布尔值），则只要两个值严格相等，Map 将其视为一个键，比如0和-0就是一个键，布尔值true和字符串true则是两个不同的键。另外，undefined和null也是两个不同的键。虽然NaN不严格相等于自身，但 Map 将其视为同一个键。

Map 结构原生提供三个遍历器生成函数和一个遍历方法。

• keys()：返回键名的遍历器。
• values()：返回键值的遍历器。
• entries()：返回所有成员的遍历器。
• forEach()：遍历 Map 的所有成员。
• Map 结构转为数组结构，比较快速的方法是使用扩展运算符（...）。 

• [...map.keys()]
  // [1, 2, 3]

 WeakMap结构与Map结构类似，也是用于生成键值对的集合。WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。