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

最新推荐文章于 2024-07-03 09:20:55 发布

清风不渡

最新推荐文章于 2024-07-03 09:20:55 发布

阅读量504

点赞数

分类专栏：前端研习录文章标签：前端 es6 数据结构

本文链接：https://blog.csdn.net/WXKKang/article/details/126464554

版权

前端研习录专栏收录该内容

44 篇文章 3 订阅

订阅专栏

前端研习录（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>

结果如下：

在这里插入图片描述

通过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>

结果如下：

在这里插入图片描述

注意：向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>

结果如下：

在这里插入图片描述

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>

结果如下：

在这里插入图片描述

二、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>