6.4 Map

ECMAScript 6以前，在JavaScript中实现“键/值”式存储可以使用Object来方便高效地完成，也就是使用对象属性作为键，再使用属性来引用值。但这种实现并非没有问题，为此TC39委员会专门为“键/值”存储定义了一个规范。

作为ECMAScript 6的新增特性，Map是一种新的集合类型，为这门语言带来了真正的键/值存储机制。Map的大多数特性都可以通过Object类型实现，但二者之间还是存在一些细微的差异。具体实践中使用哪一个，还是值得细细甄别。

6.4.1 基本API

使用new关键字和Map构造函数可以创建一个空映射：

    const m = new Map();

如果想在创建的同时初始化实例，可以给Map构造函数传入一个可迭代对象，需要包含键/值对数组。可迭代对象中的每个键/值对都会按照迭代顺序插入到新映射实例中：

    // 使用嵌套数组初始化映射
    const m1 = new Map([
      ["key1", "val1"],
      ["key2", "val2"],
      ["key3", "val3"]
    ]);
    alert(m1.size); // 3
    // 使用自定义迭代器初始化映射
    const m2 = new Map({
      [Symbol.iterator]: function＊() {
        yield ["key1", "val1"];
        yield ["key2", "val2"];
        yield ["key3", "val3"];
      }
    });
    alert(m2.size); // 3
    // 映射期待的键/值对，无论是否提供
    const m3 = new Map([[]]);
    alert(m3.has(undefined));   // true
    alert(m3.get(undefined));   // undefined

初始化之后，可以使用set()方法再添加键/值对。另外，可以使用get()和has()进行查询，可以通过size属性获取映射中的键/值对的数量，还可以使用delete()和clear()删除值。

    const m = new Map();
    alert(m.has("firstName"));   // false
    alert(m.get("firstName"));   // undefined
    alert(m.size);                  // 0
    m.set("firstName", "Matt")
      .set("lastName", "Frisbie");
    alert(m.has("firstName")); // true
    alert(m.get("firstName")); // Matt
    alert(m.size);                // 2
    m.delete("firstName");      // 只删除这一个键/值对
    alert(m.has("firstName")); // false
    alert(m.has("lastName"));   // true
    alert(m.size);                // 1
    m.clear(); // 清除这个映射实例中的所有键/值对
    alert(m.has("firstName")); // false
    alert(m.has("lastName"));   // false
    alert(m.size);                // 0

set()方法返回映射实例，因此可以把多个操作连缀起来，包括初始化声明：

    const m = new Map().set("key1", "val1");
    m.set("key2", "val2")
      .set("key3", "val3");
    alert(m.size); // 3

与Object只能使用数值、字符串或符号作为键不同，Map可以使用任何JavaScript数据类型作为键。Map内部使用SameValueZero比较操作（ECMAScript规范内部定义，语言中不能使用），基本上相当于使用严格对象相等的标准来检查键的匹配性。与Object类似，映射的值是没有限制的。

    const m = new Map();
    const functionKey = function() {};
    const symbolKey = Symbol();
    const objectKey = new Object();
    m.set(functionKey, "functionValue");
    m.set(symbolKey, "symbolValue");
    m.set(objectKey, "objectValue");
    alert(m.get(functionKey));   // functionValue
    alert(m.get(symbolKey));     // symbolValue
    alert(m.get(objectKey));     // objectValue
    // SameValueZero比较意味着独立实例不冲突
    alert(m.get(function() {})); // undefined

与严格相等一样，在映射中用作键和值的对象及其他“集合”类型，在自己的内容或属性被修改时仍然保持不变：

    const m = new Map();
    const objKey = {},
          objVal = {},
          arrKey = [],
          arrVal = [];
    m.set(objKey, objVal);
    m.set(arrKey, arrVal);
    objKey.foo = "foo";
    objVal.bar = "bar";
    arrKey.push("foo");
    arrVal.push("bar");
    console.log(m.get(objKey)); // {bar: "bar"}
    console.log(m.get(arrKey)); // ["bar"]

SameValueZero比较也可能导致意想不到的冲突：

    const m = new Map();
    const a = 0/"", // NaN
          b = 0/"", // NaN
          pz = +0,
          nz = -0;
    alert(a === b);    // false
    alert(pz === nz); // true
    m.set(a, "foo");
    m.set(pz, "bar");
    alert(m.get(b));   // foo
    alert(m.get(nz)); // bar

注意 SameValueZero是ECMAScript规范新增的相等性比较算法。关于ECMAScript的相等性比较，可以参考MDN文档中的文章“Equality Comparisons and Sameness”。

6.4.2 顺序与迭代

