【Map 和 WeakMap 的区别】

Map

1.传统对象结构

Map本质上是一个键值对的集合。和传统对象结构相比，传统对象只能用字符串作为键名，这在使用上造成了很大的限制。

const data = {}
//element为节点对象
const element = document.querySelector('.node')
console.log(element)  //输出div.node对象
console.log(element.toString())
//用点操作符不能有空格，所以采用中括号的形式给对象赋值
data[element] = 'objectData'
//输出objectData，说明在对象中存在[object HTMLDivElement]键名
console.log(data['[object HTMLDivElement]'])

上面带代码中，我们创建了一个对象并将一个节点对象作为它的键名，并进行了代码测试，首先验证了获取到的element节点为一个对象，再确定了经过toString方法转化后的结果，以这个值为键名成功的输出了value值objectData。

上面的代码证明了传统对象的键名会通过toString方法转化为字符串类型

注意：在我们访问对象成员的时，键名有空格时不能采用点访问，例如data.ab c 这是错误的。我们可以用data['ab c']的形式访问

2.Map结构

Map类似于对象，但是键名不限于字符串，可以说Object结构提供键值对应，Map提供值值对应，因此采用Map结构会优于传统对象。

const dataMap = new Map()
const element = document.querySelector('.node')
dataMap.set(element,'objectData')
console.log(dataMap.get(element))
console.log(dataMap)

上面的代码中我们获取值时直接传入了element对象，成功将对象作为键名，弥补了传统对象的不足。

3.Map的特点

Map默认情况下不包含任何键，所有键都是自己添加进去的。不同于Object原型链上有一写默认的键。
Map的键可以时任何类型数据，就连函数都可以。
Map的键值对个数可以轻易通过size属性获取，Object需要手动计算。
Map在频繁增删键值对的场景下性能比Object更好。

4.什么时候用Map

想要添加的键值名和Object上的默认键值名冲突，又不想改名，用Map。
需要String和Symbol以外的数据类型做键值时，用Map。
键值对很多，有时需要计算数量，用Map。
需要频繁地增删键值对时，用Map。

WeakMap

什么是WeakMap

WeakMap是ES6中新增的一种集合类型，叫做'弱映射'。它和Map是兄弟关系，与Map的区别在于这个弱字，API还是Map那套API

WeakMap的特性

1. WeakMap只能将对象作为键名

只接受对象作为键名(null除外)，不接受其它类型的值作为键名。

2.WeakMap的键名引用的对象是弱引用

首先我们需要知道什么是强引用什么是弱引用

强引用

const dataMap = new Map()
const element = document.querySelector('.node')
dataMap.set(element,'objectData')
console.log(dataMap.get(element))
console.log(dataMap)

上面的代码中e1和e2是两个对象，通过arr数组对这两个对象添加一些文字说明。但是这样就形成了arr对e1和e2的引用，而这种引用又是强引用。它的区别就体现在这。当我们不再需要这两个对象时，我们必须手动删除这个引用，接触arr对两个对象的引用关系，否则垃圾回收机制不会释放e1和e2占用的内存。因为arr仍然存在着对对象的引用。