Cartes JavaScript


Table des matières

    Afficher la table des matières

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.

Méthodes cartographiques essentielles

new Map()

Crée une nouvelle carte

set()

Définit la valeur d'une clé dans une carte

get()

Obtient la valeur d'une clé dans une carte

delete()

Supprime un élément Map spécifié par la clé

has()

Renvoie vrai si une clé existe dans une carte

forEach()

Appelle une fonction pour chaque paire clé/valeur dans une carte

entries()

Renvoie un itérateur avec les paires [key, value] dans une Map

size

Renvoie le nombre d'éléments dans une carte


Comment créer une carte

Vous pouvez créer une carte JavaScript en :

  • Passer un tableau à new Map()

  • Créez une carte et utilisez Map.set()


La méthode new Map()

Vous pouvez créer une Map en passant un Array au constructeur new Map() :

Exemple

// 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>


La méthode set()

Vous pouvez ajouter des éléments à une Map avec la méthode set() :

Exemple

// 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 :

Exemple

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>


La méthode get()

La méthode get() récupère la valeur d'une clé dans une Map :

Exemple

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>



La propriété size

La propriété size renvoie le nombre d'éléments dans une Map :

Exemple

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>


La méthode delete()

La méthode delete() supprime un élément Map :

Exemple

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>


La méthode has()

La méthode has() renvoie true si une clé existe dans une Map :

Exemple

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>

Essaye ça:

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>


Objets JavaScript et cartes

Différences entre les objets JavaScript et les cartes :

Objet

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

Carte

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


La méthode forEach()

La méthode forEach() appelle une fonction pour chaque paire clé/valeur dans une Map :

Exemple

// 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>

La méthode entries()

La méthode entries() renvoie un objet itérateur avec la [clé, valeurs] dans une Map :

Exemple

// 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>

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