ES6 Set 和 Map

Set

基本用法

set类似于数组，但成员是唯一的。Set本身是一个构造函数，用来生成Set数据结构。

const a = new Set();
[1,2,3,3,4,1,2,3,2,2,1].forEach(b => a.add(b));
for(let i of a) {
    console.log(i)
}
// 1 2 3 4

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

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

向set加入值时不会发生类型转换，所以5和 '5' 是两个不同的值。

两个对象总是不相等的

let s = new Set();
s.add({}).add({});
s.size // 2

Set实例的属性和方法

set结构的实例有以下方法：

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

Set实例的方法分为操作方法和遍历方法

操作方法：

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

let s = new Set();
s.add(1).add(2);
s.size // 2
s.delete(1) // true
s.has(1) // false
s.clear()
s.size // 0

遍历操作：

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

Set遍历的顺序就是插入的顺序

由于Set结构没有键名，只有键值。所有keys方法和values方法的行为完全一致。

let set = new Set(['red', 'green', 'blue']);
for (let key of set.keys()) {
    console.log(key)
};
// red green blue

for (let value of set.values()) {
    console.log(value)
};
// red green blue

for (let item of set.entries()) {
    console.log(item)
};
// ["red", "red"] ["green", "green"] ["blue", "blue"]

// for of 也可直接遍历Set
for (let item of set) {
    console.log(item)
};
// red green blue

let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2));
// 2 4 6

将Set数据结构转化为Array：

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

// 方法一
Array.from(set);

// 方法二
[...set]

遍历的应用：

扫描二维码关注公众号，回复： 15898101 查看本文章

扩展运算符和Set配合去重

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

配合扩展运算符使用map和filter

let set = new Set([1, 2, 3]);
set = new Set([...set].map(a => a * 2));
// 2, 4, 6

交集、并集、差集

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

// 并集
let union = new Set([...a, ...b]);
// 1, 2, 3, 4, 5

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// 3

// 差集
let intersect = new Set([...a].filter(x => !b.has(x)));
// 1, 2

如果想在遍历操作中同步改变原来的Set结构，只有两个变通方法。

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

// 方法一
set = new Set([...set].map(x => x * 2));

// 方法二
set = new Set(Array.from(set, val => val * 2));

WeakSet

含义

WeakSet和Set类似，也是不重复的值的合集。但是他与Set有两个区别：

一、WeakSet的成员只能是对象，不能是其他类型的值

consr ws = new WeakSet();
ws.add(1);
// 报错
ws.add(Symnol());
// 报错

二、WeakSet中的对象都是弱引用，即垃圾回收机制不考虑WeakSet对该对象的引用。也就是说，如果其他对象都不在引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象是否还存在于WeakSet中。

语法

WeakSet是一个构造函数，可以使用new命令创建WeakSet数据结构。

const ws = new WeakSet()

作为构造函数，WeakSet接受一个数组或类似数组的对象作为参数。具有iterable接口的对象也都可做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);
// 报错，数组b的成员不是对象

WeakSet结构有以下3个方法：

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

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

Map

含义和基本用法

JavaScript的对象本质上是键值对的集合，但只能用字符串作为键，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 map = new Map([
    ['name', '张三'],
    ['title', '提示']
]);
map.size //  2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "提示"

Set和Map也可用来生成新的Map。（任何具有iterator接口且每个成员都是一个双元素数组的数据结构都可以当作Map构造函数的参数）

如果对同一个键多次赋值，后面的值将覆盖前面的值。只有同一对象的引用，Map结构才将其视为同一个键。

const map = new Map();
map.set(['a'], 555);
map.get(['a']); // undefined

因为两个数组的内存地址不同，因此get方法无法读取该键，返回undefined。

实例和属性的操作方法

• size属性：返回Map结构的成员总数
• set(key, value)：设置key对应的键值，然后返回整个Map结构，如果key已经有值，则键值会被更新，否则就新生成该键
• get(key)：读取key对应的键值，如果找不到key，则返回undefined
• has(key)：返回布尔值，表示某个键是否在Map数据结构中
• delete(key)：删除某个键，返回true。删除失败，返回false
• clear()：清除所有成员，没有返回值

遍历方法

• keys方法：返回键名的遍历器
• values方法：返回键值的遍历器
• entries方法：返回所有成员的遍历器
• forEach方法：遍历Map的所有成员

Map遍历的顺序就是插入的顺序

可使用for of直接遍历，等同于map.entries()

也可使用扩展运算符转化为数组，通过map方法、filter方法来实现遍历和过滤。

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

Map转数组

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

数组转Map

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

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 }

对象转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}

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

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"]]]'

JSON转Map

function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}

jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}

function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}

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

WeakMap

含义

WeakMap结构与Map结构类似，也是用于生成键值对的集合。

// WeakMap 可以使用 set 方法添加成员
const wm1 = new WeakMap();
const key = {foo: 1};
wm1.set(key, 2);
wm1.get(key) // 2

// WeakMap 也可以接受一个数组，
// 作为构造函数的参数
const k1 = [1, 2, 3];
const k2 = [4, 5, 6];
const wm2 = new WeakMap([[k1, 'foo'], [k2, 'bar']]);
wm2.get(k2) // "bar"

WeakMap与Map有以下两点区别

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

const map = new WeakMap();
map.set(1, 2)
// TypeError: 1 is not an object!
map.set(Symbol(), 2)
// TypeError: Invalid value used as weak map key
map.set(null, 2)
// TypeError: Invalid value used as weak map key

二、WeakMap的键名所指向的对象，不计入垃圾回收机制。它的键名所引用的对象都是弱引用，即垃圾回收机制不将该引用考虑在内。因此，只要所引用的对象的其他引用都被清除，垃圾回收机制就会释放该对象所占用的内存。也就是说，一旦不再需要，WeakMap 里面的键名对象和所对应的键值对会自动消失，不用手动删除引用。

WeakMap语法

WeakMap 与 Map 方法上的区别有两个

一、是没有遍历操作，也没有size属性

二、无法清空，即不支持clear方法。

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

const wm = new WeakMap();

// size、forEach、clear 方法都不存在
wm.size // undefined
wm.forEach // undefined
wm.clear // undefined