JavaScript的Set数据结构详解

目录
  • 1. 什么是 Set
  • 2. Set 构造函数
    • 2.1) 数组
    • 2.2) 字符串
    • 2.3) arguments
    • 2.4) NodeList
    • 2.5)  Set
  • 3. Set 的实例属性和方法
  • 4. Set 的成员访问
  • 5. Set 的注意事项
  • 6. Set 的使用场景
  • 总结

1. 什么是 Set

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

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

2. Set 构造函数

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

2.1) 数组

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

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

2.2) 字符串

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

2.3) arguments

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

fun(1, 2, 3);

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>

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

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

2.5)  Set

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

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

console.log(s1 === s2);

3. Set 的实例属性和方法

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

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

Set的方法

add

给 Set 中添加成员

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

delete

用来删除 Set 中的成员

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

has

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

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

clear

将会删除 Set 的所有成员

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

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);
});

再来看第二个参数：

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

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);

字符串去重

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

存放 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>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • JavaScript数据结构与算法之集合(Set)

    集合(Set) 说起集合,就想起刚进高中时,数学第一课讲的就是集合.因此在学习集合这种数据结构时,倍感亲切. 集合的基本性质有一条: 集合中元素是不重复的.因为这种性质,所以我们选用了对象来作为集合的容器,而非数组. 虽然数组也能做到所有不重复,但终究过于繁琐,不如集合. 集合的操作 集合的基本操作有交集.并集.差集等.这儿我们介绍JavaScipt集合中交集.并集.差集的实现. JavaScipt中集合的实现 首先,创建一个构造函数. /** * 集合的构造函数 */ function Set

  • JS中的算法与数据结构之字典(Dictionary)实例详解

    本文实例讲述了JS中的算法与数据结构之字典(Dictionary).分享给大家供大家参考,具体如下: 字典(Dictionary) 字典(Dictionary)是一种以 键-值对 形式存储数据的数据结构 ,就如同我们平时查看通讯录一样,要找一个电话,首先先找到该号码的机主名字,名字找到了,紧接着电话号码也就有了.这里的键就是你用来查找的东西,本例中指代的就是名字,值就是查找得到的结果,也就是对应的电话号码. 其实,JavaScript 中的 Object 类就是以字典的形式设计的,下面我们将会借

  • JS中的算法与数据结构之集合(Set)实例详解

    本文实例讲述了JS中的算法与数据结构之集合(Set).分享给大家供大家参考,具体如下: 集合(Set) 同数学中所学的一样,集合(Set)是由一组无序但彼此之间又有一定关系性的成员构成,每个成员在集合中只能出现一次,不同于我们之前说的字典,链表之类的,它是一种包含了不同元素的数据结构(集合中的元素称为成员),从其定义中我们可以看出它具有两个很重要的特征:首先,集合中的成员是无序的,其次,集合中的成员是不相同的,即集合中不存在相同的成员. 实际上,很多编程语言中,集合并不是一种数据类型,但是如果你

  • JS中的算法与数据结构之链表(Linked-list)实例详解

    本文实例讲述了JS中的算法与数据结构之链表(Linked-list).分享给大家供大家参考,具体如下: 链表(Linked-list) 前面我们讨论了如何使用栈.队列进行存数数据,他们其实都是列表的一种,底层存储的数据的数据结构都是数组. 但是数组不总是最佳的数据结构,因为,在很多编程语言中,数组的长度都是固定的,如果数组已被数据填满,再要加入新的元素是非常困难的.而且,对于数组的删除和添加操作,通常需要将数组中的其他元素向前或者向后平移,这些操作也是十分繁琐的. 然而,JS中数组却不存在上述问

  • JS中的算法与数据结构之队列(Queue)实例详解

    本文实例讲述了JS中的算法与数据结构之队列(Queue).分享给大家供大家参考,具体如下: 队列(Queue) 我们之前说到了栈,它是一种比较高效的数据结构,遵循 先入后出(LIFO,last-in-first-out) 的原则.而今天我们要讨论的队列,它也是一种特殊的列表,它与栈不同的是, 队列只能在队尾插入元素,在队首删除元素,就像我们平时排队买票一样~ 队列用于存储按顺序排列的数据,遵循 先进先出(FIFO,First-In-First-Out) 的原则,也是计算机常用的一种数据结构,别用

  • JavaScript的Set数据结构详解

    JavaScript的Set数据结构详解

    目录 1. 什么是 Set 2. Set 构造函数 2.1) 数组 2.2) 字符串 2.3) arguments 2.4) NodeList 2.5)  Set 3. Set 的实例属性和方法 4. Set 的成员访问 5. Set 的注意事项 6. Set 的使用场景 总结 1. 什么是 Set Set 可以简单的看作是数学上的集合. 它是一系列无序,没有重复数值的数据集合. 2. Set 构造函数 对于 Set 的构造函数的参数,可以传递以下几种形式. 2.1) 数组 const s =

  • JavaScript字典与集合详解

    JavaScript字典与集合详解

    目录 字典 什么是字典 JavaScript中的字典 字典的应用 集合 什么是集合 JS中的集合 集合中的操作 交集.并集.差集的封装 字典 什么是字典 说到字典,第一时间想到的应该就是新华字典,实际上,这跟编程中的字典类似,两者都有一个特点,就是一一对应(yi yi dui ying),或者说是映射. 字典通常以**[键,值]** 对的形成存储,因为是以键值对的形式存储,更方便通过key来获取value 比如存储用户信息: { 'username': '一碗周', 'age': 18 } Ja

  • 基于JavaScript表单脚本(详解)

    基于JavaScript表单脚本(详解)

    什么是表单? 一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包含了文本框.密码框.隐藏域.多行文本框.复选框.单选框.下拉选择框和文件上传框等. 表单按钮:包括提交按钮.复位按钮和一般按钮:用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作. JavaScript与表单间的关系:JS最初的应用就是用于分担服务器处理表单的责任,打破依赖服务器的局面,尽管目前web和jav

  • JavaScript里 ==与===区别详解

    1.对于string,number等基础类型,==和===是有区别的 1)不同类型间比较,==之比较"转化成同一类型后的值"看"值"是否相等,===如果类型不同,其结果就是不等 2)同类型比较,直接进行"值"比较,两者结果一样 2.对于Array,Object等高级类型,==和===是没有区别的 进行"指针地址"比较 3.基础类型与高级类型,==和===是有区别的 1)对于==,将高级转化为基础类型,进行"值&quo

  • JavaScript String 对象常用方法详解

    字符串是不可变的.字符串方法,不会改变原有字符串的内容,而是返回一个新字符串. charAt():返回在指定位置的字符. concat():连接两个字符串文本,并返回一个新的字符串. indexOf(): indexOf() 方法返回指定值在字符串对象中首次出现的位置. match(): 使用正则表达式与字符串相比较. replace(): 被用来在正则表达式和字符串直接比较,然后用新的子串来替换被匹配的子串. slice(): 摘取一个字符串区域,返回一个新的字符串. split(): 通过分

  • JavaScript hasOwnProperty() 函数实例详解

    hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性.如果有,返回true,否则返回false. 该方法属于Object对象,由于所有的对象都"继承"了Object的对象实例,因此几乎所有的实例对象都可以使用该方法. IE 5.5+.FireFox.Chrome.Safari.Opera等主流浏览器均支持该函数. 语法 object.hasOwnProperty( propertyName ) 参数 参数 描述 propertyName Str

  • JavaScript This指向问题详解

    JavaScript This指向问题详解

    这篇文章主要介绍了JavaScript This指向问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 各位小伙伴在面试中被面试官问道this指向问题一定不少吧,同时还被问道apply,call和bind的用法区别,现在,就来简单的聊一聊this到底指向何方. 1.基本概念 MDN的官方解释:与其他语言相比,函数的 this 关键字在 JavaScript 中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别.在绝大多数情况下,

  • javascript异常处理实现原理详解

    这篇文章主要介绍了javascript异常处理实现原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.什么是例外处理 当 JavaScript程序在运行中发生了诸如数组索引越界.类型不匹配或者语法错误时,JavaScript解释器就会引发例外处理. ECMAScript定义了六种类型的错误,除此之外,我们可以使用Error对象和throw语句来创建并引发自定义的例外处理信息. 通过运用例外处理技术,我们可以实现用结构化的方式来响应错误事

  • javascript中正则表达式语法详解

    好久都没有写博客了,主要是太懒了,尤其是在阳春三月,风和日丽的日子,太阳暖暖的照在身上,真想美美的睡上一觉.就导致了这篇博客拖到现在才开始动笔,javascript的正则这一块也不是什么新的东西,主要是以前本人一遇到写正则的需求就开始头大,头疼,网上剽窃,东拼西凑,反正就是各种不适应,所以我打算系统的把正则表达式看一遍,一来是自己有所提升,这一块知识点的查漏补缺,二来是给大家分享一下.好了,下面我们直接进入主题: 正则是匹配字符串特定模式的一种表达式,官方是这样说的,但我的理解不外乎就是匹配字符

  • 利用javaScript处理常用事件详解

    利用javaScript处理常用事件详解

    JS事件指再浏览器窗体或者HTML元素上发生的,乐意触发JS代码块运行的行为,下面,我们一起来看看相关事件. 1.窗体事件 例如 onload事件:当页面完全加载完成之后(包括图像,js文件,css文件等)该事件就会被触发. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>花狗在线</title> <script> window.o

随机推荐