Map
Dictionnaire en JavaScript: Map
Pour plus d'information, vous pouvez vous référer à cette page: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Map
Les maps sont des dictionnaires, on associe une clef à une valeur comme on associe un mot d'un dictionnaire à une définition. La différence avec les Array est que l'on accède à une case par la clef au lieu de l'index.
Par exemple, si j'ai les couples (clef, serrure) (chat, chien) (imagination, créativité), je peux récupérer "serrure" avec "clef", je peux récupérer "chien" avec "chat", et "créativité" avec "imagination".
Créer une Map en JavaScript
Déclaration
const myMap = new Map();
Ajouter des "couples" clef-valeur
Si une variable myMap est une Map:
myMap.set(clef, valeur);
Exemple:
Voici un exemple de maps avec deux cours stocké dans la variable coursProg
const coursProg= new Map();
coursProg.set("cours1", "Langage du web");
coursProg.set("cours2", "Algorithmique");
Voici un exemple de Map où le nom permet de récupérer le prénom stocké dans la variable prenoms:
const prenoms= new Map();
prenoms.set("Thevin", "Lauren");
prenom.set("Doe", "Jane");
prenoms.set("Smith", "Lee");
Exercice 1 : Création d'une Map
Question 1: Créer en Javascript une Map menu avec le nom de 5 plats et 5 prix
const menu=new Map();
menu.set("Raclette", "13,50 euros");
menu.set("Soupe de potiron", "8 euros");
menu.set("Pates bolognese", "11 euros");
menu.set("Salade de tomates", "7 euros");
menu.set("Crème brulée", "6,50 euros");
Question 2: Créer en Javascript une Map distance avec 3 kilométrages pour aller de chez vous au campus, de chez-vous au supermarché et de chez-vous à la mer, avec comme clef le nom du trajet
const distance=new Map();
distance.set("Campus", 25);
distance.set("Supermarché", 0.3);
distance.set("Mer",1.2);
Récupérer les éléments d'une Map en Javascript
Récupérer un élément
Syntaxe
Si une variable maVariable contient une Map avec une clef maClef, on récupère la valeur comme ceci:
maVariable.get(maClef);
Exemples
Pour récupérer le nom du cours 2:
const coursProg= new Map();
coursProg.set("cours1", "Langage du web");
coursProg.set("cours2", "Algorithmique");
coursProg.get("cours2");
Pour récupérer le prénom à partir du nom de famille et l'afficher:
const prenoms= new Map();
prenoms.set("Thevin", "Lauren");
prenoms.set("Doe", "Jane");
prenoms.set("Smith", "Lee");
alert(prenoms.get("Thevin"));
let prenomDoe=prenoms.get("Doe");
alert(prenomDoe);
Afficher les éléments d'une Map
Si une variable myMap est une Map:
Afficher un par un:
for (const [key, value] of myMap) {
alert (key+" "+ value);
}
Afficher tout :
let maCollectionComplete="";
for (const [key, value] of myMap) {
maCollectionComplete+= key+" "+ value+" \n";
}
alert(maCollectionComplete);
Exercice 2 : Récuperer les valeurs d'une Map
Question 1: Afficher le prix d'un plat d'une Map menu avec le nom de 5 plats, en utilisant le nom du plat au choix comme clef
const menu=new Map();
menu.set("Raclette", "13,50 euros");
menu.set("Soupe de potiron", "8 euros");
menu.set("Pates bolognese", "11 euros");
menu.set("Salade de tomates", "7 euros");
menu.set("Crème brulée", "6,50 euros");
alert(menu.get("Soupe de potiron"))
Question 2: Afficher tous les plats d'une Map menu et leur prix (mettez au moins 5 plats dans la Map menu)
const menu=new Map();
menu.set("Raclette", "13,50 euros");
menu.set("Soupe de potiron", "8 euros");
menu.set("Pates bolognese", "11 euros");
menu.set("Salade de tomates", "7 euros");
menu.set("Crème brulée", "6,50 euros");
let maCollectionComplete="";
for (const [key, value] of menu) {
maCollectionComplete+= key+" "+ value+" \n";
}
alert(maCollectionComplete);
Question 3: Mettre dans une variable uneCertaineDistance un kilométrage à partir de la valeur d'une clef au choix de la Map distance (mettez au moins 3 kilométrages dans la Map distance)
const distance=new Map();
distance.set("Campus", 25);
distance.set("Supermarché", 0.3);
distance.set("Mer",1.2);
let uneCertaineDistance=distance.get("Mer");
Ajouter un élément ou supprimer un élément
Pour ajouter un élement à la fin d'une variable myMap qui est une Map, on utilise set tel que vu précédemment:
myMap.set(clef, valeur);
Pour supprimer un élement d'une Map myMap avec une clef clef:
myMap.delete(clef);
Pour "vider"une Map myMap de tous ses éléments:
myMap.clear();
Exercice 3 : Ajouter et supprimer les valeurs d'une Map
Question 1: Ajouter un sixième plat avec son prix dans une map menu avec 5 plats
const menu=new Map();
menu.set("Raclette", "13,50 euros");
menu.set("Soupe de potiron", "8 euros");
menu.set("Pates bolognese", "11 euros");
menu.set("Salade de tomates", "7 euros");
menu.set("Crème brulée", "6,50 euros");
menu.set("Omelette", "5 euros");
Question 2: Enlever un plat du menu dans une Map menu
const menu=new Map();
menu.set("Raclette", "13,50 euros");
menu.set("Soupe de potiron", "8 euros");
menu.set("Pates bolognese", "11 euros");
menu.set("Salade de tomates", "7 euros");
menu.set("Crème brulée", "6,50 euros");
menu.delete("Raclette");
Question 3: Effacer toutes le valeur de la Maps uneCertaineDistance et rajouter plusieurs nouveau couples trajets-kilométrage
const distance=new Map();
distance.set("Campus", 25);
distance.set("Supermarché", 0.3);
distance.set("Mer",1.2);
distance.clear();
distance.set("Travail", 25);
distance.set("Point de Vue", 0.3);
distance.set("Footing",1.2);
Modifier des valeurs
Syntaxe
Pour modifier des valeurs, il suffit de faire un set avec une clef existante. Par exemple, pour une Map uneMap qui a une clef clefNumeroUn, on fera :
uneMap.set("clefNumeroUn", "nouvelle valeur de la clef numéro1");
Exemples
Pour modifier la valeur du prénom avec le nom "Thévin":
const prenoms= new Map();
prenoms.set("Thevin", "Lauren"); //valeur 1: Lauren
prenoms.set("Doe", "Jane");
prenoms.set("Smith", "Lee");
prenoms.set("Thevin", "Simone"); //valeur 2: Simone
Exercice 4 : Modifier les valeurs d'une Map
Question 1: Modifier un des plats d'une Map menu avec le nom de 5 plats par la valeur "en rupture" à la place du prix
const menu=new Map();
menu.set("Raclette", "13,50 euros");
menu.set("Soupe de potiron", "8 euros");
menu.set("Pates bolognese", "11 euros");
menu.set("Salade de tomates", "7 euros");
menu.set("Crème brulée", "6,50 euros");
menu.set("Pates bolognese", "en rupture");
Question 2: changer un nom d'un étudiant (la clef), un prénom d'un autre (valeur) et l'ensemble nom prénom d'un autre (ensemble clef valeur)
const etudiants= new Map();
etudiants.set("Dupont", "Martine");
etudiants.set("Doe", "Jane" );
etudiants.set("Smith", "Williams");
etudiants.set("Dooe", etudiants.get("Doe"));
etudiants.delete("Doe");
etudiants.set("Dupont", "Lila");
etudiants.set("Smithy", "Guillaume");
etudiants.delete("Smith");
Autres points sur les Maps
Modifier la clef
Techniquement, on ne modifie pas la clef. Par exemple, pour modifier (clef1, valeur) par (clef2, valeur) il faut : ajouter avec un set une nouvelle association (clef2, valeur), puis supprimer (clef1, valeur).
Syntaxe
Pour modifier des valeurs, il suffit de faire un set avec une clef existante. Par exemple, pour une Map uneMap qui a une clef clefNumeroUn, on fera :
uneMap.set("clef1", "valeur de la clef numéro1");
uneMap.set("clef2", uneMap.get("clef1");
uneMap.delete("clef1");
Exemples
Pour modifier la valeur du prénom avec le nom "Thévin":
const prenoms= new Map();
prenoms.set("Thevin", "Lauren"); //clef 1: Thevin
prenoms.set("Doe", "Jane");
prenoms.set("Smith", "Lee");
prenoms.set("Niveht", prenoms.get("Thevin"); // j'insère une association avec une nouvelle clef et la même valeur
prenoms.delete("Thevin"); // j'efface l'association précédente
Cloner une Map
Pour cloner une map, il suffit d'utiliser new Map( ) avec la Map à cloner en argument.
Imaginons une Map maMap,
const cloneDeMaMap = new Map(maMap);
Verifier si un clef est présente dans une Map
Pour verifier si une Map uneMap a une clef clefNumeroUn, on fera :
uneMap.has(clefNumeroUn); //renvoie true si cette clef existe dans cette Map, et renvoie false sinon
Connaitre le nombre d'associatuon clef/valeur une Map
Pour connaitre la taille d'un Map uneMap, c'est à dire le nombre d'association clef/valeur, on utilise size :
uneMap.size; //renvoie la taille de uneMap
`