Map 和 Object 的选择

ES6 前，js 中 key-value 键值对储存可以使用 Object 来高效的完成，使用对象属性作为键，再使用属性来引用值，ES6 新增了 map 集合类型，这是真正的键/值对储存机制。

基本 API

创建 map 映射实例及其属性方法

const m1 = new Map();

const map = new Map([
  ["k1", "v1"],
  ["k2", "v2"],
]);

// 获取 Map 实例的 size
log(map.size);

// map.has(key); 判断 map 是否拥有某个 key, 返回 boolean
log(map.has("k1")); // log: true
log(map.has("nokey")); // log: false
log(map.has(undefined)); // log: false

// map.get(key); 获取 map 某个 key 对应的值 , 返回 string or undefined
log(map.get("k1")); // log: v1

// map.set(key,value); 设置 map 的 key 对应的 值为 value
map.set("k3", "v3");
log(map.get("k3")); // log: v3

// map.keys() 获取 map 的所有键, 返回 可迭代的 IterableIterator<K>
log(map.keys()); // log: [Map Iterator] { 'k1', 'k2', 'k3' }

// map.values() 或 map 的所有值, 返回可迭代对象: IterableIterator<V>
log(map.values()); // log: [Map Iterator] { 'v1', 'v2', 'v3' }

// map.entries(), 返回 可迭代键值对 IterableIterator<[K, V]>
log(map.entries()); // log: [Map Entries] { [ 'k1', 'v1' ], [ 'k2', 'v2' ], [ 'k3', 'v3' ] }

// map.delete(key); 删除 key
map.delete("k3");

// map.clear() 清空 map 实例
map.clear();
log(map); // log: Map(0) {}

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

log(m3); // log: Map(3) { 'k1' => 'v1', 'k2' => 'v2', 'k3' => 'v3' }

修改 Map 实例的 对象key 对应value

const m = new Map();
const objKey = {},
  objVal = {},
  arrKey = [],
  arrVal = [];

m.set(objKey, objVal);
m.set(arrKey, arrVal);

log(m); // log; Map(2) { {} => {}, [] => [] }
log(m.get(objKey)); // log: {}

objKey.foo = "fooKey";
objVal.foo = "objVal";

arrKey.push("item1");
arrVal.push("itemVal");

log(m);
log(m.get(objKey)); // log: { foo: 'objVal' }

Map 实力的扩展操作符出发

const m = new Map([
  ["k1", "v1"],
  ["k2", "v2"],
  ["k3", "v3"],
]);

// 重写迭代默认的行为，扩展运算符的时候会触发
m[Symbol.iterator] = function* () {
  const entries = m.entries(); // entries 等于 [Map Entries] { [ 'k1', 'v1' ], [ 'k2', 'v2' ], [ 'k3', 'v3' ] }
  for (const [k, v] of entries) {
    yield `${k}===>${v}`;
  }
};

log(m); // log: Map(3) { 'k' => '1','k' => '2','k' => '3',[Symbol(Symbol.iterator)]: [GeneratorFunction (anonymous)] }
log(...m); // log: k1===>v1 k2===>v2 k3===>v3
log(m.entries()); // log: [Map Entries] { [ 'k1', 'v1' ], [ 'k2', 'v2' ], [ 'k3', 'v3' ] }