Map 和 WeakMap 的理解

1.es5的对象key只能是字符串和Symbol，如果是对象的话会toString()

const obj1 = {name: 'lin'}
const obj2 = {name: 'zhen'}
//变量作为key要加上[]
const obj3 = {
    [obj1]: '11',
    [obj2]: '22',
}
console.log(obj3) // { [object Object]: '22' }

let obj = {}
let id = Symbol('123')
obj[id] = '123'
console.log(obj) // {Symbol(123): "123“}

用Map来解决上面的问题

2.Map的键可以为任意类型值

const obj3 = new Map()
obj3.set(obj1,'11').set(obj2,'22')
console.log(obj3.get(obj1)) //11
console.log(obj3.get(obj2)) //22

3.WeakMap的键只能为对象

WeakMap的作用是为了垃圾回收

let a = {x: 12}
let b = {y: 13}

let map = new Map()
let weakMap = new WeakMap()
map.set(a, '14')
weakMap.set(b, '15')

a = null;
b = null;

当a,b都设置null都被回收了，因为weakMap是弱引用，所以weakMap的键值也会被回收（这里的意思是键和值都回收）

列如元素时间绑定处理处理函数，用weakMap，当元素被移除后，事件处理函数也会被回收

const oBtn = document.querySelector('#btn')
const oBtnMap = new WeakMap()
oBtnMap.set(oBtn,handleBtnClick)//键值对
oBtn.addEventListener('click',oBtn.get(oBtn),false)
function handleBtnClick(){...}
oBtn.remove() //健名给回收，事件绑定函数也会回收