likes
comments
collection
share

快速理解ES6中Map/WeakMap;Set/WeakSet

作者站长头像
站长
· 阅读数 14

键/值的存储方式

在ES6以前使用的是object来方便高效的完成。而在ES6标准中新增了map与set。一种通过new操作符构造出来的新映射方法。

map对象的新映射方法。

//Map初始化方法 const p = new Map([ [key,value], [key,value], ])

Map的API:

set(kay,value):写入方法,键值的类型可以是任意类型

has(key):查询方法,是否存在这个键

get(key):获取这个键的映射内容(value值)

delete(key):删除这个键和键的映射

clear():清空Map对象的所有映射

keys():返回所有键的迭代器

values():返回一个所有映射值的迭代器

[Map Iterator] { 1, 'A', 'a', 'b', 'B' } [Map Iterator] { '1', 'b', 'b', 'b', 'b' }

迭代法: for(let item of p.entries()){ console.log(item)//[key,value] }

p.forEach((value,key,self)=>{//与数组不同,第二个参数是key值,第三个是整个map对象

})

存在的bug

使用具有强制隐式类型转换的值作为键时。会出现混乱,与类型判断的结果不符。 const map = new Map()

const a = 0/'', b = 0/'', pz = +0, nz = -0

  console.log(a===b);//false
  console.log(pz===nz);//true

  map.set(a,'nan')
  map.set(pz,'零')

  console.log(map.get(b));
  console.log(map.get(nz));

Map的优缺点

  1. 内存占用,内存占用给定固定大小的内存空间Map比Object可以多存储50%的键值对。

  2. 插入操作,在object与Map的插入消耗是差不多的,速度Map会更快。对于大量的插入操作,还是Map性能好。

  3. 删除操作delete()比object的删除性能更好。

缺点: 查找性能,在大多数浏览器中,object的对象存储时会进行内存优化。而Map就不可以。比如存储的是一段连续的数字。那么在object中的查找速度是比Map快的。

weakMap()弱映射

与Map的不同

  1. 键只能为Object,如果用原始类型的值,可以先把原始类型转化为包装类new String('str')
  2. 没有claer()方法,因为weakMap为弱键。键被设置为null,则这个映射将会被垃圾回收。或者外部又有引用这个键也会被回收掉。
  3. 不支持迭代。

set()

初始化set()集合 const s = new Set(['val1','val2','val3'])

Set对象的API方法(使用规则)

add():添加,可以添加任意类型

has():查找,返回布尔值是否存在

size:集合的大小长度

delete():删除元素,返回一个布尔值。

clear():清空集合把Set设置为空

values():返回一个数组,包含所有的元素。

[...s]: 可以解构这个Set集合

add()和delete()是幂等的,添加/删除多个相同的值,只会执行一次

Set迭代

for(let p of s.entries()){
  console.log(p);//['val1','val1']
}

返回一个数组包含两个元素都为键值为同一个元素。

s.forEach((val,valup )=> {
  console.log(val,valup);//
});

一次迭代每个值,第二个参数,这个参数用于重写回调内部this的值。

WeakSet()弱集合

与Set的不同

  1. 只能存储为Object,如果用原始类型的值,可以先把原始类型转化为包装类new String('str')
  2. 没有claer()方法,因为WeakSet为弱值。被设置为null,则这个映射将会被垃圾回收。或者外部又有引用这个值也会被回收掉。

const p = new WeakSet()

let container = {id:1}

p.add(container)
console.log(p.has(container));//true
function clear(){
    container = null
}
clear()
console.log(p.has(container));false
  1. 不支持迭代。没有values()。
转载自:https://juejin.cn/post/7175933354045341757
评论
请登录