ES6的Set、WeakSet、Map、WeakMap

一、总体介绍下Set、WeakSet、Map、WeakMap的区别

Set：对象允许存储任何类型的唯一值，无论是原始值或者是对象引用

WeakSet：成员都是对象，成员都是弱引用，可以被垃圾回收机制回收，可以用来保存DOM节点，不容易造成内存泄漏

Map：键值对的集合，类似集合；可以遍历，有很多方法，可以跟各种数据格式转换

WeakMap：只接受对象为键名（null）除外，不接受其他类型的值作为键名；键名是弱引用，键值可以任意；键名所指向的对象可以被垃圾回收机制回收，此时键名无效，不能遍历。

二、Set

（1）Set介绍

Set自身是一个构造函数，用来生成Set数据结构。Set函数可以接受一个数组/具有iterable接口的数据结构作为参数，用来初始化。Set可以存储类型任何的值，无论是原始值或者是对象引用。类数组，成员唯一不重复。new关键字实例化。

（2）Set特殊值

Set对象存储唯一，首先要判断两个值是否恒等于

①+0和-0存储判断唯一性恒等，不重复

②undefined和undefined恒等，不重复

③NaN和NaN不恒等，但在Set中认为相等，不重复

（3）Set属性

size：返回元素包含元素的数量

    const item = new Set([1, 2, 3, 4, 5, 5, 5, 5, 5])
    console.log(item.size)

在这里插入图片描述

（4）Set操作方法

add(value)：添加某个值，返回Set结构本身。
delete(value)：删除某个值，删除成功返回true不成功返回false
has(value)：返回布尔值，表示该值是否是Set成员，是返回true否返回false
clear()：清除成员，没有返回值

    const s = new Set()
    s.add(1).add(2).add(2) //链式调用

    console.log(s.size)//2
    console.log(s.has(1)) //true
    console.log(s.has(2))//true
    console.log(s.has(3))//false

    console.log(s.delete(2))//true
    console.log(s.has(2))//false

在这里插入图片描述

（5）Set遍历方法

keys()：遍历键名
values()：遍历键值
entries()：返回键值对
forEach()：回调函数遍历成员

Set没有键名只有键值，换句话说键名和键值同一个值，所以keys()和values()方法行为一致

//keys()：遍历键名
    const set = new Set(['red', 'green', 'yellow'])

    for (let item of set.keys()) {
    
    
        console.log(item)
    }
//red
//green
//yellow

在这里插入图片描述

//values()：遍历键值
    const set = new Set(['red', 'green', 'yellow'])

    for (let item of set.values()) {
    
    
        console.log(item)
    }
//red
//green
//yellow

在这里插入图片描述

//entries()：返回键值对
    const set = new Set(['red', 'green', 'yellow'])

    for (let item of set.entries()) {
    
    
        console.log(item)
    }

在这里插入图片描述

（6）Set应用

①数组去重

②Array.from方法可以将Set转化为数组

③实现并集（Union）和交集（Intersect）和差集（difference）

（7）Set类数组的数据结构和数组Array对比

①Set的值唯一不重复，Array可以重复。

②Set有delete的方法删除某个值，但是Array用splice实现删除，前者更优化；Set的has方法与Array的idexOf方法相似，前者更优

③两者可以互相转换来实现对方的方法，Set转数组用数组的方法，比如map、filter等

三、Map

（1）Map介绍

Map存储键值对key—value，key和value可以任意类型，对象也可以作为key。Map是值-值的映射

（2）Map属性

size：返回元素包含元素的数量

    const map = new Map()
    map.set('aaa', true)
    map.set('bbb', false)
    console.log(map.size)

在这里插入图片描述

（3）Map操作方法

set(key,value)：Map添加新元素
get(key)：键值查找特定的数值并返回
has(key)：判断Map中是否有key所对应的值，有返回true，否则返回false
delete(key)：删除键值中对应的数据
clear()：清除Map中所有的元素

    const m = new Map()
    const a = {
    
    
        b: 'hello world'
    }
    m.set(a, 'say hello')

    console.log(m.get(a))

    console.log(m.has(a))
    console.log(m.delete(a))
    console.log(m.has(a))

在这里插入图片描述

（4）Map遍历方法

keys()：键名遍历
values()：键值遍历
entries()：键值对遍历
forEach()：遍历回调函数每个成员

//keys()：键名遍历
    const map = new Map([
        ['a', 1],
        ['b', 2],
        ['c', 3]
    ])
    for (let key of map.keys()) {
    
    
        console.log(key)
    }

