Ensembles JavaScript


Table des matières

    Afficher la table des matières

Un ensemble JavaScript est une collection de valeurs uniques.

Chaque valeur ne peut apparaître qu'une seule fois dans un ensemble.

Un Set peut contenir n’importe quelle valeur de n’importe quel type de données.

Définir les méthodes

new Set()

Crée un nouvel ensemble

add()

Ajoute un nouvel élément à l'ensemble

delete()

Supprime un élément d'un ensemble

has()

Renvoie vrai si une valeur existe

clear()

Supprime tous les éléments d'un ensemble

forEach()

Appelle un rappel pour chaque élément

values()

Renvoie un itérateur avec toutes les valeurs d'un ensemble

keys()

Identique aux valeurs()

entries()

Renvoie un itérateur avec les paires [valeur, valeur] d'un ensemble

size

Renvoie les éléments numériques dans un ensemble


Comment créer un ensemble

Vous pouvez créer un ensemble JavaScript en :

  • Passer un tableau à new Set()

  • Créez un nouvel ensemble et utilisez add() pour ajouter des valeurs

  • Créez un nouvel ensemble et utilisez add() pour ajouter des variables


La nouvelle méthode Set()

Passez un Array au constructeur new Set() :

Exemple

// Create a Set
const letters = new Set(["a","b","c"]);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Create a Set from an Array:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

Créez un ensemble et ajoutez des valeurs littérales :

Exemple

// Create a Set
const letters = new Set();

// Add Values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Add values to a Set:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set();

// Add Values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

Créez un ensemble et ajoutez des variables :

Exemple

// Create Variables
const a = "a";
const b = "b";
const c = "c";

// Create a Set
const letters = new Set();

// Add Variables to the Set
letters.add(a);
letters.add(b);
letters.add(c);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Add variables to a Set:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set();

// Create Variables
const a = "a";
const b = "b";
const c = "c";

// Add the Variables to the Set
letters.add(a);
letters.add(b);
letters.add(c);

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

La méthode add()

Exemple

letters.add("d");
letters.add("e");

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Adding new elements to a Set:</p>

<p id="demo"></p>

<script>
// Create a new Set
const letters = new Set(["a","b","c"]);

// Add a new Element
letters.add("d");
letters.add("e");

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

Si vous ajoutez des éléments égaux, seul le premier sera enregistré :

Exemple

letters.add("a");
letters.add("b");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Adding equal elements to a Set:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set();

// Add values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>


La méthode forEach()

La méthode forEach() appelle une fonction pour chaque élément Set :

Exemple

// Create a Set
const letters = new Set(["a","b","c"]);

// List all entries
let text = "";
letters.forEach (function(value) {
  text += value;
})

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>forEach() calls a function for each element:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// List all Elements
let text = "";
letters.forEach (function(value) {
  text += value + "<br>";
})

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

La méthode values()

La méthode values() renvoie un objet Iterator contenant toutes les valeurs d'un Set :

Exemple

letters.values()   // Returns [object Set Iterator]

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Set.values() returns a Set Iterator:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// Display set.size
document.getElementById("demo").innerHTML = letters.values();
</script>

</body>
</html>

Vous pouvez maintenant utiliser l'objet Iterator pour accéder aux éléments :

Exemple

// Create an Iterator
const myIterator = letters.values();

// List all Values
let text = "";
for (const entry of myIterator) {
  text += entry;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Iterating Set values:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// List all Elements
let text = "";
for (const x of letters.values()) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

La méthode keys()

Un ensemble n'a pas de clés.

keys() renvoie la même chose que valeurs().

Cela rend les ensembles compatibles avec Maps.

Exemple

letters.keys()   // Returns [object Set Iterator]

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Set.keys() returns a Set Iterator:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// Display set.size
document.getElementById("demo").innerHTML = letters.keys();
</script>

</body>
</html>

La méthode entries()

Un ensemble n'a pas de clés.

entries() renvoie les paires [valeur, valeur] au lieu des paires [clé, valeur].

Cela rend les ensembles compatibles avec Maps :

Exemple

// Create an Iterator
const myIterator = letters.entries();

// List all Entries
let text = "";
for (const entry of myIterator) {
  text += entry;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>entries() Returns an Iterator with [value,value] pairs from a Set:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set(["a","b","c"]);

// List all entries
const iterator = letters.entries();
let text = "";
for (const entry of iterator) {
  text += entry + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Les ensembles sont des objets

Pour un Set, typeof renvoie l'objet :

typeof letters;      // Returns object

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets Objects</h2>
<p>The typeof operator returns object:</p>

<p id="demo"></p>

<script>
// Create a new Set
const letters = new Set(["a","b","c"]);

// Display typeof
document.getElementById("demo").innerHTML = typeof letters;
</script>

</body>
</html>

Pour un Set, instanceof Set renvoie true :

letters instanceof Set;  // Returns true

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>The instanceof operator returns true:</p>

<p id="demo"></p>

<script>
// Create a new Set
const letters = new Set(["a","b","c"]);

// Display typeof
document.getElementById("demo").innerHTML = letters instanceof Set;
</script>

</body>
</html>