Cartes JavaScript
Une carte contient des paires clé-valeur où les clés peuvent être n'importe quel type de données.
Une carte se souvient de l'ordre d'insertion d'origine des clés.
Une carte a une propriété qui représente la taille de la carte.
Méthodes de carte
Méthode | La description |
---|---|
nouvelle carte() | Crée un nouvel objet Map |
ensemble() | Définit la valeur d'une clé dans une carte |
avoir() | Obtient la valeur d'une clé dans une carte |
dégager() | Supprime tous les éléments d'une carte |
effacer() | Supprime un élément Map spécifié par une clé |
a() | Renvoie true si une clé existe dans une Map |
pour chaque() | Invoque un rappel pour chaque paire clé/valeur dans un Map |
entrées() | Renvoie un objet itérateur avec les paires [clé, valeur] dans un Map |
clés() | Renvoie un objet itérateur avec les clés dans un Map |
valeurs() | Renvoie un objet itérateur des valeurs d'une Map |
Propriété | La description |
---|---|
Taille | Renvoie le nombre d'éléments Map |
Comment créer une carte
Vous pouvez créer une carte JavaScript en :
- Passer un tableau à
new Map()
- Créer une carte et utiliser
Map.set()
nouvelle carte()
Vous pouvez créer un Map en passant un Array au new Map()
constructeur :
Exemple
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
Map.set()
Vous pouvez ajouter des éléments à une Map avec la set()
méthode :
Exemple
// Create a Map
const fruits = new Map();
// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
La set()
méthode peut également être utilisée pour modifier les valeurs Map existantes :
Exemple
fruits.set("apples", 500);
Map.get()
La get()
méthode obtient la valeur d'une clé dans un Map :
Exemple
fruits.get("apples"); // Returns 500
Taille de la carte
La size
propriété renvoie le nombre d'éléments dans un Map :
Exemple
fruits.size;
Carte.delete()
La delete()
méthode supprime un élément Map :
Exemple
fruits.delete("apples");
Carte.clear()
La clear()
méthode supprime tous les éléments d'un Map :
Exemple
fruits.clear();
Map.has()
La has()
méthode renvoie true si une clé existe dans une Map :
Exemple
fruits.has("apples");
Essaye ça:
fruits.delete("apples");
fruits.has("apples");
Les cartes sont des objets
typeof
renvoie l'objet :
Exemple
// Returns object:
typeof fruits;
instanceof
La carte renvoie vrai :
Exemple
// Returns true:
fruits instanceof Map;
Objets JavaScript vs cartes
Différences entre les objets JavaScript et les cartes :
Objet | Carte | |
---|---|---|
Itérable | Pas directement itérable | Directement itérable |
Taille | Ne pas avoir de propriété de taille | Avoir une propriété de taille |
Types de clés | Les clés doivent être des chaînes (ou des symboles) | Les clés peuvent être n'importe quel type de données |
Commande de clé | Les clés ne sont pas bien ordonnées | Les clés sont classées par insertion |
Valeurs par défaut | Avoir des clés par défaut | Ne pas avoir de clés par défaut |
Map.forEach()
La forEach()
méthode invoque un rappel pour chaque paire clé/valeur dans un Map :
Exemple
// List all entries
let text = "";
fruits.forEach (function(value, key) {
text += key + ' = ' + value;
})
Map.keys()
La keys()
méthode renvoie un objet itérateur avec les clés dans un Map :
Exemple
// List all keys
let veggies = "";
for (const x of fruits.keys()) {
veggies += x;
}
Map.values()
La values
méthode renvoie un objet itérateur avec les valeurs d'un Map :
Exemple
// Sum all values
let total = 0;
for (const x of fruits.values()) {
total += x;
}
Map.entries()
La entries()
méthode renvoie un objet itérateur avec les [key,values] dans un Map :
Exemple
// List all entries
let text = "";
for (const x of fruits.entries()) {
text += x;
}
Objets en tant que clés
Pouvoir utiliser des objets comme clés est une fonctionnalité importante de Map.
Exemple
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Create a Map
const fruits = new Map();
// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
N'oubliez pas : la clé est un objet (pommes), pas une chaîne ("pommes") :
Exemple
fruits.get("apples"); // Returns undefined
Prise en charge du navigateur
Les cartes JavaScript sont prises en charge dans tous les navigateurs, à l'exception d'Internet Explorer :
Chrome | Edge | Firefox | Safari | Opera |