JavaScript - L'Objet Maps

Bienvenue, futurs programmeurs ! Aujourd'hui, nous allons plonger dans le monde fascinant des Maps de JavaScript. En tant que votre gentil voisin enseignant en informatique, je suis excité de vous guider dans cette aventure. Alors, mettez vos casques de pensée virtuels et partons ensemble dans cette aventure !

JavaScript - Maps

Qu'est-ce qu'une Map ?

Avant de rentrer dans les détails, comprenons ce qu'est une Map. Imaginez que vous avez une boîte magique où vous pouvez mettre une clé et obtenir instantanément une valeur correspondante. C'est essentiellement ce qu'est une Map en JavaScript - une collection de paires clé-valeur où les clés et les valeurs peuvent être de n'importe quel type. Génial, non ?

Syntaxe

La syntaxe de base pour créer une Map est assez simple :

let maMap = new Map();

Ici, nous créons un nouvel objet Map et l'assignons à la variable maMap. C'est comme ouvrir cette boîte magique dont nous avons parlé plus tôt !

Paramètres

Lors de la création d'une Map, vous pouvez optionnellement passer un objet itérable (comme un tableau) contenant des paires clé-valeur :

let maMap = new Map([
['cle1', 'valeur1'],
['cle2', 'valeur2']
]);

Dans cet exemple, nous créons une Map avec deux paires clé-valeur dès le départ. C'est comme pré-charger notre boîte magique avec quelques trésors !

Propriétés des Maps

Les Maps possèdent une propriété pratique :

Propriété	Description
size	Retourne le nombre de paires clé-valeur dans la Map

Voyons cela en action :

let maMap = new Map([
['pommes', 5],
['bananes', 3],
['oranges', 2]
]);

console.log(maMap.size); // Output : 3

Dans cet exemple fruité, notre Map a 3 paires clé-valeur, donc size retourne 3. C'est comme compter combien de compartiments sont remplis dans notre boîte magique !

Méthodes des Maps

Les Maps sont équipées de plusieurs méthodes utiles. Voyons-les dans un tableau :

Méthode	Description
set()	Ajoute une nouvelle paire clé-valeur à la Map
get()	Retourne la valeur associée à une clé
has()	Vérifie si une clé existe dans la Map
delete()	Supprime une paire clé-valeur de la Map
clear()	Supprime toutes les paires clé-valeur de la Map

Maintenant, voyons ces méthodes en action avec quelques exemples !

Méthode set()

let mapAnimaux = new Map();

mapAnimaux.set('chien', 'Buddy');
mapAnimaux.set('chat', 'Whiskers');
mapAnimaux.set('poisson', 'Nemo');

console.log(mapAnimaux);
// Output : Map(3) { 'chien' => 'Buddy', 'chat' => 'Whiskers', 'poisson' => 'Nemo' }

Dans cet exemple, nous ajoutons des animaux et leurs noms à notre Map. C'est comme étiqueter différents compartiments dans notre boîte magique !

Méthode get()

console.log(mapAnimaux.get('chien')); // Output : Buddy
console.log(mapAnimaux.get('éléphant')); // Output : undefined

Ici, nous récupérons des valeurs en utilisant des clés. Quand nous demandons 'chien', nous obtenons 'Buddy'. Mais quand nous demandons 'éléphant', qui n'existe pas dans notre Map, nous obtenons undefined. C'est comme reaching into our magical box and either finding something or coming up empty-handed!

Méthode has()

console.log(mapAnimaux.has('chat')); // Output : true
console.log(mapAnimaux.has('éléphant')); // Output : false

La méthode has() vérifie si une clé existe dans notre Map. C'est comme demander à notre boîte magique, "As-tu un compartiment étiqueté 'chat' ?"

Méthode delete()

mapAnimaux.delete('poisson');
console.log(mapAnimaux);
// Output : Map(2) { 'chien' => 'Buddy', 'chat' => 'Whiskers' }

Ici, nous supprimons l'entrée 'poisson' de notre Map. Pauvre Nemo !

