Comprendre les ensembles en JavaScript

Les ensembles, introduits avec ES6, constituent un ajout notable à JavaScript. Découvrons ensemble ce nouvel outil.

Mais que sont précisément les ensembles ?

Comment les intégrer dans vos projets JavaScript ?

Quelles sont les méthodes mises à disposition pour solutionner des problématiques ?

Ce tutoriel vous apportera toutes les réponses.

Les Ensembles

Un ensemble, comme son nom l'indique, est une collection regroupant des éléments uniques. Il n'autorise pas la duplication de valeurs.

En JavaScript, les ensembles préservent l'ordre d'insertion des éléments, ce qui les rend ordonnés. Ils sont capables de stocker des types de données primitifs et des objets.

Examinons maintenant la syntaxe pour créer des ensembles en JavaScript.

Je vous invite à utiliser votre IDE favori pour mettre en pratique les exemples suivants.

const noms = new Set(["Jean", "Henri", "Wick", "Jacques", "Henri"]);
console.log(noms);

const motAleatoire = new Set("Boonjouuur");
console.log(motAleatoire);

const nombres = new Set([5, 5, 5, 2, 1, 1, 2, 3]);
console.log(nombres);

Propriétés et Méthodes

Les ensembles offrent diverses propriétés et méthodes qui facilitent leur manipulation et l'application à différents problèmes. Ces outils sont intuitifs. Leur nom est souvent révélateur de leur fonctionnalité. Analysons-les un par un.

Taille

La propriété `size` permet de connaître le nombre d'éléments présents dans l'ensemble.

const noms = new Set(["Jean", "Henri", "Wick", "Jacques", "Henri"]);
console.log(`Taille: ${noms.size}`);

ajouter

La méthode `add` permet d'intégrer un nouvel élément à l'ensemble. Si l'élément existe déjà, il ne sera pas ajouté une seconde fois.

// ensemble vide
const noms = new Set();

noms.add("Jean");
noms.add("Henri");
noms.add("Wick");
noms.add("Jacques");
noms.add("Henri");

console.log(noms);

a

La méthode `has` vérifie l'existence d'un élément dans l'ensemble. Elle renvoie `true` s'il est présent et `false` dans le cas contraire.

const noms = new Set(["Jean", "Henri", "Wick", "Jacques", "Henri"]);

console.log(noms.has("Henri"));
console.log(noms.has("Alice"));

effacer

La méthode `delete` supprime l'élément spécifié de l'ensemble. Elle ne génère pas d'erreur si l'élément à supprimer n'existe pas.

const noms = new Set(["Jean", "Henri", "Wick", "Jacques", "Henri"]);

noms.delete("Jean");

console.log(noms);

entrées

La méthode `entries` renvoie un itérateur contenant des tableaux de paires clé-valeur, respectant l'ordre d'insertion. Dans le cas d'un ensemble, la clé et la valeur sont identiques.

const noms = new Set(["Jean", "Henri", "Wick", "Jacques", "Henri"]);

const entrees = noms.entries();

console.log(entrees.next().value);
console.log(entrees.next().value);
console.log(entrees.next().value);
console.log(entrees.next().value);
console.log(entrees.next().value);

clés

La méthode `keys` retourne un itérateur des éléments de l'ensemble, suivant l'ordre d'insertion.

const noms = new Set(["Jean", "Henri", "Wick", "Jacques", "Henri"]);

const cles = noms.keys();

console.log(cles.next().value);
console.log(cles.next().value);
console.log(cles.next().value);
console.log(cles.next().value);
console.log(cles.next().value);

valeurs

La méthode `values` fournit un itérateur d'éléments de l'ensemble, dans le même ordre que celui obtenu avec la méthode `keys`.

const noms = new Set(["Jean", "Henri", "Wick", "Jacques", "Henri"]);

const valeurs = noms.values();

console.log(valeurs.next().value);
console.log(valeurs.next().value);
console.log(valeurs.next().value);
console.log(valeurs.next().value);
console.log(valeurs.next().value);

dégager

La méthode `clear` efface tous les éléments de l'ensemble.

const noms = new Set(["Jean", "Henri", "Wick", "Jacques", "Henri"]);

noms.clear();

console.log(noms);

pour chaque

La méthode `forEach` permet de parcourir l'ensemble et d'accéder à chacun de ses éléments.

const noms = new Set(["Jean", "Henri", "Wick", "Jacques", "Henri"]);

noms.forEach((element) => {
   console.log(element);
});

Cas d'usage

Illustrons l'utilité des ensembles avec un exemple concret : la suppression des doublons dans un tableau. Les ensembles se révèlent particulièrement efficaces pour cette tâche.

Voici la démarche à suivre :

Initialisez un tableau avec des données, incluant des doublons.
Créez un ensemble vide.
Parcourez le tableau :
- Ajoutez chaque élément à l'ensemble.
- Les doublons seront automatiquement éliminés.

Instanciez un tableau vide.

Parcourez l'ensemble et ajoutez chaque élément au nouveau tableau.

Affichez le nouveau tableau, débarrassé des doublons.

J'espère que vous réussirez à mettre en place cette solution. Si vous rencontrez des difficultés, le code ci-dessous peut vous servir de référence.

const tab = ["Jean", "Henri", "Wick", "Jacques", "Henri"];

const ensembleTemporaire = new Set();

tab.forEach((element) => {
   ensembleTemporaire.add(element);
});

const nouveauTab = [];

ensembleTemporaire.forEach((element) => {
   nouveauTab.push(element);
});

console.log(nouveauTab);

En guise de conclusion

Vous avez désormais toutes les connaissances requises pour utiliser les ensembles en JavaScript. Intégrez-les à vos prochains développements. Profitez de chaque instant de votre apprentissage !

Bon code ! 👨‍💻