ES6集合引用类型Map与WeakMap |8月更文挑战

2022-11-14 16:46:12 浏览数 (1)


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

代码语言:javascript复制
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 {ƒ => ƒ}

0 人点赞