Méthode clear()

mapAnimaux.clear();
console.log(mapAnimaux); // Output : Map(0) {}

La méthode clear() vide notre Map entièr. C'est comme vidanger tout ce qui se trouve dans notre boîte magique !

Constructeur de Map JavaScript

Le constructeur Map peut créer un nouvel objet Map :

let nouvelleMap = new Map();

Vous pouvez également initialiser une Map avec un itérable :

let mapInitiale = new Map([
['cle1', 'valeur1'],
['cle2', 'valeur2']
]);

C'est comme setting up our magical box with some initial compartments and items!

Exemples

Mettons tout cela ensemble avec un exemple amusant. Imaginez que nous suivons les scores d'un tournoi de jeu vidéo :

let scoresJeu = new Map();

// Ajout de scores
scoresJeu.set('Alice', 1000);
scoresJeu.set('Bob', 850);
scoresJeu.set('Charlie', 1200);

console.log(scoresJeu);
// Output : Map(3) { 'Alice' => 1000, 'Bob' => 850, 'Charlie' => 1200 }

// Mise à jour d'un score
scoresJeu.set('Bob', 900);

// Vérification si un joueur existe
console.log(scoresJeu.has('David')); // Output : false

// Récupération du score d'un joueur
console.log(scoresJeu.get('Charlie')); // Output : 1200

// Suppression d'un joueur
scoresJeu.delete('Alice');

console.log(scoresJeu);
// Output : Map(2) { 'Bob' => 900, 'Charlie' => 1200 }

// Récupération du nombre de joueurs
console.log(scoresJeu.size); // Output : 2

Dans cet exemple, nous utilisons notre Map comme un tableau de scores. Nous pouvons ajouter des joueurs, mettre à jour les scores, vérifier si un joueur existe, récupérer leur score, supprimer des joueurs et vérifier combien de joueurs nous avons. C'est comme avoir un tableau de scores magique que nous pouvons manipuler avec facilité !

Map vs. Object en JavaScript

Vous vous demandez peut-être, "Pourquoi utiliser une Map alors que nous avons des Objects en JavaScript ?" Excellent pregunta ! Comparons-les :

Types de Clés : Les Objects n'acceptent que des clés de type chaîne ou symbole, tandis que les Maps acceptent tout type de clé (même des objects !).
Ordre : Les Maps conservent l'ordre d'insertion des éléments, tandis que les Objects ne garantissent aucun ordre.
Taille : Vous pouvez facilement obtenir la taille d'une Map en utilisant la propriété size, tandis que pour les Objects, vous devez manuellement compter les propriétés.
Performance : Les Maps sont plus performantes dans des scénarios impliquant des ajouts et suppressions fréquents de paires clé-valeur.

Voici un exemple rapide pour illustrer :

let obj = {
'cle chaîne' : 'valeur chaîne',
1 : 'valeur nombre',
[{}]: 'cle object' // Cela devient '[object Object]'
};

let map = new Map([
['cle chaîne', 'valeur chaîne'],
[1, 'valeur nombre'],
[{}, 'cle object'] // Cela fonctionne comme prévu
]);

console.log(Object.keys(obj).length); // Output : 3
console.log(map.size); // Output : 3

console.log(obj['[object Object]']); // Output : 'cle object'
console.log(map.get({})); // Output : undefined (parce qu'il s'agit d'un object différent)

Dans cet exemple, nous voyons comment les Maps gèrent les différents types de clé plus gracieusement que les Objects. C'est comme avoir une boîte magique plus flexible et puissante !

Et voilà, les amis ! Nous avons voyagé à travers le pays des Maps de JavaScript, de leur création à leur manipulation, et même en les comparant avec leur cousin, l'Object. J'espère que cette boîte de connaissances magique a été aussi amusante à explorer pour vous qu'elle l'a été pour moi à partager. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec les Maps dans votre propre code. Bonne programmation, et que votre code soit toujours exempt de bugs !

Credits: Image by storyset