学习笔记18—Map

在ECMAScript6以前，在JavaScript中实现”键/值“式存储可以使用Object来方便高效地完成，也就是使用对象属性作为键，在使用属性来引用值。
作为ECMAScript新增特性，Map是一种新的集合类型，为这门语言带来了真正的键/值存储机制。Map的大多数特性都可以通过Object类型实现，但二者之间还是存在一些细微的差异，具体实践中使用哪个，还是值得细细甄别。

1 基本API

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

const m = new Map();

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

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

初始化之后，可以使用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.gas("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比较操作，基本上相当于使用严格对象相等的标准来检查键的匹配性。

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

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"]

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

const m = new Map();

const a = 0/"",
	  b = 0/"",
	  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

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);
}

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

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

console.log([...m]);[[key1,val1],[key2,val2],[key3,val3]]

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

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"}

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。