• js 中 Map 和 Set 的用法及区别


    1. Set

    1.1 简介

    Set是ES6新增的数据结构,类似于数组,但它的一大特性就是所有元素都是唯一的,没有重复的值,我们一般称为集合。
    Set是一个构造函数,用来生成set的数据结构。

    set打印出来的数据结构,是一个对象

    var set=new Set([1,2,3])
    console.log(set)  // Set(3) {1,2,3}
    
    • 1
    • 2

    1.2 常用语法

    要创建一个Set,需要提供一个Array作为输入,或者直接创建一个空Set

    //初始化一个Set ,需要一个Array数组,要么空Set
    var set = new Set([1,2,3,5,6]) 
    console.log(set)  // {1, 2, 3, 5, 6}
    
    //添加元素 add()
    //返回 Set 结构本身,当添加实例中已经存在的元素,set不会进行处理添加。也可以采用链式写法
    set.add(7) //{1, 2, 3, 5, 6, 7}
    
    //删除元素 delete(), 返回一个布尔值。
    set.delete(3) // {1, 2, 5, 6, 7}
    
    //检测是否含有此元素,有为true,没有则为false
    set.has(2) //true
    
    //清除所有元素,没有返回值。
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    1.3 用途

    • 最常用来数组去重,去重方法有很多但是都没有它运行的快
    var arr = [2, 3, 5, 3, 5, 2];
    var arrSet = new Set(arr);
    console.log(arrSet);    // Set(6) {2, 3, 5}
     
    //方法一:用ES6的...结构
    let newArr1 = [...arrSet];
    console.log(newArr1 );    // [2, 3, 5]
     
    //方法二:用Array.from()将类数组转化为数组
    let newArr2 = Array.from(arrSet);
    console.log(newArr2 );    // [2, 3, 5]
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 字符串去重
    var str = "2234332244";
    var newStr = [...new Set(str)].join("");
    console.log(newStr);    //234
    
    • 1
    • 2
    • 3
    • 实现并集、交集、差集
    let a = new Set([1, 2, 3]),
    b = new Set([2, 3, 4]);
     
    //并集
    var res1 = new Set([...a, ...b]);
    console.log('并集:', res1);
     
    //交集
    var res2 = new Set([...a].filter(x => b.has(x)));
    console.log('交集:', res2);
     
    //差集(a 相对于 b)
    var res3 = new Set([...a].filter(x => !b.has(x)));
    console.log('差集:', res3);
    
    //并集 Set(4) {1,2,3,4}
    //交集 Set(2) {2,3}
    //差集 Set(1) {1}
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    1.4 遍历方法

    Set结构的实例有四个遍历方法,可用于遍历成员。
    keys(), values(), entries()返回的都是遍历器对象。
    Set结构没有键名,只有键值,所以keys()和values()方法的行为完全一致

    • keys():返回键名的遍历器
    • values():返回键值的遍历器
    • entries():返回键值对的遍历器
    • forEach():使用回调函数遍历每个成员
    var list = new Set(["a", 1, 2, 3]);
    for(let key of list.keys()) {
        console.log(key);    // a 1 2 3
    }
    
    var list = new Set(["a", 1, 2, 3]);
    for(let value of list.values()) {
        console.log(value);    // a 1 2 3
    }
    
    var list = new Set(["a", 1, 2, 3]);
    for(let row of list.entries()) {
        console.log(row);    // ["a", "a"] [1, 1] [2, 2] [3, 3]
    }
    
    var list = new Set(["a", 1, 2, 3]);
    list.forEach((value, key) => {
        console.log(key + ":" + value);    // a:a  1:1  2:2  3:3
    });
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    2. Map

    2.1 简介

    JS的对象有个小问题,就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。为了解决这个问题,最新的ES6规范引入了新的数据类型Map。

    Map类似于对象,数据结构是一个键值对的结构,但是“键”的范围不限制于字符串,各种类型的值(包含对象)都可以当作键。
    Map 也可以接受一个数组作为参数,数组的成员是一个个表示键值对的数组。注意Map里面也不可以放重复的项。

    2.2 常用语法

    一个key只能对应一个value,多次对一个key放入value,后面的值会把前面的值覆盖掉;
    初始化Map需要一个二维数组,或者直接初始化一个空Map

    //初始化`Map`需要一个二维数组(请看 Map 数据结构),或者直接初始化一个空`Map` 
    let map = new Map();
    
    //添加key和value值
    map.set('Amy','女')
    map.set('liuQi','男')
    
    //是否存在key,存在返回true,反之为false
    map.has('Amy') //true
    map.has('amy') //false
    
    //根据key获取value
    map.get('Amy') //女
    
    //删除 key为Amy的value
    map.delete('Amy')
    map.get('Amy') //undefined  删除成功
    
    
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    3. 区别

    map和set一样是关联式容器,它们的底层容器都是红黑树

    • 两种方法具有极快的查找速度
    • Map 和 Set 都不允许键重复
    • 初始化需要值不一样,Map需要的是一个二维数组,而Set 需要的是一维 Array 数组
    • Map 是键值对的存在,键和值是分开的;Set 没有 value 只有 key,value 就是 key;
  • 相关阅读:
    【python数据建模】Scipy库
    C语言perror
    学习C++图像处理最快最好的途径
    验证的挑战
    Nginx+Tomcat
    springboot---任务---整合quartz与task----定时任务(详细)
    抖音视频评论抓取软件|视频批量下载
    pytorch 实战【以图像处理为例】
    What is ChatGPT used for?
    在 Rainbond 上使用 Curve 云原生存储
  • 原文地址:https://blog.csdn.net/qq_45359288/article/details/124940412