JavaScript的Map和WeakMap

熟悉JavaScript的Map和WeakMap

Map

Map的键/值可以是任何类型

基本API

初始化映射：

//使用new关键字和Map构造函数进行初始化
const m1 = new Map();

//使用嵌套数组初始化映射
const m2 = new Map([
  ['k1', 'v1'],
  ['k2', 'v2'],
  ['k3', 'v3']
]);

// 使用自定义迭代器初始化
const m3 = new Map({
  [Symbol.iterator]:function*() {
    yield ['k1', 'v1'];
    yield ["k2", "v1"];
    yield ["k3", "v3"];
  }
})

Map的方法：set()、get()、has()、delete()、clear()

Map的属性:size

m2.set('k4', 'v4');
console.log(m2.has('k4'));//true
console.log(m2.get('k4'));//v4
m2.delete('k4');
console.log(m2.has("k4")); //false
console.log(m2.get("k4"));//undefined
m2.clear();
console.log(m2.has('k1'));//false

set()返回映射实例，于是我们可以链式调用set()：

m2.set('k4','v4')
	.set('k5','v5');

Map的键的相等比较

键的比较基于零值相等(SameValueZero)，它认为+0与-0、NaN与NaN是相等的，其他的所有键通过===来比较相等性。

m2.set(NaN, 1);
m2.set(NaN,2);
console.log(m2.get(NaN));//2

m2.set(-0, 3);
console.log(m2.get(+0));//3

Map和Object的比较

Object也可以用来完成映射的作用，那选Map还是Object呢？

从以下方面决策：

1. 内存占用：Object和Map在不同浏览器上的实现有差异，但是都会随着键值对增加占用内存线性增长，同时在给定相同的内存情况下，Map能比Object多存储50%的键值对。
2. 插入性能：Map的插入比Object稍微好一点儿。
3. 查找速度：如果代码涉及大量查找操作，那么选择Object会更好。
4. 删除性能：如果代码涉及大量删除操作，那么选择Map会更好。
5. 迭代：Map实现了迭代协议，Object没有。
6. size：Map的键值对数量可以通过size属性轻松获得，而Object只能手动计算。
7. 序列化和解析：Map没有序列化和解析支持。

可以实现Map的序列化和解析:How do you JSON.stringify an ES6 Map?

function replacer(key, value) {
if (value instanceof Map) {
 return {
   dataType: "Map",
   value: Array.from(value.entries()), // or with spread: value: [...value]
 };
}
return value;
}
function reviver(key, value) {
if (typeof value === "object" && value !== null) {
 if (value.dataType === "Map") {
   return new Map(value.value);
 }
}
return value;
}
const originalValue = new Map([["a", 1]]);
const str = JSON.stringify(originalValue, replacer);
const newValue = JSON.parse(str, reviver);
console.log(originalValue, newValue);

WeakMap

WeakMap称为弱映射。"弱"指的是内存回收机制对待WeakMap中键的方式。

基本API

弱映射的键只能是对象类型(Object或继承自Object)。值类型无限制。

方法和属性的名称和Map相同，除了没有clear()。

弱键

WeakMap中的键不是正式的引用，不会阻止垃圾回收。只要键存在，键值对就会存在于映射中。

const wm = new WeakMap();
wm.set({}, 'v1');

wm新建的键值对的键对象没有被引用，所以垃圾回收机制会回收它。

const wm = new WeakMap();
let obj = new Object();
wm.set(obj, 'v1');
console.log(wm.has(obj));//true
obj = null;
console.log(wm.has(obj));//false

不可迭代键

WeakMap没有提供迭代键值对的功能，也没有必要，是为了保证只有通过键对象的引用才能取得值。

弱映射的实际使用

私有变量

以对象实例为键，以私有成员的字典为值。

const wm = new WeakMap();
class User{
  constructor(id) {
    this.userId = Symbol('id');
    this.setId(id);
  }
  setId(id) {
    const privateMembers = wm.get(this) || {};
    privateMembers[this.userId] = id;
    wm.set(this, privateMembers);
  }
  getId() {
    return wm.get(this)[this.userId];
  }
}
const user = new User(1);
console.log(user.getId());//1
user.setId(2);
console.log(user.getId());//2

上面的变量userId并非真正私有，通过弱映射vm可以获取：

console.log(wm.get(user)[user.userId]);//2

我们可以把弱映射和类放在一个闭包里：

const User = (() => {
  const wm = new WeakMap();
  class User {
    constructor(id) {
      this.userId = Symbol("id");
      this.setId(id);
    }
    setId(id) {
      const privateMembers = wm.get(this) || {};
      privateMembers[this.userId] = id;
      wm.set(this, privateMembers);
    }
    getId() {
      return wm.get(this)[this.userId];
    }
  }
  return User;
})();
const user = new User(1);
console.log(user.getId());//1
user.setId(2);
console.log(user.getId());//2