JavaScript 数据结构之 Set

Posted 2022-02-16 天行无忌

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 是非常基础和简单的，它不像其他语言那样提供通用的集操作功能。它使用了一种独特的算法（不是基于严格的相等 === ）来检测元素是否相同。

这意味着在集合中存储 undefined、null 和 NaN 将只会存储一次，即使是 NaN !== NaN ，它通常应用于对象类型的存储。

const setTest = new Set([0, -0, Infinity,null, undefined, null, NaN, NaN, Infinity,null]);
console.log(setTest);  // Set  0, Infinity, null, undefined, NaN 

从上面的执行结果可以得出以下结论：

• 虽然 NaN 和 NaN 不相等，但是在 Set 集合里面只会存在一个
• undefined 和 Infinity 在 Set 集合里面只会存在一个

基本 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 操作

在数学中，每当谈论集合时，都可以执行一些操作，实际上，Set 是数学有限集的计算机实现方式。

为了在代码中更好的展示 Set 操作，示例代码将 扩展 Javascript Set 以继承其属性和方法，并为其增加其它的方法。

class SetHelper extends Set 
    /**
     * 验证集合是否为有效集合
     * @param * set
     * @returns
     */
    _isValid = (set) => 
        return set && set instanceof Set && set.size > 0;
    ;

并集 union

union 操作将合并多个 Set 对象并返回合并后的结果。实现上将当前集和给定集合并到一个数组中并创建它，从而返回一个新的集合。

union(set) 
    if (!this._isValid(set)) return new SetHelper();
    return new SetHelper([...this, ...set]);

差集 difference

difference 操作将返回一个新的集合，新集合只包含在一个集合中并且不在另一个集合中的元素，即数学的差集概念。

difference(set) 
    if (!this._isValid(set)) return new SetHelper();
    const differenceSet = new SetHelper();
    this.forEach((item) => 
        !set.has(item) && differenceSet.add(item);
    );
    return differenceSet;

交集 intersection

intersection 操作返回只包含两个集合共同拥有的元素的新集合。实现上将遍历较小的集合（避免不必要的检查）并检查每一项是否存在于较大的集合中并将其添加到交集中，遍历完成后将返回交集。

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;

对称差集 intersectionDifference

intersectionDifference 操作将返回其中包含两个集合没有交集的所有元素的新集合。

intersectionDifference(set) 
    if (!this._isValid(set)) return new SetHelper();
    return new SetHelper([
        ...this.difference(set),
        ...set.difference(this),
    ]);

子集 subset

isSubset 操作将判断两个集合是否为子集关系（当一个集合的所有项都包含在另一个集合中时）。实现上首先检查两个集合的大小，如果一个集合更大，则它不能是另一个集合的子集，然后对于每个项目，它检查它是否存在于另一个中。

isSubset(set) 
    if (!this._isValidSet(set)) return false;
    return (
        this.size <= set.size && [...this].every((item) => set.has(item))
    );

超集 superset

isSuperset 操作将判断两个集合是否为超集关系。超集是子集的反操作。当一个集合包含另一个较小或相等大小的集合的所有项目时，它就是一个超集。

isSuperset(set) 
    if (!this._isValidSet(set)) return false;
    return (
        this.size >= set.size && [...set].every((item) => this.has(item))
    );

静态 Set

静态Set 是一个始终包含它初始化元素的集合，不能添加、删除、清除元素。Javascript Set 不是静态的，它总能在创建后可以公开修改该集合的方法，如 add、delete ，为避免集合被修改，可以创建一个新的 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 是值的集合，可以按照插入的顺序迭代它的元素。上面介绍了 Set 和 Array 的区别，在实际情况下 Set 的最佳使用场合。由于 Set 和 Array 相互转换很简单，因此可以用到 Array 的场合可以优先考虑一下 Set ，因为在存储空间上， Set 比 Array 占用更少。