CodeGym /Cours /Frontend SELF FR /Nouvelles structures de données: Map, Set

Nouvelles structures de données: Map, Set

Frontend SELF FR
Niveau 45 , Leçon 2
Disponible

3.1 Collection Map

Dans ECMAScript 2015 (ES6) en JavaScript, deux nouvelles structures de données ont été ajoutées : Map et Set. Ces structures de données offrent des moyens plus flexibles et efficaces pour stocker et gérer des collections de données par rapport aux objets et tableaux traditionnels.

Map est une structure de données qui permet de stocker des paires clé-valeur, où les clés peuvent être de n'importe quel type, y compris les objets et fonctions.

1. Création et initialisation de Map :

JavaScript
    
      const map = new Map();
    
  

2. Ajout d'éléments :

La méthode set est utilisée pour ajouter de nouvelles paires clé-valeur dans Map.

JavaScript
    
      map.set('key1', 'value1');
      map.set(2, 'value2');
      map.set({ name: 'objectKey' }, 'value3');
    
  

3. Récupération d'éléments :

La méthode get est utilisée pour obtenir la valeur par clé.

JavaScript
    
      const map = new Map();

      map.set('key1', 'value1');
      map.set(2, 'value2');
      map.set({ name: 'objectKey' }, 'value3');

      console.log(map.get('key1')); // 'value1'
      console.log(map.get(2)); // 'value2'
    
  

4. Vérification de la présence d'une clé :

La méthode has vérifie si une clé existe dans Map.

JavaScript
    
      const map = new Map();

      map.set('key1', 'value1');
      map.set(2, 'value2');
      map.set({ name: 'objectKey' }, 'value3');

      console.log(map.has('key1')); // true
      console.log(map.has('key3')); // false
    
  

5. Suppression d'éléments :

La méthode delete supprime un élément par clé.

JavaScript
    
      const map = new Map();

      map.set('key1', 'value1');
      map.set(2, 'value2');
      map.set({ name: 'objectKey' }, 'value3');

      map.delete('key1');
      console.log(map.has('key1')); // false
    
  

6. Nettoyage de Map :

La méthode clear supprime tous les éléments de Map.

JavaScript
    
      const map = new Map();

      map.set('key1', 'value1');
      map.set(2, 'value2');
      map.set({ name: 'objectKey' }, 'value3');

      map.clear();
      console.log(map.size); // 0
    
  

7. Itération sur Map :

Vous pouvez utiliser la boucle for...of pour itérer sur Map.

Exemple :

JavaScript
    
      const map = new Map();
      map.set('key1', 'value1');
      map.set(2, 'value2');

      for (const [key, value] of map) {
        console.log(`${key}: ${value}`);
      }

      // 'key1: value1'
      // '2: value2'
    
  

3.2 Collection Set

Set est une structure de données qui permet de stocker des valeurs uniques de n'importe quel type, y compris les objets et les primitifs.

1. Création et initialisation de Set :

JavaScript
    
      const set = new Set();
    
  

2. Ajout d'éléments :

La méthode add est utilisée pour ajouter de nouvelles valeurs dans Set.

JavaScript
    
      set.add(1);
      set.add('value2');
      set.add({ name: 'objectValue' });
    
  

3. Vérification de la présence d'une valeur :

La méthode has vérifie si une valeur existe dans Set.

JavaScript
    
      const set = new Set();

      set.add(1);
      set.add('value2');
      set.add({ name: 'objectValue' });

      console.log(set.has(1)); // true
      console.log(set.has('value3')); // false
    
  

4. Suppression d'éléments :

La méthode delete supprime une valeur de Set.

JavaScript
    
      const set = new Set();

      set.add(1);
      set.add('value2');
      set.add({ name: 'objectValue' });

      set.delete(1);
      console.log(set.has(1)); // false
    
  

5. Nettoyage de Set :

La méthode clear supprime tous les éléments de Set.

JavaScript
    
      const set = new Set();

      set.add(1);
      set.add('value2');
      set.add({ name: 'objectValue' });

      set.clear();
      console.log(set.size); // 0
    
  

6. Itération sur Set :

Vous pouvez utiliser la boucle for...of pour itérer sur Set.

JavaScript
    
      const set = new Set();
      set.add(1);
      set.add('value2');

      for (const value of set) {
        console.log(value);
      }

      // 1
      // 'value2'
    
  

3.3 Comparaison entre Map et Set

Avantages de Map :

  1. Clés arbitraires : dans Map, les clés peuvent être de n'importe quel type, y compris les objets et les fonctions, contrairement aux objets où les clés peuvent être uniquement des chaînes ou des symboles.
  2. Éléments ordonnés : les éléments dans Map conservent l'ordre d'ajout, ce qui facilite l'itération dans l'ordre d'insertion.
  3. Taille de la collection : la méthode size permet d'obtenir rapidement le nombre d'éléments dans Map.

Avantages de Set :

  1. Valeurs uniques : Set garantit automatiquement que tous ses éléments sont uniques.
  2. Éléments ordonnés : les éléments dans Set conservent l'ordre d'ajout, ce qui facilite l'itération dans l'ordre d'insertion.
  3. Opérations optimisées : Set fournit des méthodes optimisées pour l'ajout, la suppression et la vérification de présence d'éléments.

Exemples pratiques

Exemple d'utilisation de Map pour stocker des informations sur les utilisateurs :

JavaScript
    
      const users = new Map();
      users.set(1, { name: 'Alice', age: 25 });
      users.set(2, { name: 'Bob', age: 30 });

      for (const [id, user] of users) {
        console.log(`User ID: ${id}, Name: ${user.name}, Age: ${user.age}`);
      }

      // User ID: 1, Name: Alice, Age: 25
      // User ID: 2, Name: Bob, Age: 30
    
  

Exemple d'utilisation de Set pour filtrer les valeurs uniques :

JavaScript
    
      const numbers = [1, 2, 3, 1, 2, 4, 5, 3];
      const uniqueNumbers = new Set(numbers);

      for (const number of uniqueNumbers) {
        console.log(number);
      }

      // 1
      // 2
      // 3
      // 4
      // 5
    
  
Commentaires
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION