JS数据结构——Set(集合)详解

这篇具有很好参考价值的文章主要介绍了JS数据结构——Set(集合)详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


参考: 阮一峰 ECMAScript 6 (ES6) 标准入门教程

什么是Set

Set类似于数组,但是成员的值都是唯一的,没有重复的值。
也就是说它是一系列无序,没有重复数值的数据集合。
很多时候我们把Set叫做集合,但是,Set可以是集合,集合不一定是Set。

Set的构造方法

一、数组

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

js set,javaScript,javascript,数据结构,原型模式
Set可以添加数组,因为没有重复数据的特性,传入多个1,只会有一个1

二、字符串

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

js set,javaScript,javascript,数据结构,原型模式
同样的,字符串也会自动去重

三、DOM对象

const lis = document.querySelectorAll('li')
const setLi = new Set(lis)
console.log('setLi',setLi);

js set,javaScript,javascript,数据结构,原型模式

Set的属性和方法

注意
大家在看博客的时候可能会注意到有的博客写的是

Set.prototype.size
Set.prototype.add(value)

还有写

Set.size
Set.add(value)

这两种一样不一样呢?有没有什么区别呢?
其实两种写法, 是两种不同的方法,它们在使用上有明显的区别:

Set.prototype.size和Set.size的区别

  1. Set.prototype.add(value):
    Set.prototypeSet 构造函数的原型对象。这意味着它是在所有 Set 实例上可用的方法。
    add(value)Set.prototype 上的方法,用于将指定的值添加到 Set 实例中。
    使用实例
const mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(3);

这意味着实例化后使用的是Set.prototype.add(value):方法

  1. Set.add(value):
    Set 不是一个构造函数,而是 Set 构造函数的静态方法。这意味着它是在 Set 构造函数本身上可用的方法,而不是在实例上使用的。
    Set.add(value) 用于向一个新的 Set 对象添加指定的值,并返回包含该值的新
    Set 对象。每次调用 Set.add 都会创建一个新的 Set 对象。
    使用实例
const mySet1 = Set.add(1);
const mySet2 = Set.add(2);

使用的时候其实不会感觉出有区别,但是要明白原理,不能稀里糊涂乱用一通

一、Set的属性

Set.prototype.size:返回Set实例的成员总数。

二、Set的方法

1 add(value)

Set.prototype.add(value) : 添加某个值,返回 Set 结构本身。

 // 创建set实例
const set = new Set();
set.add(1)
set.add(2)
console.log(set);

js set,javaScript,javascript,数据结构,原型模式
也可以连着写

  // 创建set实例
const set = new Set();
set.add(1)
set.add(2)
set.add(3).add(4)
console.log(set);

js set,javaScript,javascript,数据结构,原型模式

2 delete(value)

Set.prototype.delete(value):删除某个值,返回一个布尔值,表示删除是否成功。

const isDel = set.delete(3)
console.log(isDel);
console.log(set);

js set,javaScript,javascript,数据结构,原型模式

3 has(value)

Set.prototype.has(value):返回一个布尔值,表示该值是否为Set的成员。

const isHas = set.has(2)
console.log(isHas); //true

4 clear()

Set.prototype.clear():清除所有成员,没有返回值。

set.clear()
console.log(set);

js set,javaScript,javascript,数据结构,原型模式

三、Set的遍历

  • Set.prototype.keys():返回键名的遍历器
  • Set.prototype.values():返回键值的遍历器
  • Set.prototype.entries():返回键值对的遍历器
  • Set.prototype.forEach():使用回调函数遍历每个成员

由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致。

let set = new Set(['red', 'green', 'blue']);
for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue
for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue
for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

Set 结构的实例默认可遍历,它的默认遍历器生成函数就是它的values方法。
这意味着,可以省略values方法,直接用for…of循环遍历 Set。

let set = new Set(['red', 'green', 'blue']);
for (let x of set) {
  console.log(x);
}
// red
// green
// blue

Set的使用

扩展运算符(…)内部使用for…of循环,所以也可以用于 Set 结构。

let set = new Set(['red', 'green', 'blue']);
let arr = [...set];
// ['red', 'green', 'blue']

扩展运算符和 Set 结构相结合,就可以去除数组的重复成员。

let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
// [3, 5, 2]

而且,数组的map和filter方法也可以间接用于 Set 了。
(关于map和filter都是数组的api方法有不懂的同学可以看我往期的博客)

let set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));
// 返回Set结构:{2, 4, 6}
let set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));
// 返回Set结构:{2, 4}

因此使用 Set 可以很容易地实现并集(Union)、交集(Intersect)和差集(Difference)。

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}
// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}
// (a 相对于 b 的)差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

如果想在遍历操作中,同步改变原来的 Set 结构,目前没有直接的方法,但有两种变通方法。一种是利用原 Set 结构映射出一个新的结构,然后赋值给原来的 Set 结构;另一种是利用Array.from方法。
(关于Array.from有不懂的同学可以看我往期的博客)文章来源地址https://www.toymoban.com/news/detail-758844.html

