JavaScript 数据结构之 Set

贵有恒,何必三更起、五更眠、最无益,只怕一日曝、十日寒。这篇文章主要讲述JavaScript 数据结构之 Set相关的知识,希望能为你提供帮助。

JavaScript 数据结构之 Set

文章图片

Set 也是 ECMAScript 6 规范中引入的一种数据结构,是一种叫做集合(是由一堆无序的、相关联的,且不重复的内存结构)的数据结构。Set 就像一个数组,但是仅包含唯一项。Set对象是值的集合,可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次,即 Set 中的元素是唯一的。本文将介绍什么是Set ,和 Array 的比较,在什么场合使用?常见 Set的实用方法。
文章涉及的代码地址:https://codepen.io/quintiontang/pen/rNmNbbY
什么是 Set
Set 对象是值的集合,可以按照插入的顺序迭代它的元素,元素只会出现一次,即 Set是不按特定顺序存储的且值唯一的集合。与堆栈、队列和数组等其他集合类型不同,Set 可用于列表比较,并用于检测集合中是否存在某个项。
Set 是一种抽象数据类型,它是由其行为定义的,类似堆栈和队列数据结构。由于key-key的特性,这一点与 Map 类似。
javascript Set
javaScript 中的 Set 是非常基础和简单的,它不像其他语言那样提供通用的集操作功能。它使用了一种独特的算法(不是基于严格的相等 === )来检测元素是否相同。
这意味着在集合中存储 undefinednullNaN 将只会存储一次,即使是 NaN !== NaN ,它通常应用于对象类型的存储。
const setTest = new Set([0, -0, Infinity,null, undefined, null, NaN, NaN, Infinity,null]); console.log(setTest); // Set0, Infinity, null, undefined, NaN

从上面的执行结果可以得出以下结论:
  • 虽然 NaNNaN 不相等,但是在 Set 集合里面只会存在一个
  • undefinedInfinitySet 集合里面只会存在一个
基本 Set 的使用本文就不介绍了,可以参阅 mozilla 网站。
Set 和 Array
一般来说,Array 是一种结构类型,它表示在内存中连续分配的数据块(数字、对象等)。而 Set 是一个集合,一种抽象数据类型,只包含不同的元素/对象,不需要按索引顺序分配。因此从定义上来区别,Array 被认为是一种称为“索引集合”的数据结构,而 Set 被认为是“带键的集合”。
  • Array 中的元素可以重复,而在 Set 中,不能重复,这一特性通常用来处理数组的去重。
  • Array索引集合是按索引值排序的数据集合;Set 带键的集合是使用键的集合,它们包含按插入顺序可迭代的元素。
对于两种数据结构的使用场合,什么时候使用更好呢?
  • Set 不同于 Array,并且设计初衷也不是用来取代 Array,而是提供某种额外的支持来完成 Array 所缺乏的。
  • Array 适用于希望保持元素排序以便快速访问或进行大量修改(删除和添加元素)或直接访问元素索引所需的任何操作。
  • 基本的 Set 操作,下面的介绍的场合更加适合
什么时候使用 Set
当需要对特定列表执行比较和判断是否相等时,可以使用 Set,下面大家描述一下适用的场合,主要就是数据里的集合操作:
  • 获取两个集合的并集 union
  • 获取两个集合的差集 difference
  • 获取两个集合的交集 intersection
  • 获取两个集合的对称差集 intersectionDifference
  • 判断两个集合是否为子集 isSubset
  • 判断两个集合是否为超集 isSuperset
下面就以这三个场合来介绍 Set 的相关操作。
Set 操作
【JavaScript 数据结构之 Set】在数学中,每当谈论集合时,都可以执行一些操作,实际上,Set 是数学有限集的计算机实现方式。
为了在代码中更好的展示 Set 操作,示例代码将 扩展 Javascript Set 以继承其属性和方法,并为其增加其它的方法。
class SetHelper extends Set /** * 验证集合是否为有效集合 * @param * set * @returns */ _isValid = (set) => return set & & set instanceof Set & & set.size > 0; ;

并集 unionunion 操作将合并多个 Set 对象并返回合并后的结果。实现上将当前集和给定集合并到一个数组中并创建它,从而返回一个新的集合。
union(set) if (!this._isValid(set)) return new SetHelper(); return new SetHelper([...this, ...set]);

差集 differencedifference 操作将返回一个新的集合,新集合只包含在一个集合中并且不在另一个集合中的元素,即数学的差集概念。
difference(set) if (!this._isValid(set)) return new SetHelper(); const differenceSet = new SetHelper(); this.forEach((item) => !set.has(item) & & differenceSet.add(item); ); return differenceSet;

交集 intersectionintersection 操作返回只包含两个集合共同拥有的元素的新集合。实现上将遍历较小的集合(避免不必要的检查)并检查每一项是否存在于较大的集合中并将其添加到交集中,遍历完成后将返回交集。
intersection(set) const intersectionSet = new SetHelper(); if (!this._isValid(set)) return intersectionSet; const [smallerSet, biggerSet] = set.size < = this.size ? [set, this] : [this, set]; smallerSet.forEach((item) => biggerSet.has(item) & & intersectionSet.add(item); ); return intersectionSet;

对称差集 intersectionDifferenceintersectionDifference 操作将返回其中包含两个集合没有交集的所有元素的新集合。
intersectionDifference(set) if (!this._isValid(set)) return new SetHelper(); return new SetHelper([ ...this.difference(set), ...set.difference(this), ]);

子集 subsetisSubset 操作将判断两个集合是否为子集关系(当一个集合的所有项都包含在另一个集合中时)。实现上首先检查两个集合的大小,如果一个集合更大,则它不能是另一个集合的子集,然后对于每个项目,它检查它是否存在于另一个中。
isSubset(set) if (!this._isValidSet(set)) return false; return ( this.size < = set.size & & [...this].every((item) => set.has(item)) );

超集 supersetisSuperset 操作将判断两个集合是否为超集关系。超集是子集的反操作。当一个集合包含另一个较小或相等大小的集合的所有项目时,它就是一个超集。
isSuperset(set) if (!this._isValidSet(set)) return false; return ( this.size > = set.size & & [...set].every((item) => this.has(item)) );

静态 Set
静态Set 是一个始终包含它初始化元素的集合,不能添加、删除、清除元素。Javascript Set 不是静态的,它总能在创建后可以公开修改该集合的方法,如 adddelete ,为避免集合被修改,可以创建一个新的 Set ,将其修改方法重置 。
class StaticSet extends SetHelper constructor(items) super(items); this.add = undefined; this.delete = undefined; this.clear = undefined;

使用
现在就可以使用上面定义的方法操作两个 Set,如下:
const setA = new StaticSet(new Set([1, 2, 3, 4])); const setB = new StaticSet(new Set([3, 4, 5, 6])); console.log([...setA.union(setB)]); // [ 1, 2, 3, 4, 5, 6 ] console.log([...setA.difference(setB)]); // [ 1, 2 ] console.log([...setA.intersection(setB)]); // [ 3, 4 ] console.log([...setB.intersectionDifference(setA)]); // [ 5, 6, 1, 2 ]

总结
Set 允许存储任何类型的唯一值,无论是原始值或者是对象引用,Set 是值的集合,可以按照插入的顺序迭代它的元素。上面介绍了 SetArray 的区别,在实际情况下 Set 的最佳使用场合。由于 SetArray 相互转换很简单,因此可以用到 Array 的场合可以优先考虑一下 Set ,因为在存储空间上, SetArray 占用更少。

    推荐阅读