Cartes JavaScript
L'objet Map
Une carte JavaScript est un objet qui peut stocker des collections de paires clé-valeur, similaire à un dictionnaire dans d'autres langages de programmation.
Les cartes diffèrent des objets standards en ce sens que les clés peuvent être de n'importe quel type de données .
Caractéristiques des cartes
-
Types de clés
Les clés des cartes peuvent être de n'importe quel type (chaînes, nombres, objets, etc.). -
Ordre d'insertion
La carte se souvient de l'ordre d'insertion original des clés. -
Taille
Le nombre d'éléments dans une carte est facilement récupérable en utilisant la propriété size. -
Performance
Les cartes sont optimisées pour des ajouts et des suppressions fréquents de paires clé-valeur. -
Itération
Les cartes sont itérables, permettant l'utilisation directe de boucles for...of ou de méthodes comme forEach(). -
Ordre d'itération
L'ordre original est préservé lors de l'itération.
Remarque
Les cartes sont similaires à la fois aux Objets (collection unique de clé/valeur) et aux Tableaux (collection de valeurs ordonnées).
Mais si vous regardez de près, les cartes sont les plus similaires aux Objets.
Comment créer une carte
Vous créez une carte JavaScript en :
- créant une nouvelle carte et ajoutant des éléments avec
Map.set() - passant un tableau existant au constructeur
new Map()
Exemples
Créez une nouvelle carte et ajoutez des éléments avec Map.set()
// Créer une carte vide
const fruits = new Map();
// Définir les valeurs de la carte
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
Passez un tableau au constructeur new Map() :
// Créer une carte
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
Ajout de valeurs à la carte
Vous pouvez ajouter des éléments à une carte avec la méthode set() :
Exemple
fruits.set("mangos", 100);
Changement des valeurs de la carte
La méthode set() peut également être utilisée pour changer les valeurs existantes de la carte :
Exemple
fruits.set("apples", 200); La méthode get()
La méthode get() obtient la valeur d'une clé dans une carte :
Exemple
fruits.get("apples"); // Renvoie 500
Les cartes sont des objets
Exemple
// Renvoie l'objet :
typeof fruits; instanceof Map renvoie true :
Exemple
// Renvoie true :
fruits instanceof Map; Objets JavaScript vs Cartes
Différences entre les objets JavaScript et les cartes :
| Objet | Carte |
|---|---|
| Pas directement itérable | Directement itérable |
| N'ont pas de propriété de taille | Ont une propriété de taille |
| Les clés doivent être des chaînes (ou des symboles) | Les clés peuvent être de n'importe quel type de données |
| Les clés ne sont pas bien ordonnées | Les clés sont ordonnées par insertion |
| Ont des clés par défaut | N'ont pas de clés par défaut |
En savoir plus :
Support des navigateurs
Map est une fonctionnalité ES6 .
ES6 est entièrement pris en charge dans tous les navigateurs modernes depuis juin 2017 :
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
| Mai 2016 | Avr 2017 | Juin 2017 | Sep 2016 | Juin 2016 |