Maison > interface Web > js tutoriel > Qu'est-ce qui est défini en JavaScript ? Quand l'utiliser ? Comment utiliser ?

Qu'est-ce qui est défini en JavaScript ? Quand l'utiliser ? Comment utiliser ?

青灯夜游
Libérer: 2021-07-22 09:43:07
avant
5340 Les gens l'ont consulté

Javascript nécessite l'utilisation de Set dans certains cas. L'article suivant vous amènera à comprendre Set, à présenter ce qu'est Set, quand utiliser Set et les opérations sur les données de Set (intersection, ensemble de différences, intersection, ensemble de différences symétriques).

Qu'est-ce qui est défini en JavaScript ? Quand l'utiliser ? Comment utiliser ?

Dans de nombreux cas, il est nécessaire de comparer plusieurs listes et d'obtenir si elles ont une intersection ou une différence, etc. Il existe un type de données en Javascript qui peut bien répondre à ces besoins, c'est-à-dire Set .

SetUn objet est comme un tableau, mais ne contient que des éléments uniques. SetUn objet est une collection de valeurs et ses éléments peuvent être itérés par ordre d'insertion. Les éléments de Set n'apparaîtront qu'une seule fois, c'est-à-dire que les éléments de Set sont uniques.

L'adresse du code impliquée dans l'article : https://codepen.io/quintiontang/pen/rNmNbbY

Qu'est-ce que Set

Set Un objet est une collection de valeurs, et ses éléments peuvent être itérés dans l'ordre d'insertion. Il n'apparaîtra qu'une seule fois, c'est-à-dire que Set est un ensemble de valeurs uniques qui sont stockées sans ordre particulier. Contrairement à d'autres types de collections tels que les piles, les files d'attente et les tableaux, les ensembles peuvent être utilisés pour des comparaisons de listes et pour détecter la présence d'un élément dans un ensemble.

Set est un type de données abstrait défini par son comportement, similaire aux structures de données de pile et de file d'attente. Ceci est similaire à key-key en raison des propriétés de Map.

Javascript Set

Set en Javascript est très basique et simple, il ne fournit pas de fonctionnalité générale de manipulation d'ensembles comme les autres langages. Il utilise un algorithme unique (non basé sur une égalité stricte ===) pour détecter si les éléments sont identiques.

Cela signifie que le stockage de undefined, null et NaN dans une collection ne sera stocké qu'une seule fois, même pour NaN !== NaN, ce qui s'applique généralement au stockage de types d'objets.

const setTest = new Set([0, -0, Infinity,null, undefined, null, NaN, NaN, Infinity,null]);
console.log(setTest);  // Set { 0, Infinity, null, undefined, NaN }
Copier après la connexion

Les conclusions suivantes peuvent être tirées des résultats d'exécution ci-dessus :

  • Bien que NaN et NaN ne soient pas égaux, il n'y aura qu'un Set
  • et undefined dans l'ensemble Infinity. En gros, il n'y en aura qu'un Set
  • .
L'utilisation de Set ne sera pas présentée dans cet article. Vous pouvez vous référer au site

mozilla.

Quand utiliser Set

Lorsque vous devez comparer des listes spécifiques et juger si elles sont égales, vous pouvez utiliser

Décrivons les occasions applicables, principalement les opérations d'ensemble dans les données : Set

    Obtenez deux ensembles. union de
  • union
  • Obtient la différence entre deux ensembles
  • difference
  • Obtient l'intersection de deux ensembles
  • intersection
  • Obtient la différence symétrique entre deux ensembles
  • intersectionDifference
  • Juge si deux ensembles sont des sous-ensembles
  • isSubset
  • Juge deux Si l'ensemble est un surensemble
  • isSuperset
Ce qui suit présentera les opérations liées de

dans ces trois situations. Set

OpérationsSet

En mathématiques, chaque fois que l'on parle d'ensembles, certaines opérations peuvent être effectuées. En fait,

est l'implémentation informatique d'ensembles mathématiques finis. Set

Afin de mieux démontrer les opérations

dans le code, l'exemple de code étendra Javascript Set pour hériter de ses propriétés et méthodes, et y ajoutera d'autres méthodes. Set

Pour l'exemple de code, seule une méthode simple est utilisée pour vérifier s'il s'agit d'une collection valide qui n'est pas vide. L'opération

class SetHelper extends Set {
    /**
     * 验证集合是否为有效集合
     * @param {*} set
     * @returns
     */
    _isValid = (set) => {
        return set && set instanceof Set && set.size > 0;
    };
}
Copier après la connexion

Union union

combinera plusieurs union objets et renverra le résultat combiné. L'implémentation fusionne l'ensemble actuel et l'ensemble donné dans un tableau et le crée, renvoyant ainsi un nouvel ensemble. Set

union(set) {
    if (!this._isValid(set)) return new SetHelper();
    return new SetHelper([...this, ...set]);
}
Copier après la connexion

Ensemble de différences difference

L'opération renverra un nouvel ensemble qui contient uniquement des éléments qui sont dans un ensemble et pas dans l'autre ensemble, c'est-à-dire le concept mathématique d'ensemble de différences. L'opération 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;
}
Copier après la connexion

intersection intersection

renvoie une nouvelle collection contenant uniquement des éléments communs aux deux collections. L'implémentation parcourra la plus petite collection (en évitant les vérifications inutiles) et vérifiera si chaque élément existe dans la plus grande collection et l'ajoutera à l'intersection, qui sera renvoyée une fois le parcours terminé. L'opération 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;
}
Copier après la connexion

Ensemble de différences symétriques intersectionDifference

renverra un nouvel ensemble contenant tous les éléments des deux ensembles qui n'ont pas d'intersection. intersectionDifference

intersectionDifference(set) {
    if (!this._isValid(set)) return new SetHelper();
    return new SetHelper([
        ...this.difference(set),
        ...set.difference(this),
    ]);
}
Copier après la connexion

sous-ensemble subset

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

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

超集 superset

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

isSuperset(set) {
    if (!this._isValidSet(set)) return false;
    return (
        this.size >= set.size && [...set].every((item) => this.has(item))
    );
}
Copier après la connexion

静态 Set

静态Set 是一个始终包含它初始化元素的集合,不能添加、删除、清除元素。Javascript Set 不是静态的,它总能在创建后可以公开修改该集合的方法,如 adddelete ,为避免集合被修改,可以创建一个新的 Set ,将其修改方法重置 。

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

        this.add = undefined;
        this.delete = undefined;
        this.clear = undefined;
    }
}
Copier après la connexion

使用

现在就可以使用上面定义的方法操作两个 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 ]
Copier après la connexion

总结

Set 不限于上面这些操作,之前有介绍过可以用来合并数组去重,由于 SetArray 相互转换很简单,因此可以用到 Array 的场合可以优先考虑一下 Set ,因为在内存使用上, SetArray 占用更少。

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers numéros
c++ appelle javascript
Depuis 1970-01-01 08:00:00
0
0
0
Qu’est-ce que le garbage collection JavaScript ?
Depuis 1970-01-01 08:00:00
0
0
0
Que sont les fonctions de hook JavaScript ?
Depuis 1970-01-01 08:00:00
0
0
0
Comment obtenir la date actuelle en JavaScript ?
Depuis 1970-01-01 08:00:00
0
0
0
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal