JS中的Map
一、基本介绍
ECMAScript6以前,在JavaScript中实现“键/值”式存储可以使用Object来方便高效地完成,也就是使用对象属性作为键,再使用属性来引用值。但这种实现并非没有问题,为此TC39委员会专门为“键/值”存储定义了一个规范。
作为ES6的新增特性,Map是一种新的集合类型,为这门语言带来了真正的键/值存储机制。Map的大多特性都可以通过Object类型实现,但二者之间还是存在一些细微的差异。
二、基本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(undefiend)); //undefiend
初始化之后,可以使用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","Frisble"); 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可以使用JS数据类型作为键。Map内部使用SameValueZero比较操作(ES内部规范内部定义,语言中不能使用),基本上相当于使用严格对象相等的标准来检查键的匹配性。与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(objectKey)); //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
三、顺序与迭代
与Object类型的一个主要差异是,Map实例会维护键值对的插入顺序,因此可以根据插入顺序执行迭代操作。
映射实例可以提供一个迭代器,能以插入顺序生成[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()方法并传入回调,依次迭代每个键/值对。传入的回调接收可选的第二个参数,这个参数用于重写回调内部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 (let key of m.keys()){ alert(key) ; } //key1 //key2 //ket3 for (let key of m.values()){ alert(key) ; } //value1 //value2 //value3
键和值在迭代器遍历时是可以修改的,但映射内部的引用则无法修改。当然,这并不妨碍修改作为键或值的对象内部的属性,因为这样并不影响它们在映射
const m1=new Map([["key1","val1"]]); //作为键的字符串原始值是不能修改的 for (let key of m1.keys()){ key="newKey"; alert(key); // newKeyt alert(m1.get("key1")); //vall alert(m1.get("newKey")); //undefined } const keyObj={id:1}; const m=new Map([[keyObj,"vall"]]); //修改了作为键的对象的属性,但对象在映射内部仍然引用相同的值 for (let key of m.keys()) { key.id="newKey"; alert(key); //{id:"newKey"} alert(m.get(keyObj)); //val } alert(keyObj); //{id:"newKey"}