• ES6中的Set集合与Map映射


    一、Set集合

    1.Set的基本使用

    在ES6之前,我们存储数据的结构主要有两种:数组、对象。

    在ES6中新增了另外两种数据结构:SetMap,以及它们的另外形式WeakSetWeakMap

    Set是一个新增的数据结构,可以用来保存数据,类似于数组,但是和数组的区别是元素不能重复

    创建Set我们需要通过Set构造函数(暂时没有字面量创建的方式):

    const s1 = new Set()
    const arr = [3, 45, 3]
    const s2 = new Set(arr)
    console.log(s2)// 3, 45
    
    • 1
    • 2
    • 3
    • 4

    我们可以发现Set中存放的元素是不会重复的,那么Set有一个非常常用的功能就是给数组去重

    const arr1 = [3, 4, 6]
    const s3 = new Set(arr1)
    const arr2 = [...s3]
    const srr3 = Array.from(s3)
    
    • 1
    • 2
    • 3
    • 4

    2.Set的常见方法

    Set常见的属性:

    • size:返回Set中元素的个数;

    Set常用的方法:

    • add(value):添加某个元素,返回Set对象本身;
    • delete(value):从set中删除和这个值相等的元素,返回boolean类型;
    • has(value):判断set中是否存在某个元素,返回boolean类型;
    • clear():清空set中所有的元素,没有返回值;
    • forEach(callback, [, thisArg]):通过forEach遍历set;

    另外Set是支持for-of的遍历的

    // 1.创建Set
    const set = new Set()
    console.log(set)
    
    // 2.添加元素
    set.add(10)
    set.add(22)
    set.add(35)
    set.add(22)
    console.log(set)
    
    const info = {}
    const obj = {name: "obj"}
    set.add(info)
    set.add(obj)
    set.add(obj)
    console.log(set)
    
    // 3.应用场景: 数组的去重
    const names = ["abc", "cba", "nba", "cba", "nba"]
    // const newNames = []
    // for (const item of names) {
    //   if (!newNames.includes(item)) {
    //     newNames.push(item)
    //   }
    // }
    // console.log(newNames)
    const newNamesSet = new Set(names)
    const newNames = Array.from(newNamesSet)
    console.log(newNames)
    
    // 4.Set的其他属性和方法
    // 属性
    console.log(set.size)
    // 方法
    // 4.1. add方法
    set.add(100)
    console.log(set)
    // 4.2. delete方法
    set.delete(obj)
    console.log(set)
    // 4.3. has方法
    console.log(set.has(info))
    // 4.4. clear方法
    // set.clear()
    // console.log(set)
    // 4.5. forEach
    set.forEach(item => console.log(item))
    
    // 5.set支持for...of
    for (const item of set) {
        console.log(item)
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53

    3.WeakSet使用

    和Set类似的另外一个数据结构称之为WeakSet,也是内部元素不能重复的数据结构。

    那么和Set有什么区别呢?

    • 区别一:WeakSet中只能存放对象类型,不能存放基本数据类型
    • 区别二:WeakSet对元素的引用是弱引用,如果没有其他引用对某个对象进行引用,那么GC可以对该对象进行回收;

    WeakSet常见的方法:

    • add(value):添加某个元素,返回WeakSet对象本身;
    • delete(value):从WeakSet中删除和这个值相等的元素,返回boolean类型;
    • has(value):判断WeakSet中是否存在某个元素,返回boolean类型;

    4.WeakSet的应用

    注意:WeakSet不能遍历

    • 因为WeakSet只是对对象的弱引用,如果我们遍历获取到其中的元素,那么有可能造成对象不能正常的销毁。

    • 所以存储到WeakSet中的对象是没办法获取的;

    那么这个东西有什么用呢?

    • 事实上这个问题并不好回答,我们来使用一个Stack Overflow上的答案;
    // 3.WeakSet的应用
    const pWeakSet = new WeakSet()
    class Person {
        constructor() {
            pWeakSet.add(this)
        }
    
        running() {
            if (!pWeakSet.has(this)) {
                console.log("Type error: 调用的方式不对")
                return
            }
            console.log("running~")
        }
    }
    
    let p = new Person()
    // p = null
    p.running()
    const runFn = p.running
    runFn()
    const obj = { run: runFn }
    obj.run()
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    二、Map映射

    1.Map的基本使用

    另外一个新增的数据结构是Map,用于存储映射关系

    但是我们可能会想,在之前我们可以使用对象来存储映射关系,他们有什么区别呢?

    事实上我们对象存储映射关系只能用字符串ES6新增了Symbol)作为属性名(key);

    某些情况下我们可能希望通过其他类型作为key,比如对象,这个时候会自动将对象转成字符串来作为key;

    那么我们就可以使用Map:

    const info = { name: "why" }
    const info2 = { age: 18 }
    
    // 1.对象类型的局限性: 不可以使用复杂类型作为key
    // const obj = {
    //   address: "北京市",
    //   [info]: "哈哈哈",
    //   [info2]: "呵呵呵"
    // }
    // console.log(obj)
    
    // 2.Map映射类型
    const map = new Map()
    map.set(info, "aaaa")
    map.set(info2, "bbbb")
    console.log(map)
    
    // 3.Map的常见属性和方法
    // console.log(map.size)
    // 3.1. set方法, 设置内容
    map.set(info, "cccc")
    console.log(map)
    // 3.2. get方法, 获取内容
    // console.log(map.get(info))
    // 3.3. delete方法, 删除内容
    // map.delete(info)
    // console.log(map)
    // 3.4. has方法, 判断内容
    // console.log(map.has(info2))
    // 3.5. clear方法, 清空内容
    // map.clear()
    // console.log(map)
    // 3.6. forEach方法
    // map.forEach(item => console.log(item))
    
    // 4.for...of遍历
    for (const item of map) {
        const [key, value] = item
        console.log(key, value)
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    2.Map的常见方法

    Map常见的属性:

    • size:返回Map中元素的个数;

    Map常见的方法:

    • set(key, value):在Map中添加key、value,并且返回整个Map对象;
    • get(key):根据key获取Map中的value;
    • has(key):判断是否包括某一个key,返回Boolean类型;
    • delete(key):根据key删除一个键值对,返回Boolean类型;
    • clear():清空所有的元素;
    • forEach(callback, [, thisArg]):通过forEach遍历Map;

    Map也可以通过for-of进行遍历。

    3.WeakMap使用

    和Map类型的另外一个数据结构称之为WeakMap,也是以键值对的形式存在的。

    那么和Map有什么区别呢?

    • 区别一:WeakMap的key只能使用对象,不接受其他的类型作为key;
    • 区别二:WeakMap的key对对象想的引用是弱引用,如果没有其他引用引用这个对象,那么GC可以回收该对象;

    WeakMap常见的方法有四个:

    • set(key, value):在Map中添加key、value,并且返回整个Map对象;
    • get(key):根据key获取Map中的value;
    • has(key):判断是否包括某一个key,返回Boolean类型;
    • delete(key):根据key删除一个键值对,返回Boolean类型;
    let obj1 = { name: "why" }
    let obj2 = { name: "kobe" }
    
    // 1.WeakMap的基本使用
    const weakMap = new WeakMap()
    // weakMap.set(123, "aaa")
    weakMap.set(obj1, "aaa")
    weakMap.set(obj2, "bbb")
    
    obj1 = null
    obj2 = null
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    4.WeakMap的应用

    注意:WeakMap也是不能遍历的

    • 没有forEach方法,也不支持通过for-of的方式进行遍历;

    那么我们的WeakMap有什么作用呢?(后续专门讲解)

    vue的响应式源码

    在这里插入图片描述

    三、ES6的其它知识点说明

    事实上ES6(ES2015)是一次非常大的版本更新,所以里面重要的特性非常多:

    除了前面讲到的特性外还有很多其他特性;

    1.ProxyReflect

    • 我们会在后续专门进行学习。

    • 并且会利用Proxy、Reflect来讲解Vue3的响应式原理;

    2.Promise

    • 用于处理异步的解决方案,后续会详细学习;

    • 并且会学习如何手写Promise;

    3.ES Module模块化开发:

    • 从ES6开发,JavaScript可以进行原生的模块化开发;
    • 这部分内容会在工程化部分学习;
    • 包括其他模块化方案:CommonJS、AMD、CMD等方案;
  • 相关阅读:
    结合 Django 和 Vue.js 打造现代 Web 应用
    vscode json文件添加注释报错
    faster python——dataclass&cache
    面试题:computed watch data filter
    嵌入式系统开发笔记91:认识ARM微控制器架构
    redis回顾
    Eotalk Vol.03:结合 API & DaaS,让使用数据更方便
    修复dinput8.dll文件的缺失,以及修复dinput8.dll文件时需要注意什么
    Linux 进程替换深剖
    小程序Saas平台源码:开启电商小程序新时代,可视化后台自由DIY的无限可能
  • 原文地址:https://blog.csdn.net/Welitsi/article/details/133991658