彻底弄懂 ES6 中的 Map、Set、weakMap、weakSet

Set(集合)

  • Set 是什么?

    • 它是 ES6 新增的一种数据结构,类似于数组,但成员是唯一且无序的,没有重复的值。
    • 它是一个 构造函数,用来生成 Set 数据结构
  • 如何使用?

    // 直接添加元素
    const set = new Set([1,2,3,4,3,2,1])  // 1 2 3 4
    
    // 手动添加元素
    const s = new Set()
    [1, 2, 3, 4, 3, 2, 1].forEach(x => s.add(x))  // 1 2 3 4
    
  • 它的属性和方法有哪些?

    // constructor():构造函数
    
    // 集合的长度
    set.size
    
    // 添加元素,可以链式调用
    set.add(1).add(2)
    
    // 是否存在某元素
    set.has(1)    // true
    
    // 删除某元素
    set.delete(1) 
    
    // 删除所有元素
    set.clear()
    
    // 返回一个新的迭代对象,这个对象包含了所有值
    let k = set.keys()
    let v = set.values()
    k.next() // 打印出 {value: 1, done: false}
    v.next() // 打印出 {value: 1, done: false}
    
    // 遍历元素
    for (let i of s) {
        console.log(i)    // 1 2 3 4
    }
    set.forEach(item => {console.log(item)})
    
  • 集合可以用来做些什么?

    • 可以为数组去重并转化为数组

      const set = new Set([1, 2, 3, 2])
      // 方法一:
      const array = Array.from(set)
      // 方法二:
      const array2 = [...set]
      
    • Set 很容易实现交集(Intersect)、并集(Union)、差集(Difference)

      let set1 = new Set([1, 2, 3])
      let set2 = new Set([4, 3, 2])
      
      let intersect = new Set([...set1].filter(value => set2.has(value))) // 2 3
      let union = new Set([...set1, ...set2]) // 1 2 3 4
      let difference = new Set([...set1].filter(value => !set2.has(value))) // 1
      

WeakSet

  • 什么是 weakSet?

    • WeakSet 对象允许你将 弱引用对象 储存在一个集合中
  • 什么是弱引用?

    • 弱引用,即垃圾回收机制不考虑 WeakSet 对该对象的引用,如果没有其他的变量或属性引用这个对象值,则这个对象将会被垃圾回收掉(不考虑该对象还存在于 WeakSet 中),所以,WeakSet 对象里有多少个成员元素,取决于垃圾回收机制有没有运行,运行前后成员个数可能不一致,遍历结束之后,有的成员可能取不到了(被垃圾回收了)。
  • WeakSet 与 Set 的区别是什么?

    • WeakSet 只能储存对象引用,不能存放值,而 Set 对象都可以
    • WeakSet 对象中储存的对象值都是被弱引用的,WeakSet 对象是无法被遍历的(ES6 规定 WeakSet 不可遍历),也没有办法拿到它包含的所有元素
  • WeakSet 如何使用?

    let ws = new WeakSet([{name:'steve'},{age:20}])
    
  • 它的属性和方法有哪些?

    ws.constructor // 构造函数
    ws.add(value) // 在WeakSet 对象中添加一个元素value
    ws.has(value) // 判断 WeakSet 对象中是否包含value
    ws.delete(value) // 删除元素 value
    ws.clear() // 清空所有元素,注意该方法已废弃
    

Map(字典)

  • 集合 与 字典 的区别是什么?

    • 共同点:集合、字典 都是储存不重复的值
    • 不同点:集合 是以 [value, value, value]的形式储存元素,字典 是以[[key, value], [key, value], [key, value]] 的形式储存
  • 如何使用?

    const map = new Map([['name':'steve'],['age',20]])
    map.set('theone',{name:'steve'})
    map.set('thetwo',{name:'jobs'})
    map.set({name:'steve'},'hello')
    map.set({name:'jobs'},'world')
    
    map.get('theone') // {name:'steve'}
    // 如果读取一个未知的键,则返回undefined。
    map.get('name') // undefined
    // 只有对同一个对象的引用,才能获取到相应的值,比如你设置了:let o = {name:'jobs'},然后 map.get(o)
    map.get({name:'jobs'}) // undefined
    
    map.has('theone') // true
    map.delete('theone')  // true
    map.has('theone') // false
    
    // 转化为数组的方法
    let arr = [...map]    // [['theone',{name:'steve'}],['thetwo',{name:'jobs'}]...]
    
  • 任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构都可以当作 Map 构造函数的参数

    const set = new Set([
      ['foo', 1],
      ['bar', 2]
    ]);
    const m1 = new Map(set);
    m1.get('foo') // 1
    
    const m2 = new Map([['baz', 3],['name':'steve']]);
    m2.get('baz') // 3
    
  • 键的唯一性:

    • Map 的键实际上是跟内存地址绑定的,只要内存地址不一样,就视为两个键。这就解决了同名属性碰撞(clash)的问题,我们扩展别人的库的时候,如果使用对象作为键名,就不用担心自己的属性与原作者的属性同名。
    • 如果用基本类型来当作健,则只要两个值严格相等,Map 将其视为一个键,比如0-0就是一个键,布尔值true和字符串true则是两个不同的键。另外,虽然NaN不严格相等于自身,但 Map 将其视为同一个键。
  • map的属性和方法?

    map.constructor // 构造函数
    map.size // 返回字典中所包含的元素个数
    
    map.set(key, value) // 向字典中添加新元素
    map.get(key) // 通过键查找特定的数值并返回
    map.has(key) // 判断字典中是否存在键key
    map.delete(key) // 通过键 key 从字典中移除对应的数据
    map.clear() // 将这个字典中的所有元素删除
    
    map.Keys() // 将字典中包含的所有键名以迭代器形式返回
    map.values() // 将字典中包含的所有数值以迭代器形式返回
    map.entries() // 返回所有成员的迭代器
    map.forEach((item,key) => console.log(key,item)) // 遍历字典的所有成员
    

WeakMap

  • 什么是 WeakMap?

    • WeakMap 对象是一组键值对的集合,其中的键是弱引用对象,而值可以是任意
    • WeakMap 弱引用的只是键名,而不是键值。键值依然是正常引用。
  • 属性和方法

    wm.constructor // 构造函数
    wm.has(key) // 判断是否有 key 关联对象
    wm.get(key) // 返回key关联对象(没有则则返回 undefined)
    wm.set(key) // 设置一组key关联对象
    wm.delete(key) // 移除 key 的关联对象
    

总结

  • Set
    • 成员唯一、无序
    • [value, value],键值与键名是一致的(或者说只有键值,没有键名)
    • 可以遍历,方法有:add、delete、has、clear、keys、values、entries、forEach
  • WeakSet
    • 成员唯一、都是对象
    • 成员都是弱引用,可以被垃圾回收机制回收,可以用来保存DOM节点,不容易造成内存泄漏
    • 不能遍历,方法有 add、delete、has
  • Map
    • 本质上是键值对的集合,类似集合
    • 可以遍历,方法很多可以跟各种数据格式转换:set、get、has、delete、clear、keys、values、entries、forEach
  • WeakMap
    • 只接受对象作为键名(null除外),不接受其他类型的值作为键名
    • 键名是弱引用,键值可以是任意的,键名所指向的对象可以被垃圾回收,此时键名是无效的
    • 不能遍历,方法有get、set、has、delete
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容