ES6的Map与weakMap

二者的区别

1.weakMap的键只能是对象引用，而map没有限制

看下面的例子：

复制代码

//demo1
let weakmap = new WeakMap()
weakmap.set({m:1},'b')
console.log(weakmap)  // WeakMap {}

// demo2
let weakmap_1 = new WeakMap([[{}, 2], [{}, 5]]); 
console.log(...weakmap_1) // Uncaught TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function
    at <anonymous>:1:9

2.weakmap不可遍历，for in不能遍历map和weakmap数据结构 ,for of 可以遍历map

复制代码

var map = new Map();   //空Map
var map = new Map([[1,2],[2,3]]); 
 // map = {1=>2, 2=>3}

// 不可遍历
for (const item in map){
  console.log(item) // undefined
}
// 可以遍历
for (const [key,value] of map){
    console.log(key: ${key}, value: ${value});
    //key: 1, value: 2
    //key: 2, value: 3
}

3.WeakMap的键名所指向的对象，不计入垃圾回收机制

WeakMap的设计目的在于，有时我们想在某个对象上面存放一些数据，但是这会形成对于这个对象的引用。请看下面的例子。

复制代码

const e1 = document.getElementById('foo');//dom节点
const e2 = document.getElementById('bar');
const arr = [
  [e1, 'foo 元素'],
  [e2, 'bar 元素'],
];

上面代码中，e1和e2是两个对象，我们通过arr数组对这两个对象添加一些文字说明。这就形成了arr对e1和e2的引用。
一旦不再需要这两个对象，我们就必须手动删除这个引用，否则垃圾回收机制就不会释放e1和e2占用的内存。

// 不需要 e1 和 e2 的时候

// 必须手动删除引用

复制代码

arr [0] = null;
arr [1] = null;

上面这样的写法显然很不方便。一旦忘了写，就会造成内存泄露。

WeakMap 就是为了解决这个问题而诞生的，它的键名所引用的对象都是弱引用，即垃圾回收机制不将该引用考虑在内。因此，只要所引用的对象的其他引用都被清除，垃圾回收机制就会释放该对象所占用的内存。也就是说，一旦不再需要，WeakMap 里面的键名对象和所对应的键值对会自动消失，不用手动删除引用。

基本上，如果你要往对象上添加数据，又不想干扰垃圾回收机制，就可以使用 WeakMap。

**应用场景1，**在网页的 DOM 元素上添加数据，就可以使用WeakMap结构。当该 DOM 元素被清除，其所对应的WeakMap记录就会自动被移除。

复制代码

const wm = new WeakMap();

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

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

再看下面这个：

复制代码

const wm = new WeakMap();
let myElement = document.getElementById('toolbarBox');
let myWeakmap = new WeakMap();

myWeakmap.set(myElement, {timesClicked: 0});

myElement.addEventListener('click', function() {
  let logoData = myWeakmap.get(myElement);
  logoData.timesClicked++;
}, false);

上面代码中，myElement是一个 DOM 节点，每当发生click事件，就更新一下状态。我们将这个状态作为键值放在 WeakMap 里，对应的键名就是myElement。一旦这个 DOM 节点删除，该状态就会自动消失，不存在内存泄漏风险。

**应用场景2，**WeakMap 的另一个用处是部署私有属性。

复制代码

const _counter = new WeakMap();
const _action = new WeakMap();

class Countdown {
  constructor(counter, action) {
    _counter.set(this, counter);
    _action.set(this, action);
  }
  dec() {
    let counter = _counter.get(this);
    if (counter < 1) return;
    counter--;
    _counter.set(this, counter);
    if (counter === 0) {
      _action.get(this)();
    }
  }
}

const c = new Countdown(2, () => console.log('DONE'));

c.dec()
c.dec()
// DONE

上面代码中，Countdown类的两个内部属性_counter和_action，是实例的弱引用，所以如果删除实例，它们也就随之消失，不会造成内存泄漏。