JavaScript的Set数据结构详解


Posted in Javascript onFebruary 18, 2022

1. 什么是 Set

Set 可以简单的看作是数学上的集合。

它是一系列无序,没有重复数值的数据集合。

2. Set 构造函数

对于 Set 的构造函数的参数,可以传递以下几种形式。

2.1) 数组

const s = new Set([1, 2, 1]);
console.log(s);

JavaScript的Set数据结构详解

这里传递了一个数组[1, 2, 1]作为参数,由于 Set 是无重复数值的集合,所以第三个 1 自动删除了。

2.2) 字符串

const s = new Set("Hello World!");
console.log(s);

JavaScript的Set数据结构详解

2.3) arguments

function fun() {
    const s = new Set(arguments);
    console.log(s);
}

fun(1, 2, 3);

JavaScript的Set数据结构详解

2.4) NodeList

<!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>set</title>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    
    <script>
        const s = new Set(document.querySelectorAll('p'));
        console.log(s);
    </script>
</body>
</html>

JavaScript的Set数据结构详解

这里将三个p标签的引用放进了Set s中;

当我们要用的时候,就可以遍历这个 Set,然后分别将p标签的引用取出来,然后就可以对p标签进行修改了。

2.5)  Set

const s1 = new Set([1, 2, 3]);
const s2 = new Set(s1);
console.log(s2);

JavaScript的Set数据结构详解

这里相当于把s1复制过去,给了s2,不过它们不是同一个Set

console.log(s1 === s2);

JavaScript的Set数据结构详解

3. Set 的实例属性和方法

Set 的属性,有一个属性size,用来存储它的成员个数

const s = new Set([1, 2, 3]);
console.log(s.size);

JavaScript的Set数据结构详解

Set的方法

  • add

给 Set 中添加成员

const s = new Set([1, 2, 3]);
// 它的参数只能传一个
s.add(5);
console.log(s);
// 可以连缀 add
s.add(7).add(9);
console.log(s);

JavaScript的Set数据结构详解

  • delete

用来删除 Set 中的成员

const s = new Set([1, 2, 3]);
s.delete(2);
// 如果要删除的东西在 Set 中找不到,将什么也不会发生,也不会报错
s.delete(5);
console.log(s);

JavaScript的Set数据结构详解

  • has

用来判断 Set 是否含有某个成员

const s = new Set([1, 2, 3]);
console.log(s.has(1));
console.log(s.has(5));

JavaScript的Set数据结构详解

  • clear

将会删除 Set 的所有成员

const s = new Set([1, 2, 3]);
s.clear();
console.log(s);

JavaScript的Set数据结构详解

4. Set 的成员访问

它的成员访问要通过 forEach 方法实现,遍历 Set,它的遍历是按成员的添加顺序来进行遍历的。

它有两个参数,第一个参数为回调函数,第二个参数设定回调函数中this指向什么,即

s.forEach(回调函数, 回调函数的指向)

我们先来看第一个参数:

对于第一个参数回调函数,它有三个参数:

s.forEach(function(value, key, set){
	value 就是 Set 的成员
	在 Set 中,value 和 key 是相等的
	set 就是前面Set的本身,即这里 set === s
});

通过一个例子理解一下:

const s = new Set([1, 2, 3]);
s.forEach(function(value, key, set) {
    console.log(value, key, value === key);
    console.log(set, set === s);
});

JavaScript的Set数据结构详解

再来看第二个参数:

const s = new Set([1, 2, 3]);
s.forEach(function(value, key, set) {
    console.log(this);
}, document);

JavaScript的Set数据结构详解

5. Set 的注意事项

Set 对重复值的判断基本遵循严格相等===的判断

不过对于NaN,在 Set 中,NaN 等于 NaN

6. Set 的使用场景

数组去重

let arr = [1, 2, 1];
const s = new Set(arr);
arr = [...s];
// 也可以合成一句
// arr = [...new Set(arr)];
console.log(arr);

JavaScript的Set数据结构详解

字符串去重

let str = "11231131242";
const s = new Set(str);
str = [...s].join("");
// 也可以写成一句
// str = [...new Set(str)].join("");
console.log(str);

JavaScript的Set数据结构详解

存放 DOM 元素

<!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>set</title>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    
    <script>
        const s = new Set(document.querySelectorAll('p'));
        s.forEach((elem) => {
            console.log(elem)
        });
    </script>
</body>
</html>

JavaScript的Set数据结构详解

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注三水点靠木的更多内容!

Javascript 相关文章推荐
提高网站信任度的技巧
Oct 17 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
js生成随机数方法和实例
Jan 17 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
JavaScript常见JSON操作实例分析
Aug 08 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 Javascript
5个实用的JavaScript新特性
Jun 16 Javascript
JS封装cavans多种滤镜组件
HTML+JS实现在线朗读器
Feb 15 #Javascript
js中Map和Set的用法及区别实例详解
Feb 15 #Javascript
canvas实现贪食蛇的实践
Vue自定义铃声提示音组件的实现
Jan 22 #Vue.js
JavaScript实例 ODO List分析
Jan 22 #Javascript
JavaScript ES6的函数拓展
Jan 18 #Javascript
You might like
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
js中DOM三级列表(代码分享)
2017/03/20 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
详解Python网络爬虫功能的基本写法
2016/01/28 Python
python实现TF-IDF算法解析
2018/01/02 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
python pandas模块基础学习详解
2019/07/03 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
django使用admin站点上传图片的实例
2019/07/28 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
年度安全生产目标责任书
2014/07/23 职场文书
演讲稿开场白台词
2014/08/25 职场文书
2014年加油站工作总结
2014/12/04 职场文书
新员工试用期自我评价
2015/03/10 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
学历证明范文
2015/06/16 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang
MySQL 数据表操作
2022/05/04 MySQL