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 相关文章推荐
基于jquery的图片幻灯展示源码
Jul 15 Javascript
js页面跳转的常用方法整理
Oct 18 Javascript
Javascript玩转继承(二)
May 08 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
原生JS实现天气预报
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
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
PHP可变变量学习小结
2015/11/29 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
PDO::getAttribute讲解
2019/01/28 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
js表格分页实现代码
2009/09/18 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
原生JS实现瀑布流插件
2018/02/06 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
JS随机密码生成算法
2019/09/23 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
python实现Virginia无密钥解密
2019/03/20 Python
如何卸载python插件
2020/07/08 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
绿化先进工作者事迹材料
2014/01/30 职场文书
五五普法心得体会
2014/09/04 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书