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 相关文章推荐
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
jquery实现table鼠标经过变色代码
Sep 25 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
原生JS实现飞机大战小游戏
Jun 09 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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
php中json_encode中文编码问题分析
2011/09/13 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
form自动提交实例讲解
2017/07/10 PHP
JQuery里选择超链接的实现代码
2011/05/22 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
简单理解Python中基于生成器的状态机
2015/04/13 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
python匿名函数用法实例分析
2019/08/03 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
商务英语专业应届毕业生求职信
2013/10/28 职场文书
美发店5.1活动方案
2014/01/24 职场文书
《两只鸟蛋》教学反思
2014/02/10 职场文书
文体活动实施方案
2014/03/27 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
青年教师个人总结
2015/02/11 职场文书
电影建国大业观后感
2015/06/01 职场文书
让世界充满爱观后感
2015/06/10 职场文书
基于Python的EasyGUI学习实践
2021/05/07 Python