JavaScript中的Set数据操作:交集、差集、交集、对称差集

简介: 在许多情况下,需要比较多个列表,获取它们有或没有交集、差集等等,在 Javascript 有一个数据类型可以很好的实现这些需求,那就是 Set 。

在许多情况下,需要比较多个列表,获取它们有或没有交集、差集等等,在 Javascript 有一个数据类型可以很好的实现这些需求,那就是 Set

Set对象就像一个数组,但是仅包含唯一项。Set对象是值的集合,可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次,即 Set 中的元素是唯一的。是用来合并数组并去重的好方法,在文章《Vue开发中可以使用的ES6特征》有简单提到。

文章涉及的代码地址:codepen.io/quintiontan…

什么是 Set

Set 对象是值的集合,可以按照插入的顺序迭代它的元素,元素只会出现一次,即 Set  是不按特定顺序存储的且值唯一的集合。与堆栈、队列和数组等其他集合类型不同,Set 可用于列表比较,并用于检测集合中是否存在某个项。

Set 是一种抽象数据类型,它是由其行为定义的,类似堆栈和队列数据结构。由于key-key的特性,这一点与 Map 类似,详情可以参阅《ECMAScript 6的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);  // Set { 0, Infinity, null, undefined, NaN }

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

  • 虽然 NaNNaN 不相等,但是在 Set 集合里面只会存在一个
  • undefinedInfinitySet 集合里面只会存在一个

基本 Set 的使用本文就不介绍了,可以参阅 mozilla 网站。

什么时候使用 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 不是静态的,它总能在创建后可以公开修改该集合的方法,如 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 不限于上面这些操作,之前有介绍过可以用来合并数组去重,由于 SetArray 相互转换很简单,因此可以用到 Array 的场合可以优先考虑一下 Set ,因为在内存使用上, SetArray 占用更少。


相关文章
|
2月前
|
算法 Java 数据处理
从HashSet到TreeSet,Java集合框架中的Set接口及其实现类以其“不重复性”要求,彻底改变了处理唯一性数据的方式。
从HashSet到TreeSet,Java集合框架中的Set接口及其实现类以其“不重复性”要求,彻底改变了处理唯一性数据的方式。HashSet基于哈希表实现,提供高效的元素操作;TreeSet则通过红黑树实现元素的自然排序,适合需要有序访问的场景。本文通过示例代码详细介绍了两者的特性和应用场景。
50 6
|
29天前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
|
1月前
|
开发者
除了交集运算,Set 类型还可以用于哪些数据结构的操作?
【10月更文挑战第30天】`Set`类型在数据结构操作方面提供了丰富的功能和便利,能够帮助开发者更高效地处理各种数据集合相关的任务,提高代码的简洁性和性能。
|
1月前
|
JavaScript 前端开发 Java
除了 JavaScript,还有哪些编程语言支持 Set 类型
【10月更文挑战第30天】这些编程语言中的 `Set` 类型虽然在语法和具体实现细节上有所不同,但都提供了类似的集合操作功能,方便开发者在不同的编程场景中处理集合相关的数据和逻辑。
|
1月前
|
算法 JavaScript 前端开发
使用 Set 类型实现数组的交集运算
【10月更文挑战第30天】使用 `Set` 类型实现数组的交集运算是一种常见且有效的方法,它为我们处理数据集合的运算提供了一种便捷的途径。通过合理地运用这种方法,我们可以轻松地实现数组的交集计算,并在各种编程任务中灵活运用。
|
1月前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
2月前
|
Java
Java Set以其“不重复”的特性,为我们提供了一个高效、简洁的处理唯一性约束数据的方式。
【10月更文挑战第16天】在Java编程中,Set接口确保集合中没有重复元素,每个元素都是独一无二的。HashSet基于哈希表实现,提供高效的添加、删除和查找操作;TreeSet则基于红黑树实现,不仅去重还能自动排序。通过这两个实现类,我们可以轻松处理需要唯一性约束的数据,提升代码质量和效率。
41 2
|
2月前
|
算法 Java 数据处理
从HashSet到TreeSet,Java集合框架中的Set接口及其实现类以其独特的“不重复性”要求,彻底改变了处理唯一性约束数据的方式。
【10月更文挑战第14天】从HashSet到TreeSet,Java集合框架中的Set接口及其实现类以其独特的“不重复性”要求,彻底改变了处理唯一性约束数据的方式。本文深入探讨Set的核心理念,并通过示例代码展示了HashSet和TreeSet的特点和应用场景。
22 2
|
2月前
|
前端开发 JavaScript
JS-数据筛选
JS-数据筛选
35 7
|
2月前
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
57 4