• 技术文章 >web前端 >js教程

    JavaScript中什么是Set?什么时候使用?如何使用?

    青灯夜游青灯夜游2021-07-22 09:43:07转载140
    Javascript在一些情况下是需要使用Set的。下面本篇文章就带大家了解一下Set,介绍一下什么是Set、什么时候使用 Set、Set的数据操作(交集、差集、交集、对称差集)。

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

    Set对象就像一个数组,但是仅包含唯一项。Set对象是值的集合,可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次,即 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);  // Set { 0, Infinity, null, undefined, NaN }

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

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

    什么时候使用 Set

    当需要对特定列表执行比较和判断是否相等时,可以使用 Set,下面大家描述一下适用的场合,主要就是数据里的集合操作:

    下面就以这三个场合来介绍 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 占用更少。

    更多编程相关知识,请访问:编程视频!!

    以上就是JavaScript中什么是Set?什么时候使用?如何使用?的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金--天行无忌,如有侵犯,请联系admin@php.cn删除
    专题推荐:JavaScript Set
    上一篇:javascript怎么跳出循环 下一篇:关于electron-vue图片压缩
    第16期线上培训班

    相关文章推荐

    • javascript输出语句怎么打• javascript如何输入数据• javascript循环语句哪几种• javascript的事件类型都有啥• JavaScript求x平方怎么做

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网