Une carte contient des paires clé-valeur où les clés peuvent être n'importe quel type de données.
Une carte mémorise l'ordre d'insertion d'origine des clés.
Crée une nouvelle carte
Définit la valeur d'une clé dans une carte
Obtient la valeur d'une clé dans une carte
Supprime un élément Map spécifié par la clé
Renvoie vrai si une clé existe dans une carte
Appelle une fonction pour chaque paire clé/valeur dans une carte
Renvoie un itérateur avec les paires [key, value] dans une Map
Renvoie le nombre d'éléments dans une carte
Vous pouvez créer une carte JavaScript en :
Passer un tableau à new Map()
Créez une carte et utilisez Map.set()
new Map()
Vous pouvez créer une Map en passant un Array au constructeur new Map()
:
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Creating a Map from an Array:</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
set()
Vous pouvez ajouter des éléments à une Map avec la méthode set()
:
// Create a Map
const fruits = new Map();
// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.set():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map();
// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
La méthode set()
peut également être utilisée pour modifier les valeurs Map existantes :
fruits.set("apples", 200);
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.set():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
fruits.set("apples", 200);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
get()
La méthode get()
récupère la valeur d'une clé dans une Map :
fruits.get("apples"); // Returns 500
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.get():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
size
La propriété size
renvoie le nombre d'éléments dans une Map :
fruits.size;
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.size:</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = fruits.size;
</script>
</body>
</html>
delete()
La méthode delete()
supprime un élément Map :
fruits.delete("apples");
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Deleting Map elements:</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
// Delete an Element
fruits.delete("apples");
document.getElementById("demo").innerHTML = fruits.size;
</script>
</body>
</html>
has()
La méthode has()
renvoie true si une clé existe dans une Map :
fruits.has("apples");
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.has():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = fruits.has("apples");
</script>
</body>
</html>
fruits.delete("apples");
fruits.has("apples");
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.has():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
// Delete an Element
fruits.delete("apples");
document.getElementById("demo").innerHTML = fruits.has("apples");
</script>
</body>
</html>
Itérable : Pas directement itérable
Taille : Ne possède pas de propriété de taille
Types de clés : les clés doivent être des chaînes (ou des symboles).
Ordre des clés : les clés ne sont pas bien ordonnées
Par défaut : Avoir des clés par défaut
Itérable : Directement itérable
Taille : avoir une propriété de taille
Types de clés : les clés peuvent être de n'importe quel type de données.
Ordre des clés : les clés sont classées par insertion
Par défaut : Ne dispose pas de clés par défaut
forEach()
La méthode forEach()
appelle une fonction pour chaque paire clé/valeur dans une Map :
// List all entries
let text = "";
fruits.forEach (function(value, key) {
text += key + ' = ' + value;
})
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.forEach():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
let text = "";
fruits.forEach (function(value, key) {
text += key + ' = ' + value + "<br>"
})
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
entries()
La méthode entries()
renvoie un objet itérateur avec la [clé, valeurs] dans une Map :
// List all entries
let text = "";
for (const x of fruits.entries()) {
text += x;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.entries():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
let text = "";
for (const x of fruits.entries()) {
text += x + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Les cartes JavaScript sont prises en charge dans tous les navigateurs, à l'exception d'Internet Explorer :
Chrome | Edge | Firefox | Safari | Opera |