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 相关文章推荐
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 Javascript
js实现单元格拖拽效果
Feb 10 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
vue制作抓娃娃机的示例代码
Apr 17 Javascript
js实现html滑动图片拼图验证
Jun 24 Javascript
javascript实现随机抽奖功能
Dec 30 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查看session内容的函数
2008/08/27 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
PHP设置图片文件上传大小的具体实现方法
2013/10/11 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
php调用shell的方法
2014/11/05 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
JavaScript 基础问答三
2008/12/03 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
Fabric 应用案例
2016/08/28 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
python中类与对象之间的关系详解
2020/12/16 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
智能旅行箱:Horizn Studios
2018/04/30 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
信用社实习人员自我鉴定
2013/09/20 职场文书
函授毕业生自我鉴定
2013/11/06 职场文书
原告离婚代理词
2015/05/23 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python