ES6: Map, WeakMap, Set, WeakSet

[RachelRen]

最近在看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 不一样的地方。

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

WeakSet与Set的区别：

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

Set／WeakSet 的几个知识的总结

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

1. Set／ WeakSet／ 都是构造函数，使用new来创建相应的数据结构。

2. set可以接受数组，对象作为参数。而且向Set加入值的时候，不会发生类型转换的。这个类似于===,但是当加入NaN时，会发现两个NaN是相等的。

3. 遍历的方法： keys(), values(), entries(), forEach()

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

5. 扩展运算符

6. Set和Array的相互转换的方法

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

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

WeakSet

1. 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是会报错的。

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

Map

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

创建Map的几种方式：

1. 简单的对象
2. 数组，二维数组
3. 任何具有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的几个方法：

1. size set() get() has() delete() clear()

2. 遍历的方法keys() values() entries() forEach() , Map的遍历顺序是插入的顺序

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

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

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

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

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