理解ES6中Set、Map、WeakSet、WeakMap的区别

96 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第25天,点击查看活动详情

Set、Map、WeakSet 和 WeakMap 这四种经常会出现在一起进行对比,使用频率越来越高

set 集合

Set 是 ES6 的新增语法,生成的 Set 是一个对象,它允许存储任何类型(原始值或者是对象引用都可以)

let mgSet = new Set([1,1,1,2,2,2,3,3,3])
console.log(mgSet)

运行结果: image.png

它有一个众所周知的功能——去重

  • 如果是普通数据类型,值相同只保留一个
  • 如果是引用数据类型,地址相同只会存一个
  • 基于这个特点,还可以利用 Set 进行求交集、并集、差集操作
var arr=[1,,1,1,2,2,2,3,3,3]
var arr2=[...new Set(arr)] // [1,2,3]

方法

  • add():新增元素
  • delete():删除集合中的某个值
  • has():判断集合中是否存在某个值
  • clear():清空
  • size():返回元素的个数

WeakSet

WeakSet 用来存储弱引用对象,它只能储存对象的引用,不能存放值

  • 弱引用是指:垃圾回收机制不考虑 WeakSet 对该对象的应用(如果没有其它的变量或属性引用这个对象值,对象将会被回收)
  • WeakSet 对象没有 size 属性,所以无法被遍历,无法获取 WeakSet 集合中的所有元素(不能使用 keys()、values()、entries() 这些方法)

方法

  • add()
  • delete()
  • has()

map

集合 Set、字典 Map 都可以储存不重复的值, Map 是以 [value, value] 的形式储存元素。

  • 键不可重复,有重复会被覆盖
const myMap = new Map()
const attr1 = { msg: 'haha'}
myMap.set(attr1, 'content')
myMap.set('2', '2')
console.log(myMap)

image.png

方法

  • set(key, value):添加元素
  • get(key):查找某个值并返回
  • has(key):判断字典中是否存在键key
  • delete(key):删除某个数据
  • clear():清空

WeakSet

WeakMap 的键是弱引用对象,值可以是任意的,与 WeakSet 类似的是:不支持对键和值进行迭代,所以无法获取 WeakMap 的所有键或值,并且也无法清除 WeakMap