ES6之主要知识点（九）Set和Map

1.Set

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

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

const s = new Set();

[, , , , , , ].forEach(x => s.add(x));

for (let i of s) {

  console.log(i);

}

// 2 3 5 4

Set 函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。

// 例一

const set = new Set([, , , , ]);

[...set]

// [1, 2, 3, 4]

上面代码向 Set 实例添加了两个NaN，但是只能加入一个。这表明，在 Set 内部，两个NaN是相等。

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

Set 实例的属性和方法

Set 结构的实例有以下属性。

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

Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。

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

const items = new Set([, , , , ]);

const array = Array.from(items);

遍历操作

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

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

需要特别指出的是，Set的遍历顺序就是插入顺序。这个特性有时非常有用，比如使用Set保存一个回调函数列表，调用时就能保证按照添加顺序调用

let set = new Set([, , ]);

set.forEach((value, key) => console.log(value * ) )

// 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}

2.WeakSet

WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别。

首先，WeakSet 的成员只能是对象，而不能是其他类型的值

const ws = new WeakSet();

ws.add(1)

// TypeError: Invalid value used in weak set

ws.add(Symbol())

// TypeError: invalid value used in weak set

ES6 规定 WeakSet 不可遍历。

const a = [[1, 2], [3, 4]];

const ws = new WeakSet(a);

// WeakSet {[1, 2], [3, 4]}

const b = [3, 4];

const ws = new WeakSet(b);

// Uncaught TypeError: Invalid value used in weak set(…)

WeakSet 结构有以下三个方法。

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

WeakSet没有size属性，没有办法遍历它的成员。

3.Map

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

const map = new Map([

  ['name', '张三'],

  ['title', 'Author']

]);

map.size //

map.has('name') // true

map.get('name') // "张三"

map.has('title') // true

map.get('title') // "Author"

实例的属性和操作方法

Map 结构的实例有以下属性和操作方法。

（1）size属性

（2）set(key, value)

（3）get(key)

const m = new Map();

const hello = function() {console.log('hello');};

m.set(hello, 'Hello ES6!') // 键是函数

m.get(hello)  // Hello ES6!

（4）has(key)

（5）delete(key)

（6）clear()

遍历方法

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

keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回所有成员的遍历器。
forEach()：遍历 Map 的所有成员。

需要特别注意的是，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方法、filter方法，可以实现 Map 的遍历和过滤（Map 本身没有map和filter方法）。

const map0 = new Map()

  .set(1, 'a')

  .set(2, 'b')

  .set(3, 'c');

const map1 = new Map(

  [...map0].filter(([k, v]) => k < 3)

);

// 产生 Map 结构 {1 => 'a', 2 => 'b'}

const map2 = new Map(

  [...map0].map(([k, v]) => [k * 2, '_' + v])

    );

// 产生 Map 结构 {2 => '_a', 4 => '_b', 6 => '_c'}

与其他数据结构的互相转换

（1）Map 转为数组

const myMap = new Map()

  .set(true, 7)

  .set({foo: 3}, ['abc']);

[...myMap]

// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

（2）数组转为 Map

new Map([

  [true, 7],

  [{foo: 3}, ['abc']]

])

（3）Map 转为对象

function strMapToObj(strMap) {

  let obj = Object.create(null);

  for (let [k,v] of strMap) {

    obj[k] = v;

  }

  return obj;

}

const myMap = new Map()

  .set('yes', true)

  .set('no', false);

strMapToObj(myMap)

// { yes: true, no: false }

（4）对象转为 Map

function objToStrMap(obj) {

  let strMap = new Map();

  for (let k of Object.keys(obj)) {

    strMap.set(k, obj[k]);

  }

  return strMap;

}

objToStrMap({yes: true, no: false})

// Map {"yes" => true, "no" => false}

（5）Map 转为 JSON

Map 转为 JSON 要区分两种情况。一种情况是，Map 的键名都是字符串，这时可以选择转为对象 JSON。

function strMapToJson(strMap) {

  return JSON.stringify(strMapToObj(strMap));

}

let myMap = new Map().set('yes', true).set('no', false);

strMapToJson(myMap)

// '{"yes":true,"no":false}'

另一种情况是，Map 的键名有非字符串，这时可以选择转为数组 JSON。

function mapToArrayJson(map) {

  return JSON.stringify([...map]);

}

let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);

mapToArrayJson(myMap)

// '[[true,7],[{"foo":3},["abc"]]]'

（6）JSON 转为 Map

JSON 转为 Map，正常情况下，所有键名都是字符串。

function jsonToStrMap(jsonStr) {

  return objToStrMap(JSON.parse(jsonStr));

}

jsonToStrMap('{"yes": true, "no": false}')

// Map {'yes' => true, 'no' => false}

但是，有一种特殊情况，整个 JSON 就是一个数组，且每个数组成员本身，又是一个有两个成员的数组。

这时，它可以一一对应地转为Map。这往往是数组转为 JSON 的逆操作。

function jsonToMap(jsonStr) {

  return new Map(JSON.parse(jsonStr));

}

jsonToMap('[[true,7],[{"foo":3},["abc"]]]')

// Map {true => 7, Object {foo: 3} => ['abc']}

4.WeakMap

WeakMap结构与Map结构类似，WeakMap与Map的区别有两点。

首先，WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。

其次，WeakMap的键名所指向的对象，不计入垃圾回收机制。

const wm = new WeakMap();

const element = document.getElementById('example');

wm.set(element, 'some information');

wm.get(element) // "some information"

WeakMap只有四个方法可用：get()、set()、has()、delete()。