JavaScript-集合引用类型（Map- ES6新特性）

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

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

一、基本 API

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

const m = new Map();

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

// 使用嵌套数组初始化映射
const m1 = new Map([ 
 ["key1", "val1"], 
 ["key2", "val2"], 
 ["key3", "val3"] 
]); 
console.log(m1.size); // 3

// 使用自定义迭代器初始化映射
const m2 = new Map({ 
 [Symbol.iterator]: function*() { 
 yield ["key1", "val1"]; 
 yield ["key2", "val2"]; 
 yield ["key3", "val3"]; 
 } 
}); 
console.log(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(); 
console.log(m.has("firstName")); // false 
console.log(m.get("firstName")); // undefined 
console.log(m.size); // 0

m.set("firstName", "Matt") 
 .set("lastName", "Frisbie");
console.log(m.has("firstName")); // true 
console.log(m.get("firstName")); // Matt 
console.log(m.size); // 2

m.delete("firstName"); // 只删除这一个键/值对
console.log(m.has("firstName")); // false 
console.log(m.has("lastName")); // true 
console.log(m.size); // 1

m.clear(); // 清除这个映射实例中的所有键/值对
console.log(m.has("firstName")); // false 
console.log(m.has("lastName")); // false 
console.log(m.size); // 0

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

const m = new Map().set("key1", "val1"); 

m.set("key2", "val2") 
 .set("key3", "val3"); 
 
console.log(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");

console.log(m.get(functionKey)); // functionValue 
console.log(m.get(symbolKey)); // symbolValue 
console.log(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;

console.log(a === b); // false 
console.log(pz === nz); // true

m.set(a, "foo"); 
m.set(pz, "bar");

console.log(m.get(b)); // foo 
console.log(m.get(nz)); // bar

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

二、顺序与迭代

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

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

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

console.log(m.entries === m[Symbol.iterator]); // true

for (let pair of m.entries()) { 
 console.log(pair); 
} 
// ["key1", "val1"]
// ["key2", "val2"]
// ["key3", "val3"] 

for (let pair of m[Symbol.iterator]()) { 
 console.log(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) => console.log(`${key} -> ${val}`)); 
// key1 -> val1 
// key2 -> val2 
// key3 -> val3

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

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

for (let key of m.keys()) { 
 console.log(key); 
} 
// key1 
// key2 
// key3

for (let key of m.values()) { 
 console.log(key); 
} 
// value1 
// value2 
// value3

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

const m1 = new Map([ 
 ["key1", "val1"] 
]);

// 作为键的字符串原始值是不能修改的
for (let key of m1.keys()) { 
 key = "newKey"; 
 console.log(key); // newKey 
 console.log(m1.get("key1")); // val1 
}

const keyObj = {id: 1};
const m = new Map([ 
 [keyObj, "val1"] 
]);

// 修改了作为键的对象的属性，但对象在映射内部仍然引用相同的值
for (let key of m.keys()) { 
 key.id = "newKey"; 
 console.log(key); // {id: "newKey"} 
 console.log(m.get(keyObj)); // val1 
} 
console.log(keyObj); // {id: "newKey"}

三、选择 Object 还是 Map

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

3.1 内存占用

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

3.2 插入性能

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

3.3 查找速度

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

3.4 删除性能

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