ES6学习总结之Set和Map的使用

SwaryLA

已于 2022-05-16 10:32:31 修改

阅读量886

点赞数

分类专栏： es6 文章标签： es6

于 2022-01-06 17:06:21 首次发布

本文链接：https://blog.csdn.net/weixin_48927323/article/details/119325387

版权

es6 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

当我们需要存储一些数据的时候，首先想到的是定义一个变量用来存储，之后我们可能学了数组，发现数组比变量可以存储更多的数据，接着可能有其它的存储数据的方法等等，然而我今天需要介绍的是在ES6中比较常见使用的数据类型结构，Set和Map。

Set数据结构

一、Set简介

set中成员的值都是唯一的，没有重复的值
向set中添加成员时，不会发生类型转换
向set中添加的对象总是不想等

二、常用的属性和方法

属性：

size：返回set实例的成员总数

方法：

add()：添加某个值，返回set本身
delete()：删除某个值，返回一个布尔值，判断删除是否成功
has()：返回一个布尔值，表示该值是否为set成员
clear()：清除所有成员，没有返回值
keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回键值对的遍历器
forEach()：使用回调函数遍历每个成员

三、实例剖析

为了方便大家更好的了解和学习set，我在这里会将这些方法和属性进行分类整理和讲解

1、set的基本用法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>数组去重</title>
    </head>
    <body>
        <script type="text/javascript">
            const set=new Set();    //创建set数据结构
            [1,1,2,3,4,5].forEach(x=>{
                set.add(x);
            })
            console.log(set);    //1,2,3,4,5
            for(let i of set){
                console.log(i);
            }
        </script>
    </body>
</html>

可以看到向Set添加成员时，不会添加重复的值

2、数组作为参数传入到set结构中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <script type="text/javascript">
//            const set=new Set([1,2,3]);
//            console.log(...set);//1,2,3,使用扩展运算符
            
            const set=new Set(document.querySelectorAll('div'));
            console.log(set.size);//5 size返回set实例的成员总数
            //如上代码相当于
            const item=new Set();
            document.querySelectorAll('div').forEach(x=>{
                item.add(x);
            })
            console.log(item);
            console.log(item.size);//5
        </script>
    </body>
</html>

3、set中添加的值不会发生类型转换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>向set中添加成员时，不会发生类型转换</title>
    </head>
    <body>
        <script type="text/javascript">
            let mySet=new Set();
            mySet.add(5);
            mySet.add('5');
            console.log(mySet);//5,'5'
            let set=new Set();
            let a=NaN;
            let b=NaN;
            set.add(a);
            set.add(b);
            console.log(set);//NaN
        </script>
    </body>
</html>

向 Set 加入值的时候，不会发生类型转换，所以5和"5"是两个不同的值。Set 内部判断两个值是否不同，使用的算法叫做“Same-value-zero equality”，它类似于精确相等运算符(===)，主要的区别是向 Set 加入值时认为NaN等于自身，而精确相等运算符认为NaN不等于自身。

4、set中添加的对象总是不想等的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>向set中添加的对象总是不想等</title>
    </head>
    <body>
        <script type="text/javascript">
            let set=new Set();
            set.add({});//向set中添加一个空对象
            console.log(set.size);//1
            set.add({});//向set中添加另一个空对象
            console.log(set.size);//2
        </script>
    </body>
</html>

由于两个空对象不相等，所以它们被视为两个值

5、Array.from()方法

Array.from()可以将set结构转为数组，这就提供了去除数组重复成员的另一种方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Array.from()方法</title>
    </head>
    <body>
        <script type="text/javascript">
            const items=new Set([1,2,3,4,5]);
            console.log(items);//1,2,3,4,5
            const array=Array.from(items);
            console.log(array);//1.2.3,4,5
            //Array.from()方法实现数组去重
            function dedupe(arr){
                return Array.from(new Set(arr))
            }
            console.log(dedupe([1,1,2,3]));//1,2,3
        </script>
    </body>
</html>

四.遍历的应用

1、数组去重

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>数组去重</title>
    </head>
    <body>
        <script type="text/javascript">
            let set=new Set(['red','blue','green']);
            let arr=[...set];
            console.log(arr);//red,blue,green
            //数组去重
            let arrs=[1,1,3,3,4,5,6];
            let unique=[...new Set(arrs)];
            console.log(unique);//1,3,4,5,6
        </script>
    </body>
</html>

2、间接使用数组的方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>间接使用数组的方法</title>
    </head>
    <body>
        <script type="text/javascript">
            let set=new Set([1,2,3,4,5]);
            set=new Set([...set].map(x=>x*2));//使用数组的map方法
            console.log(set);//2,4,6,8,10
            let mySet=new Set([1,2,3,4,5]);
            mySet=new Set([...mySet].filter(x=>x%2==0));//使用数组的filter方法
            console.log(mySet);//2,4
        </script>
    </body>
</html>

3、实现并集，交集，差集

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>实现并集，交集，差集</title>
    </head>
    <body>
        <script type="text/javascript">
            let a=new Set([1,2,3]);
            let b=new Set([4,3,2]);
            //并集
            let union=new Set([...a, ...b]);
            console.log(union);//1,2,3,4
            //交集
            let intersect=new Set([...a].filter(x=>b.has(x)));
            console.log(intersect);//2,3
            //差集
            let difference=new Set([...a].filter(x=>!b.has(x)));
            console.log(difference);//1
        </script>
    </body>
</html>

SwaryLA

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ES6学习总结之Set和Map的使用

前言当我们需要存储一些数据的时候，首先想到的是定义一个变量用来存储，之后我们可能学了数组，发现数组比变量可以存储更多的数据，接着可能有其它的存储数据的方法等等，然而我今天需要介绍的是在ES6中比较常见使用的数据类型结构，Set和Map。Set数据结构一、Set简介 set中成员的值都是唯一的，没有重复的值向set中添加成员时，不会发生类型转换向set中添加的对象总是不想等二、常用的属性和方法属性： size：返回set实例的成员总数方法：
复制链接

扫一扫