前端研习录（40）——ES6 Set数据结构讲解及示例分析

版权声明

本文原创作者：清风不渡
博客地址：https://blog.csdn.net/WXKKang

重拾前端记忆，记录学习笔记，现在进入ES6 Set数据结构部分

一、Set数据结构

1、定义

ES6提供了一个新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复值
Set本身是一个构造函数，用来生成Set数据结构

示例如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
head>
<body>
    <script>
        var arr = [1,2,2,3,4,4,5];
        var set1 = new Set();
        arr.forEach(x => set1.add(x));

        set1.forEach(x => console.log(x))
        console.log("---------------------------");
        var set2 = new Set(arr);
        console.log(...set2);

    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

结果如下：

在这里插入图片描述

通过add()方法向Set结构加入成员，结果表明不会添加重复的值
Set函数可以接受一个数组为参数来生成set

2、常用示例

通过Set数据结构可以用来给数组或字符串进行去重，示例如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
head>
<body>
    <script>
        var arr = [1,2,2,3,4,4,5];
        var str = 'aabbccd'

        //利用Set进行数组去重
        var arr1 = [...new Set(arr)];
        console.log(arr1);

        //利用Set进行字符串去重
        var str1 = [...new Set(str)].join('');
        console.log(str1);


    script>
body>
html>
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

结果如下：

在这里插入图片描述

注意：向Set加入值的时候，不会进行类型转换。例如1和“1”是两个不同的值，不会进行去重

示例如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
head>
<body>
    <script>
        var arr = ["1",1,2,2,3,4,4,5];

        var arr1 = [...new Set(arr)];
        console.log(arr1);

    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

结果如下：

在这里插入图片描述

3、size属性

通过size属性可以返回实例的成员总数，示例如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
head>
<body>
    <script>
        var arr = [1,2,2,3,4,4,5];

        var setSize = new Set(arr).size;
        console.log(setSize);

    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

结果如下：

在这里插入图片描述

二、Set数据结构方法

1、add()方法

add()方法可对set实例添加成员

2、delete()方法

delete()方法可删除某个值，返回一个布尔值表示是否删除成功

3、has()方法

has()方法返回一个布尔值，表示该值是否为set的成员

4、clear()方法

clear()方法清除所有成员，没有返回值

4、示例

示例如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
head>
<body>
    <script>
        var newSet = new Set();
        newSet.add(1);
        newSet.add(2);
        newSet.add(3);

        if(newSet.has(2)){
            if(newSet.delete(2)){
                console.log("删除成功");
            }
        }else{
            console.log("Set中无此元素");
        }
        console.log(newSet);
        newSet.clear();
        console.log(newSet);

    script>
body>
html>
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

结果如下：

在这里插入图片描述

相关阅读:
parallel recovery slave next change & parallel recovery push change
红绿灯的设计原理
中望CAD 2023 安装教程
CentOS 7 下 Telnet 远程 root 登录
【文档+源码+调试讲解】国风彩妆网站springboot
Android动画——使用动画启动Activity
Go与数据库：NoSQL数据库的应用
Histograms of Oriented Gradients for Human Detection
SpringBoot和SpringCloud的区别，使用微服务的好处和缺点
MATLAB算法实战应用案例精讲-【深度学习】SEnet注意力机制

原文地址：https://blog.csdn.net/WXKKang/article/details/126464554