与Object类型的一个主要差异是，Map实例会维护键值对的插入顺序，因此可以根据插入顺序执行迭代操作。

映射实例可以提供一个迭代器（Iterator），能以插入顺序生成[key, value]形式的数组。可以通过entries()方法（或者Symbol.iterator属性，它引用entries()）取得这个迭代器：

    const m = new Map([
      ["key1", "val1"],
      ["key2", "val2"],
      ["key3", "val3"]
    ]);
    alert(m.entries === m[Symbol.iterator]); // true
    for (let pair of m.entries()) {
      alert(pair);
    }
    // [key1, val1]
    // [key2, val2]
    // [key3, val3]
    for (let pair of m[Symbol.iterator]()) {
      alert(pair);
    }
    // [key1, val1]
    // [key2, val2]
    // [key3, val3]

因为entries()是默认迭代器，所以可以直接对映射实例使用扩展操作，把映射转换为数组：

    const m = new Map([
      ["key1", "val1"],
      ["key2", "val2"],
      ["key3", "val3"]
    ]);
    console.log([...m]); // [[key1, val1], [key2, val2], [key3, val3]]

如果不使用迭代器，而是使用回调方式，则可以调用映射的forEach(callback, opt_thisArg)方法并传入回调，依次迭代每个键/值对。传入的回调接收可选的第二个参数，这个参数用于重写回调内部this的值：

    const m = new Map([
      ["key1", "val1"],
      ["key2", "val2"],
      ["key3", "val3"]
    ]);
    m.forEach((val, key) => alert(`${key} -> ${val}`));
    // key1-> val1
    // key2-> val2
    // key3-> val3

keys()和values()分别返回以插入顺序生成键和值的迭代器：

    const m = new Map([
      ["key1", "val1"],
      ["key2", "val2"],
      ["key3", "val3"]
    ]);
    for (letkeyofm.keys()) {
      alert(key);
    }
    // key1
    // key2
    // key3
    for (letkeyofm.values()) {
      alert(key);
    }
    // value1
    // value2
    // value3

键和值在迭代器遍历时是可以修改的，但映射内部的引用则无法修改。当然，这并不妨碍修改作为键或值的对象内部的属性，因为这样并不影响它们在映射实例中的身份：

    const m1 = new Map([
      ["key1", "val1"]
    ]);
    // 作为键的字符串原始值是不能修改的
    for (let key of m1.keys()) {
      key = "newKey";
      alert(key);                // newKey
      alert(m1.get("key1"));   // val1
    }
    const keyObj = {id: 1};
    const m = new Map([
      [keyObj, "val1"]
    ]);
    // 修改了作为键的对象的属性，但对象在映射内部仍然引用相同的值
    for (let key of m.keys()) {
      key.id = "newKey";
      alert(key);               // {id: "newKey"}
      alert(m.get(keyObj));   // val1
    }
    alert(keyObj);              // {id: "newKey"}

6.4.3 选择Object还是Map

对于多数Web开发任务来说，选择Object还是Map只是个人偏好问题，影响不大。不过，对于在乎内存和性能的开发者来说，对象和映射之间确实存在显著的差别。

1．内存占用

Object和Map的工程级实现在不同浏览器间存在明显差异，但存储单个键/值对所占用的内存数量都会随键的数量线性增加。批量添加或删除键/值对则取决于各浏览器对该类型内存分配的工程实现。不同浏览器的情况不同，但给定固定大小的内存，Map大约可以比Object多存储50%的键/值对。

2．插入性能

向Object和Map中插入新键/值对的消耗大致相当，不过插入Map在所有浏览器中一般会稍微快一点儿。对这两个类型来说，插入速度并不会随着键/值对数量而线性增加。如果代码涉及大量插入操作，那么显然Map的性能更佳。

3．查找速度

与插入不同，从大型Object和Map中查找键/值对的性能差异极小，但如果只包含少量键/值对，则Object有时候速度更快。在把Object当成数组使用的情况下（比如使用连续整数作为属性），浏览器引擎可以进行优化，在内存中使用更高效的布局。这对Map来说是不可能的。对这两个类型而言，查找速度不会随着键/值对数量增加而线性增加。如果代码涉及大量查找操作，那么某些情况下可能选择Object更好一些。

4．删除性能

使用delete删除Object属性的性能一直以来饱受诟病，目前在很多浏览器中仍然如此。为此，出现了一些伪删除对象属性的操作，包括把属性值设置为undefined或null。但很多时候，这都是一种讨厌的或不适宜的折中。而对大多数浏览器引擎来说，Map的delete()操作都比插入和查找更快。如果代码涉及大量删除操作，那么毫无疑问应该选择Map。