// 方法一
let set = new Set([1, 2, 3]);
set = new Set([...set].map(val => val * 2));
// set的值是2, 4, 6
// 方法二
let set = new Set([1, 2, 3]);
set = new Set(Array.from(set, val => val * 2));
// set的值是2, 4, 6

到了这里,关于JS数据结构——Set(集合)详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【数据结构】搜索树 与 Java集合框架中的Set,Map

    作者主页:paper jie_博客 本文作者:大家好,我是paper jie,感谢你阅读本文,欢迎一建三连哦。 本文录入于《JAVA数据结构》专栏,本专栏是针对于大学生,编程小白精心打造的。笔者用重金(时间和精力)打造,将javaSE基础知识一网打尽,希望可以帮到读者们哦。 其他专栏:《

    2024年02月08日
    浏览(38)
  • Java02-迭代器,数据结构,List,Set ,TreeSet集合,Collections工具类

    目录 什么是遍历? 一、Collection集合的遍历方式 1.迭代器遍历 方法 流程 案例 2. foreach(增强for循环)遍历 案例 3.Lamdba表达式遍历 案例 二、数据结构 数据结构介绍 常见数据结构 栈(Stack) 队列(Queue) 链表(Link) 散列表(Hash Table) 树(Tree) List接口 ArraysList集合 Linked

    2024年02月14日
    浏览(47)
  • 【数据结构】 Map和Set详解

    Map和set是一种专门用来 进行搜索的容器或者数据结构 ,其搜索的效率与其具体的实例化子类有关。以前常见的 搜索方式有: 直接遍历,时间复杂度为O(N),元素如果比较多效率会非常慢 二分查找,时间复杂度为 ,但搜索前必须要求序列是有序的 上述排序比较适合静态类型的

    2024年02月09日
    浏览(48)
  • 【高阶数据结构】Map 和 Set(详解)

    (꒪ꇴ꒪(꒪ꇴ꒪ )🐣,我是 Scort 目前状态:大三非科班啃C++中 🌍博客主页:张小姐的猫~江湖背景 快上车🚘,握好方向盘跟我有一起打天下嘞! 送给自己的一句鸡汤🤔: 🔥真正的大师永远怀着一颗学徒的心 作者水平很有限,如果发现错误,可在评论区指正,感谢🙏 🎉🎉

    2024年01月23日
    浏览(37)
  • 【数据结构】 | java中 map和set 详解

    🎗️ 博客新人,希望大家一起加油进步 🎗️ 乾坤未定,你我皆黑马 我们首先来看一下集合的框架结构: Set实现了Collection接口,Map是一个单独存在的接口。 而下面又分别各有两个类,分别是TreeSet(HashSet)和 HashSet(HashMap) Map和Set的作用是用来查找和搜索的;以后涉及到

    2023年04月10日
    浏览(40)
  • 数据结构 - 7(Map和Set 15000字详解)

    二叉搜索树又称二叉排序树,它或者是一棵空树,或者是具有以下性质的二叉树: 若它的左子树不为空,则左子树上所有节点的值都小于根节点的值 若它的右子树不为空,则右子树上所有节点的值都大于根节点的值 它的左右子树也分别为二叉搜索树 int[] array ={5,3,4,1,7,8,2,6,0

    2024年02月06日
    浏览(37)
  • 【数据结构与算法】C++的STL模板(迭代器iterator、容器vector、队列queue、集合set、映射map)以及算法例题

    更多算法例题链接: 【数据结构与算法】递推法和递归法解题(递归递推算法典型例题) 什么是迭代器(iterator) 迭代器(iterator)的定义: 迭代器是一种检查容器内元素并遍历元素的数据类型。 迭代器提供对一个容器中的对象的访问方法,并且定义了容器中对象的范围。 容器

    2024年04月14日
    浏览(50)
  • JS中, Set为什么是带键的集合?

    为了降低并发时的API请求量, 这两天写了个LRU Cache. 其中用到了Set做AllowList, 来判断API是否应该被缓存. 在MDN查API时, 发现Set被归类在Keyed Collection中. 一直以来, 下意识觉得Set只是value唯一的Array. 应该属于Indexed Collection. 感觉有些奇怪, 所以就查了下Set的实现机制 一开始, 先去MD

    2024年02月08日
    浏览(35)
  • Java学数据结构(3)——树Tree & B树 & 红黑树 & Java标准库中的集合Set与映射Map & 使用多个映射Map的案例

    1.B树,阶M,数据树叶上,根的儿子数在2和M之间,除根外,非树叶节点儿子为M/2和M之间; 2.B树的插入引起分裂,B树的删除,引起合并和领养; 3.红黑树,根是黑的,红色节点的儿子必须是黑的,所有路径的黑色节点数相同; 4.红黑树的插入,颜色翻转,单旋转,插入节点定

    2024年02月11日
    浏览(81)
  • js递归遍历树形结构数据,获取所有数组id集合

    实现思路 可以使用递归遍历整个树形数组,将每个节点的id加入到一个数组中,最后返回这个数组即可。 数据准备 代码实现 方式一 获取结果 方式二 获取结果 方式三 获取结果 方法总结 这里的tree是树形数组,result是用来保存所有id的数组。 首先遍历当前层级的每个节点,

    2024年02月11日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包