Map是一种新的集合类型,为ECMAScript
语言带来了真正的键/值存储机制,Map的大多数特性都可以通过Obeject
类型实现,但二者之间还是存在一些细微的差异。
6.4.1.基本API
-
使用
new
关键字和Map构造函数可以创建一个空映射。 -
如果想在创建的同时初始化实例,可以给Map构造函数传入一个可迭代的对象,需要包含键/值对数组,可迭代对象中的每个键/值对数组,可迭代对象中的每个键/值都会按照迭代顺序插入到新映射实例中。
const m = new Map(); console.log(m); //Map {} // 使用嵌套数组初始化映射 const m1 = new Map([ ["key1", "value1"], ["key2", "value2"], ["key3", "value3"] ]); console.log(m1); // Map { 'key1' => 'value1', 'key2' => 'value2', 'key3' => 'value3' } console.log(m1.size); // 3 // 使用自定义迭代器初始化映射 const m2 = new Map({ [Symbol.iterator]: function* () { yield ["key1","val1"], yield ["key2","val2"], yield ["key3","val3"] } }) console.log(m2); // Map { 'key1' => 'val1', 'key2' => 'val2', 'key3' => 'val3' } console.log(m2.size); // 3 // 映射期待的键值对,无论是否提供 const m3 = new Map([[]]); console.log(m3.has(undefined)); // true console.log(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); // Map { 'firstName' => 'Matt', 'lastName' => 'Frisbie' } console.log(m.size); // 2 console.log(m.has("firstName")); // true console.log(m.get("firstName")); // Matt 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 mm = new Map().set("key1", "val1"); mm.set("key2", "val2").set("key3", "val3"); console.log(mm.size); // 3 console.log(mm); // Map { 'key1' => 'val1', 'key2' => 'val2', 'key3' => 'val3' }
-
与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").set(symbolKey, "symbolValue").set(objectKey, "objectValue"); console.log(m.get(functionKey)); // functionValue console.log(m.get(symbolKey)); // symbolValue console.log(m.get(objectKey)); // objectValue // SameValueZero比较意味着独立实例不冲突 console.log(m.get(function () {})); // undefined
-
在映射中,用作键和值的对象及其他集合类型,在自己的内容或属性被修改时仍然保持不变。
const m = new Map(); const objKey = {}, objVal = {}, arrKey = [], arrVal = []; m.set(objKey, objVal); m.set(arrKey, arrVal); console.log(m); // Map { {} => {}, [] => [] } objKey.foo = "foo"; objVal.bar = "bar"; arrKey.push("foo"); arrVal.push("bar"); console.log(m); // Map { { foo: 'foo' } => { bar: 'bar' }, [ 'foo' ] => [ 'bar' ] } console.log(m.get(objKey)); // { bar: 'bar' } console.log(m.get(arrKey)); // [ 'bar' ]
-
SameValueZero
比较也可能导致意想不到的冲突。const m = new Map(); const a = 0 / "", b = 0 / "", 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
6.4.2顺序与迭代
-
与Object类型的一个主要差异是:
Map
实例会维护健值对的插入顺序,因此可以根据插入顺序执行迭代操作。 -
映射实例可以提供一个迭代器(
iterator
),能以插入顺序生成[key,value]形式的数组,可以通过entries()
方法或者Symbol.iterator
属性(它引用entries()
)取得这个迭代器。 -
因为
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'] 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 for (let key of m.keys()) { console.log(key); } // key1 // key2 // key3 for (let key of m.values()) { console.log(key); } // val1 // val2 // val3
-
keys()和values()
分别返回插入顺序生成键和值的迭代器。 -
键和值在迭代器遍历时是可以修改的,但映射内部的引用则无法修改。
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", "vall"] ]); // 修改了作为键的对象的属性,但对象在映射内部仍然引用相同的值 for (let key of m.keys()) { key.id = "newKey"; console.log(key); // keyObj console.log(m.get(keyObj)); // undefined } console.log(keyObj); //{ id: 1 }
6.4.3 选择Object还是Map
对于web开发任务来说,选择Object还是Map只是个人偏好问题,但对于在乎内存和性能的开发者来说,对象和映射之间确实存在显著区别。
- 内存占用:给定固定大小的内存,Map可以比Object多存储50%的键值对。
- 插入性能:插入Map稍微快一点。
- 查找速度:Object更优。
- 删除性能:Map的delete()操作都比插入和查找更快。