theme: channing-cyan
Map
简介:
在ES6之前,在JavaScript中实现‘键’=>‘值’,也就是我们常说的键值对,是用Object来完成的。但这种实现方式在特殊场景下的有问题的,ES6又出了一个为Map的新集合类型,为这门语言带来正真的键值对存储机制。
使用Map
我们可以使用 new来创建
代码语言:javascript复制const myMap = new Map();
console.log(myMap); // Map(0) {}
如果需要在里面添加键值对的话可以使用 set() 方法
代码语言:javascript复制 myMap.set('name','jackson');
console.log(myMap); //Map(1) {"name" => "jackson"}
另外还可以使用get()和has()方法进行查询
代码语言:javascript复制 console.log(myMap.get("name")); //查询键or值的内容
console.log(myMap.has("name"));//查询是否存在
还可以通过size属性来获取映射中的键值对数量, 我们先再添加一个键值对,查询一下数量
代码语言:javascript复制 myMap.set("age",22);
console.log(myMap.size);//2
我们还可以通过delete()和clear()来进行删除
代码语言:javascript复制myMap.delete("name"); //删除一个键值对
myMap.clear();//删除全部
console.log(myMap,myMap.size);
Map与Object的差异
1. 内存占用
Object和Map的工程及实现在不同浏览器间存在很大的差异,如果给固定大小的内存,Map要比Object多存储50%的键值对。
2.查找速度
大型的Object和Map中查找键值对的性能差异较小,如果只包含少量的键值对,Object要比Map更块一些,在把Object当成数组使用的情况下(比如连续使用整数作为属性)浏览器引擎可以进行优化,这对Map操作是不可能的。
3.插入性能
向Object和Map中插入新的键值对消耗大致差不多,如果代码量涉及的比较多的话,Map的性能更好一些
4.删除属性
使用delete删除Object属性的性能在浏览器中一直饱受诟病,有一些人为了删除对象属性会把属性值设为null和undefined。而Map的delete操作要比插入和查询都快,如果涉及大量代码的话,Map肯定是最优选。
weakMap
什么是WeakMap
在 JavaScript 里,map API 可以通过使其四个 API 方法共用两个数组(一个存放键,一个存放值)来实现。给这种 map 设置值时会同时将键和值添加到这两个数组的末尾。从而使得键和值的索引在两个数组中相对应。当从该 map 取值的时候,需要遍历所有的键,然后使用索引从存储值的数组中检索出相应的值。
但这样的实现会有两个很大的缺点,首先赋值和搜索操作都是 O(n) 的时间复杂度( n 是键值对的个数),因为这两个操作都需要遍历全部整个数组来进行匹配。另外一个缺点是可能会导致内存泄漏,因为数组会一直引用着每个键和值。这种引用使得垃圾回收算法不能回收处理他们,即使没有其他任何引用存在了。
相比之下,原生的 WeakMap 持有的是每个键对象的“弱引用”,这意味着在没有其他引用存在时垃圾回收能正确进行。原生 WeakMap 的结构是特殊且有效的,其用于映射的 key 只有在其没有被回收时才是有效的。
正由于这样的弱引用,WeakMap
的 key 是不可枚举的 (没有方法能给出所有的 key)。如果key 是可枚举的话,其列表将会受垃圾回收机制的影响,从而得到不确定的结果。因此,如果你想要这种类型对象的 key 值的列表,你应该使用 [Map
]
基本上,如果你要往对象上添加数据,又不想干扰垃圾回收机制,就可以使用 WeakMap。
注意
WeakMap 的 key 只能是 Object
类型。 [原始数据类型] 是不能作为 key 的(比如 [Symbol
]。
const myWaekMap = new WeakMap();
myWaekMap.set('name','jackson')
console.log(myWaekMap)
执行以上代码就会报错,因为WeakMap的建只能是对象类型
如果变成object类型当作键存储就可以执行
代码语言:javascript复制 const myWaekMap = new WeakMap();
const arr = function (){
a = 1;
}
myWaekMap.set(arr,'存储a=1')
console.log(myWaekMap) // WeakMap {ƒ => "存储a=1"}
另外 WeakMap的值也可以是一个对象,但这样没有太大意义
代码语言:javascript复制 const myWaekMap = new WeakMap();
const arr = function (){
a = 1;
}
const bbb = function (){
b = 2;
}
myWaekMap.set(arr,bbb)
console.log(myWaekMap) //WeakMap {ƒ => ƒ}