在这里插入图片描述

//keys()：键名遍历
    const map = new Map([
        ['a', 1],
        ['b', 2],
        ['c', 3]
    ])
    for (let value of map.values()) {
    
    
        console.log(value)
    }

在这里插入图片描述

//entries()：键值对遍历
    const map = new Map([
        ['a', 1],
        ['b', 2],
        ['c', 3]
    ])
    for (let items of map.entries()) {
    
    
        console.log(items)
    }

在这里插入图片描述

（5）Map应用

前端数据的Map映射，减少代码量，代码简洁

（6）Map与Object对比c

①Map可以是任何类型的值，但是Object对象只能是Symbol和String作为key

②Map的size方法可以获取Map长度，Object没有自带的方法，只能手写方法实现长度计算

四、WeakSet

（1）WeakSet介绍

WeakSet 对象允许你将弱引用对象储存在一个集合中

WeakSet结构与Set相似，也是不重合的值的集合

（2）WeakSet弱引用

垃圾回收机制有一套自己的算法。函数执行完之后该函数在调用栈中创建的执行上下文会被销毁。销毁内存空间被回收，执行上下文环境变量，词法变量中的数据存储。

（3）WeakSet的方法

WeakSet.prototype.add(value) ：向 WeakSet 实例添加一个新成员
WeakSet.prototype.delete(value) ：清除WeakSet 一个成员
WeakSet.prototype.has(value) ：判断WeakSet 是否存在某个成员，返回布尔值，存在true，不存在false

    const ws = new WeakSet()
    let aobj = {
    
    }
    let bobj = {
    
    }

    ws.add(window)
    ws.add(aobj)

    console.log(ws.has(window))
    console.log(ws.has(bobj))

    console.log(ws.delete(window))
    console.log(ws.has(window))

在这里插入图片描述

（4）WeakSet和Set区别

①Set可以存储任何类型的值，WeakSet只能存储对象引用

    const s = new Set()
    s.add(1)
    s.add('a')

    const ws = new WeakSet()
    ws.add(1)//Uncaught TypeError:Invalid value used in weak set
    ws.add('a')//Uncaught TypeError:Invalid value used in weak set

在这里插入图片描述

    const s = new Set()
    s.add(1)
    s.add('a')

    const ws = new WeakSet()
    ws.add({
    
    
        name: 'gaby'
    })

②WeakSet中对象都是弱引用，垃圾回收机制不考虑WeakSet对该对象的引用。如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象是否存在于WeakSet中。

    let obj = {
    
    
        name: 'gaby'
    }
    let myName = obj.name
    obj = null
    console.log(myName)

在这里插入图片描述

解析：不适用WeakSet存储数据，当对象设置为null不再被引用的时候，仍然可以打印出值。

    let obj = {
    
    
        name: 'gaby'
    }
    let ws = new WeakSet()
    ws.add(obj)
    obj = null
    console.log(ws)

在这里插入图片描述

解析：当WeakSet对象不再被引用，WeakSet为空，WeakSet数据存储的空间被释放。

总结

WeakSet成员对象元素取决于垃圾回收机制有没有回收运行，可能存在运行前后成员不一致的情况。对于WeakSetES6规定无法遍历，也就无法验证它的包含的对象成员元素。

（5）属性：constructor

constructor构造函数，任何一个具有 Iterable 接口的对象，都可以作参数

    const arr = [
        [1, 2],
        [3, 4],
        [5, 6]
    ]
    const ws = new WeakSet(arr)
    console.log(ws)

在这里插入图片描述

五、WeakMap

（1）WeakMap介绍

WeakMap是一对键值对的集合，值可以任意类型，键是弱引用对象。

！只是键名是弱引用，键值是正常引用。

（2）属性：constructor

（3）WeakMap的方法

has(key)：判断是否有 key 关联对象
get(key)：返回key关联对象（没有则则返回 undefined）
set(key)：设置一组key关联对象
delete(key)：删除一组key关联对象

六、总结

Set
- 成员唯一、无序不重复
- [key,value]键值和键名是一致
- 可以遍历，有add/delete/has方法
WeakSet
- 成员是对象
- 成员都是弱引用，可以被垃圾回收机制回收。用来保存才能DOM节点，不容易造成内存泄漏
Map
- 键值对的集合
- 可以跟各种数据格式转换，可以遍历
WeakMap
- 只接受对象作为（null除外）键名
- 键名弱引用，指向的对象可以被垃圾回收机制回收，键名无效。键值可以任意。
- 不能遍历，有has/set/get/delete方法