[ES6] 数据结构 Map | Set | WeakMap | WeakSet目录 Map Set WeakMa

一 Map

set get has 常用api

JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制

为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。 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 结构的set方法，将对象o当作m的一个键，然后又使用get方法读取这个键，接着使用delete方法删除了这个键。

上面的例子展示了如何向 Map 添加成员。作为构造函数，Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

const map1 = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);

map1.size // 2
map1.has('name') // true
map1.get('name') // '张三'

1) 遍历方法

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

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

需要特别注意的是，Map 的遍历顺序就是插入顺序。

2) Map 结构转为数组

比较快速的方法是使用扩展运算符（...）。

当然,也可以转换为对象,或者JSON(都可以互转)

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

二 Set

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

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

0) 操作方法与遍历方法

操作方法

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

遍历方法

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

1) 使用场景

1.1) 数组去重

// 去除数组的重复成员
[...new Set(array)]
let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
// [3, 5, 2]

1.2) 去除字符串里面的重复字符

[...new Set('ababbc')].join('')
// "abc"

1.3) **使用 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)));
// Set {1}

三 WeakMap

let k1 ={a:1}; let k2 ={b:2}; let v1 =[1,2]; let v2=[3,6]
let wm = new WeakMap([[k1, v1], [k2, v2]]) 
// WeakMap {{…} => Array(2), {…} => Array(2)}

WeakMap的方法也特别少，只有四个[增删改查]：delete、get、has、set。

注意：WeakMap对Key有限制，它必须是Object（Symbol也不行）

1) WeakMap场景

通过如下IIFE可以看出 WeakMap在IIFE作用域外是被回收了.而Map没有

var map = new Map();
var weakmap = new WeakMap();

(function IIFE(){
    var k1 = {x: 1};
    var k2 = {y: 2};

    map.set(k1, 'k1');
    weakmap.set(k2, 'k2');
})()

map.forEach((val, key) => console.log(key, val))
// Weakmap. forEach(...) ERROR!

在运行完IIFE函数后，我们是否还需要在map里保存k1的对象呢？

答案应该是“不保存”：k1和k2的作用域在IIFE内，之后我们将无法获取这两个引用，再驻留map里只会产生副作用。但是IIFE之后，当遍历map时——map.forEach(...)，我们依旧能找到{x: 1}，而且除了调用clear方法，我们甚至无法删除这个对象；垃圾回收机制更无法对{x: 1}起作用，久而久之便是内存溢出。

四 WeakSet

WeakSet 结构与 Set 类似，也是不重复的值的集合，只有三个方法，没有属性

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

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

let weak = new WeakSet();
weak.add(1);//Uncaught TypeError: Invalid value used in weakSet

1) 作用

正如它的名字 weak，它是对象的弱引用，垃圾回收机制不考虑，所以不会造成内存的泄露，同时是无法遍历的，因为你不知道什么时候对象的引用消失了，而且没有size属性，不知道长度

let weak = new WeakSet();
weak.add({});
weak.add([]);
var timeId = setInterval(() => {
    console.log(weak);
}, 1000);

参考

总结

Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现
JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制
JS内存管理 在内存敏感的场景下还是有一定用武之地的。虽然JS这类高级语言隐藏了很多内存管理的功能，但无论如何还是不能解决一些极端情况。这时候仍需开发人员自己注意一些内存细节。ECMAScript提出 WeakMap（还有一个 WeakSet ）的概念，终于给了开发人员一种主动解决内存回收的方式。
WeakMap的方法也特别少，只有四个[增删改查]：delete、get、has、set。

[ES6] 数据结构 Map | Set | WeakMap | WeakSet

目录