JavaScript에서 설정이란 무엇입니까? 언제 사용하나요? 사용하는 방법?

Javascript에서는 경우에 따라 Set을 사용해야 합니다. 다음 기사에서는 Set을 이해하고, Set이 무엇인지, 언제 Set을 사용해야 하는지, 그리고 Set의 데이터 작업(교차점, 차이 집합, 교차점, 대칭 차이 집합)에 대해 설명합니다.

많은 경우 여러 목록을 비교하여 교집합이나 차이 등이 있는지 확인해야 합니다. Javascript에는 이러한 요구를 잘 충족할 수 있는 데이터 유형이 있는데, 바로 Set code입니다. >. <code>Set 。

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

当需要对特定列表执行比较和判断是否相等时，可以使用 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),
    ]);
}

子集 subsetSet 개체는 배열과 비슷하지만 고유한 항목만 포함합니다. Set 객체는 요소가 삽입 순서대로 반복될 수 있는 값의 모음입니다. Set의 요소는 한 번만 나타납니다. 즉, Set의 요소는 고유합니다.

🎜기사에 관련된 코드 주소: https://codepen.io/quintiontang/pen/rNmNbbY🎜

설정이란 무엇입니까🎜 🎜Set 개체는 값의 모음입니다. 해당 요소는 삽입 순서에 따라 반복될 수 있습니다. 즉, Set는 저장되지 않습니다. 특정 순서로 이루어지며 고유한 값을 갖습니다. 스택, 큐, 배열과 같은 다른 컬렉션 유형과 달리 Set은 목록 비교 및 ​​세트에 항목이 있는지 검색하는 데 사용할 수 있습니다. 🎜🎜Set은 스택 및 큐 데이터 구조와 유사하게 동작으로 정의되는 추상 데이터 유형입니다. key-key의 특성상 Map과 유사합니다. 🎜

Javascript Set🎜

🎜Javascript의 Set은 매우 기본적이고 단순하며, 다른 언어 연산 기능처럼 범용 집합을 제공하지 않습니다. 이는 요소가 동일한지 여부를 감지하기 위해 고유한 알고리즘(엄격한 동등 ====을 기반으로 하지 않음)을 사용합니다. 🎜🎜이는 undefine, null 및 NaN을 컬렉션에 저장하면 NaN인 경우에도 한 번만 저장된다는 의미입니다! == NaN은 일반적으로 객체 유형의 저장에 적용됩니다. 🎜

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

🎜위의 실행 결과에서 다음과 같은 결론을 내릴 수 있습니다. 🎜

• NaN과 NaN은 동일하지 않지만 Set<에서는 / <code>Set 컬렉션에는
• undefinity 및 Infinity가 하나만 있습니다.
>

🎜본 글에서는 기본 Set의 사용법을 소개하지 않습니다. mozilla 웹사이트. 🎜

Set을 사용해야 하는 경우🎜

🎜특정 목록을 비교하여 동일한지 확인해야 하는 경우 Set를 사용하면 됩니다. , 다음과 같이 적용 가능한 경우, 주로 데이터의 집합 연산을 설명합니다. 🎜

• 두 집합의 합집합 가져오기합집합
• 두 집합의 차이 가져오기 차이
• 두 세트의 교차점 가져오기 교차점
• 두 세트의 대칭 차이 가져오기 intersectionDifference</ code ></li><li>두 집합이 하위 집합인지 확인<code>isSubset
• 두 집합이 상위 집합인지 확인isSuperset

🎜다음에서는 이 세 가지 경우를 사용하여 Set의 관련 작업을 소개합니다. 🎜

Set 연산 🎜

🎜수학에서 집합에 관해 이야기할 때마다 수행할 수 있는 연산이 몇 가지 있는데, 실제로는 Set</code)입니다. >는 수학적 유한 집합의 컴퓨터 구현입니다. 🎜🎜코드의 <code>Set 작업을 더 잘 보여주기 위해 샘플 코드에서는 Javascript Set를 확장하여 해당 속성과 메서드를 상속하고 다른 메서드를 추가합니다. 🎜

🎜예제 코드에서는 비어 있지 않은 유효한 컬렉션인지 확인하기 위해 간단한 방법만 사용했습니다. 🎜

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

🎜Unionunion🎜🎜🎜union 작업은 여러 Set 개체를 병합하고 병합된 결과를 반환합니다. 구현에서는 현재 세트와 지정된 세트를 배열로 병합하고 이를 생성하여 새 세트를 반환합니다. 🎜

class StaticSet extends SetHelper {
    constructor(items) {
        super(items);

        this.add = undefined;
        this.delete = undefined;
        this.clear = undefined;
    }
}

🎜차이 집합차이🎜🎜🎜차이 작업은 한 집합에만 포함되고 다른 집합 요소에는 포함되지 않는 새 집합을 반환합니다. 즉, 차이 세트의 수학적 개념. 🎜

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 ]

🎜Intersection intersection🎜🎜🎜intersection 작업은 두 컬렉션에 공통된 요소만 포함하는 새 컬렉션을 반환합니다. 구현은 더 작은 컬렉션을 반복하고(불필요한 검사를 피함) 각 항목이 더 큰 컬렉션에 존재하는지 확인하고 이를 교차점에 추가합니다. 이는 순회가 완료된 후 반환됩니다. 🎜rrreee🎜대칭 차이 집합 intersectionDifference🎜🎜🎜intersectionDifference 작업은 교차점이 없는 두 집합의 모든 요소를 ​​포함하는 새 집합을 반환합니다. 🎜rrreee🎜하위 집합 하위 집합🎜🎜

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 和 Array 相互转换很简单，因此可以用到 Array 的场合可以优先考虑一下 Set ，因为在内存使用上， Set 比 Array 占用更少。

更多编程相关知识，请访问：编程视频！！

위 내용은 JavaScript에서 설정이란 무엇입니까? 언제 사용하나요? 사용하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!