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 String 的扩展方法集合
Jun 01 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
跟我学习javascript的this关键字
May 28 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
9种改善AngularJS性能的方法
Nov 28 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
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写MySQL数据 实现代码
2009/06/15 PHP
php生成略缩图代码
2012/07/16 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
设定php简写功能的方法
2019/11/28 PHP
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
Python 基础知识之字符串处理
2017/01/06 Python
python数据处理实战(必看篇)
2017/06/11 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
Python序列化pickle模块使用详解
2020/03/05 Python
晚会主持词开场白
2014/03/17 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
导游词之井冈山
2019/11/20 职场文书
Python3 类型标注支持操作
2021/06/02 Python
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers