Map/Set，这两个数据结构以及Es6性能优化的总结-CSDN博客

最近在看js性能问题，然后看到了说WeakMap和WeakSet的出现是跟性能有关，然后才发现，原来自己并不是很懂这些属性。

先大致概括下自己在这次复习中学习到的知识：

弱引用

WeakMap和WeakSet的健名是弱引用，这个弱引用的意思就是：不计入引用计数

const ws = new WeakSet(); 
ws.add({'a':1}); //Object {'a': 1} 会正常被 GC 回收，引用计数不会加1
	
const obj = {'b': 1};
ws.add(obj);        // Object {'b': 1} 不会被正常 GC 回收，因为存在一个强引用
obj = undefined; 
复制代码

所以一个比较好的应用场景是，对DOM对象的引用，如:

const e1 = document.getElementById('foo');
const e2 = document.getElementById('bar');
const arr = [
  [e1, 'foo 元素'],
  [e2, 'bar 元素'],
];
复制代码

在这个例子中，对e1和e2，通过arr数组形成了引用，如果删除了这两个对象，但是因为arr还存在，所以内存中还是存在着对他们的引用，是不会被GC回收的，所占用的内存还在的。

所以可以用WeakMap来解决这个问题，

const wm = new WeakMap();

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

wm.set(element, 'some information');
wm.get(element) // "some information"

复制代码

这里将DOM节点作为节点作为健名存入实例中，然后添加一些附加信息作为健值，存放在WeakMap中，这里WeakMap对element是弱引用，不会被记入到垃圾回收机制中。

所以element节点对象的引用计数是1，不是2。所以当element对象消失时，他占用的内存就会被释放，WeakMap保存的健值对也会消失。

但是WeakMap弱引用的只是健名，而不是健值，健值依然是正常引用。

弱引用导致的不一样的地方

弱引用引起的和正常的Set 和 Map 不一样的地方。

WeakMap 没有遍历操作，即没有keys()， values(), entries(), 也没有size 属性。因为没有办法列出所有的健名，某个健名是不是存在是不可预测的，跟垃圾回收运行有关。
没有办法清空，不支持clear方法。所以WeakMap只有4歌方法：get()、set()、has()、delete()。

WeakSet与Set的区别：

WeakSet 不能遍历，因为弱引用的关系。

Set／WeakSet 的几个知识的总结

以前知识觉得set是一个不能重复的数组，但是set更多的应用场景是对象。

Set／ WeakSet／都是构造函数，使用new来创建相应的数据结构。
set可以接受数组，对象作为参数。而且向Set加入值的时候，不会发生类型转换的。这个类似于===,但是当加入NaN时，会发现两个NaN是相等的。
遍历的方法： keys(), values(), entries(), forEach()
Set的遍历顺序就是插入顺序.这个特性有时非常有用，比如使用 Set 保存一个回调函数列表，调用时就能保证按照添加顺序调用。
扩展运算符

Set和Array的相互转换的方法

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

复制代码

Set的方法： add(), delete(), has(), clear(), 属性： size

WeakSet

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(…)
复制代码

所以相当于如果以数组的形式加入到Set中，那么会去一层皮，如果数组项是简单数据类型，那么在WeakSet是会报错的。

WeakSet所属方法： add(), delete(), has()
WeakSet 没有遍历的方法

Map

Map和对象，在结构上看似是相似的，对视健值对的集合，但是对象只能以字符串作为健，当健名是对象时，他会自动转化为字符串类型。而Map的健名不限于字符串，各种类型都可以当作键。

创建Map的几种方式：

简单的对象
数组，二维数组
任何具有Iterator接口，每个成员都是一个双元素的数组的数据结构都可以当作Map构造函数的参数。

const m = new Map();
const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

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"


const set = new Set([
  ['foo', 1],
  ['bar', 2]
]);
const m1 = new Map(set);
m1.get('foo') // 1

const m2 = new Map([['baz', 3]]);
const m3 = new Map(m2);
m3.get('baz')

复制代码

当使用数组创建实例时，其实是以下的操作.但是如果数组项是2项以上，那么后面几项是忽略掉的。

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

const map = new Map();

items.forEach(
  ([key, value]) => map.set(key, value)
);
复制代码

Map的几个方法：

size set() get() has() delete() clear()
遍历的方法keys() values() entries() forEach(), Map的遍历顺序是插入的顺序

Map结构默认遍历接口是entries方法。

for (let [key, value] of map){
	console.log(key, value);
}
//"F" "no"
//"T" "yes"
复制代码

当Map与其他数据结构相互转换时，需要注意以下几点：

Map 转为JSON，当键名时字符串和键名有非字符串是不一样的。

Set 和 Map 数据结构 ES6 你可能不知道的事 - 进阶篇