💡 Maîtrisez l'objet Map en JavaScript : Astuces 🔥 et Bonnes Pratiques ✅

Introduction à l'objet Map en JavaScript : création de tableaux associatifs

Dans ce tutoriel, nous allons découvrir l’objet Map en JavaScript. Cet objet, introduit avec ES6 (2015), permet de créer des tableaux associatifs tout en garantissant l’ordre d’insertion des clés. Il offre des fonctionnalités avancées pour manipuler des paires clé-valeur avec une grande flexibilité.

Qu’est-ce qu’un objet Map ?

Un Map est une collection de paires clé-valeur, où :

• Les clés peuvent être de n’importe quel type (objets, fonctions, primitives, etc.).
• L’ordre des clés est garanti par leur insertion.

Création d’un Map

Pour créer un Map :

const map1 = new Map();

console.log(map1.size); // Affiche 0

Ajout de paires clé-valeur avec set

La méthode set permet d’ajouter ou de mettre à jour des paires clé-valeur.

map1.set('a', 'Bonjour');

map1.set('b', 'Au revoir');

console.log(map1.size); // Affiche 2

console.log(map1); 

// Map(2) { 'a' => 'Bonjour', 'b' => 'Au revoir' }

Accès aux valeurs avec get

Pour récupérer la valeur associée à une clé :

console.log(map1.get('a')); // Affiche "Bonjour"

Suppression et vérification de clés

• Supprimer une clé :

map1.delete('a');

console.log(map1.size); // Affiche 1

• Vérifier l’existence d’une clé :

console.log(map1.has('b')); // Affiche true

console.log(map1.has('a')); // Affiche false

Différence clé entre Map et un objet classique

Contrairement aux objets {}, un Map :

• Accepte des clés non primitives (objets, fonctions, etc.).
• Maintient l’ordre des clés.

Itération sur un Map

Vous pouvez itérer sur les clés, valeurs ou entrées :

Itérer sur les entrées :

for (const [key, value] of map1.entries()) {

    console.log(`${key}: ${value}`);

}

Itérer uniquement sur les clés :

for (const key of map1.keys()) {

    console.log(key);

}

Itérer uniquement sur les valeurs :

for (const value of map1.values()) {

    console.log(value);

}

Exemple pratique : Map imbriqué

Les Map peuvent être imbriqués pour représenter des structures complexes, comme des clients avec des informations détaillées :

Création d’un Map de clients :

const customers = new Map();



const customer1 = new Map();

customer1.set('firstName', 'Bernard');

customer1.set('lastName', 'Dupont');



const customer2 = new Map();

customer2.set('firstName', 'Gilles');

customer2.set('lastName', 'Durand');



customers.set('client1', customer1);

customers.set('client2', customer2);



console.log(customers);

Itération sur les clients :

for (const [key, customerMap] of customers.entries()) {

    console.log(`${key}: ${customerMap.get('firstName')} ${customerMap.get('lastName')}`);

}

// Résultat :

// client1: Bernard Dupont

// client2: Gilles Durand

Utilisation avancée : transformation et exportation

Un Map peut être converti en tableau ou JSON :

const mapToArray = Array.from(customers.entries());

console.log(mapToArray);



const mapToObject = Object.fromEntries(customers);

console.log(JSON.stringify(mapToObject));

Conclusion

L’objet Map est un outil puissant pour gérer des données structurées sous forme de paires clé-valeur. Il est idéal pour les tableaux associatifs avec des clés non primitives, tout en offrant des méthodes robustes pour l’itération et la manipulation.

console.log(map1.has('b')); // Affiche true

console.log(map1.has('a')); // Affiche false

map1.delete('a');

console.log(map1.size); // Affiche 1

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat.