10 méthodes de cartographie JavaScript que vous devriez maîtriser aujourd'hui

Une carte JavaScript est une collection qui stocke chacun de ses éléments sous la forme d'une paire clé-valeur. Ce type de données est également appelé tableau associatif ou dictionnaire.

Vous pouvez utiliser n'importe quel type de données (primitives et objets) en tant que clé ou valeur. L'objet Map se souvient de l'ordre d'insertion d'origine, bien que vous accédiez généralement aux valeurs par leur clé.

Dans cet article, vous découvrirez dix méthodes JavaScript Map que vous devez maîtriser dès aujourd'hui.

1. Comment créer une nouvelle carte en JavaScript

Vous pouvez créer un nouvel objet Map en utilisant le Carte() constructeur. Ce constructeur accepte un paramètre: un objet itérable dont les éléments sont des paires clé-valeur.

let mapObj = new Map([
[1966, 'Batman: Le Film'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman pour toujours'],
[2005, 'Batman Begins'],
[2008, 'Le chevalier noir'],
[2012, 'Le chevalier noir se lève']
]);
console.log (mapObj);

Sortir:

Carte (7) {
1966 => 'Batman: Le Film',





instagram viewer


1989 => 'Batman',
1992 => 'Le Retour de Batman',
1995 => 'Batman pour toujours',
2005 => 'Batman commence',
2008 => 'Le Chevalier Noir',
2012 => 'The Dark Knight Rises'
}

Si vous ne fournissez pas le paramètre, JavaScript créera une nouvelle carte vide.

let mapObj = new Map();
console.log (mapObj);

Sortir:

Carte (0) {}

Si vous essayez de créer une carte avec des clés en double, chaque clé répétée écrasera la valeur précédente avec la nouvelle valeur.

let mapObj = new Map([
['clé1', 'valeur1'],
['clé2', 'valeur2'],
['key2', 'newValue2']
]);
console.log (mapObj);

Sortir:

Carte (2) {
'key1' => 'value1',
'key2' => 'newValue2'
}

Ici, la valeur stockée par rapport au clé2 la clé est nouvelleValeur2, pas le plus tôt valeur2.

Vous pouvez également créer un objet Map qui contient des paires clé-valeur à l'aide de types de données mixtes.

let mapObj = new Map([
["chaîne1", 1],
[2, "chaîne2"],
["chaîne3", 433.234],
[23.56, 45]
]);
console.log (mapObj);

Sortir:

Carte (4) {
'chaîne1' => 1,
2 => 'chaîne2',
'string3' => 433.234,
23.56 => 45
}

2. Ajouter de nouveaux éléments à un objet cartographique

Vous pouvez ajouter un nouvel élément à l'objet Map en utilisant le ensemble() méthode. Cette méthode accepte une clé et une valeur, puis ajoute un nouvel élément à l'objet Map. La méthode renvoie ensuite le nouvel objet Map avec la valeur ajoutée. Si la clé existe déjà dans la carte, la nouvelle valeur remplacera la valeur existante.

let mapObj = new Map();
mapObj.set (1966, 'Batman: Le Film');
mapObj.set (1989, 'Batman');
mapObj.set (1992, 'Batman Returns');
mapObj.set (1995, 'Batman Forever');
console.log (mapObj);

Sortir:

Carte (4) {
1966 => 'Batman: Le Film',
1989 => 'Batman',
1992 => 'Le Retour de Batman',
1995 => 'Batman pour toujours'
}

Vous pouvez également utiliser des variables ou des constantes comme clés ou valeurs:

année const1 = 1966 ;
const movieName1 = 'Batman: le film';
soit année2 = 1989 ;
var movieName2 = 'Batman';
let mapObj = new Map();
mapObj.set (year1, movieName1) ;
mapObj.set (année2, movieName2) ;
console.log (mapObj);

Sortir:

Carte (2) {
1966 => 'Batman: Le Film',
1989 => 'Batman'
}

Les ensemble() la méthode prend en charge le chaînage.

let mapObj = new Map();
mapObj.set (1966, 'Batman: Le Film')
.set (1989, 'Batman')
.set (1992, 'Batman Returns')
.set (1995, 'Batman Forever');
console.log (mapObj);

Sortir:

Carte (4) {
1966 => 'Batman: Le Film',
1989 => 'Batman',
1992 => 'Le Retour de Batman',
1995 => 'Batman pour toujours'
}

3. Supprimer tous les éléments d'un objet cartographique

Vous pouvez supprimer tous les éléments d'un objet Map en utilisant le dégager() méthode. Cette méthode renvoie toujours indéfini.

let mapObj = new Map([
[1966, 'Batman: Le Film'],
[1989, 'Batman']
]);
console.log("Taille de l'objet Map: " + mapObj.size);
console.log (mapObj);
mapObj.clear();
console.log("Taille de l'objet Map après effacement des éléments: " + mapObj.size);
console.log (mapObj);

Sortir:

Taille de l'objet Map: 2
Carte (2) { 1966 => 'Batman: Le Film', 1989 => 'Batman' }
Taille de l'objet Map après effacement des éléments: 0
Carte (0) {}

4. Supprimer un élément spécifique d'une carte

Vous pouvez supprimer un élément spécifique d'un objet Map en utilisant le effacer() méthode. Cette méthode accepte la clé de l'élément à supprimer de la carte. Si la clé existe, la méthode renvoie vrai. Sinon, ça revient faux.

let mapObj = new Map([
[1966, 'Batman: Le Film'],
[1989, 'Batman']
]);
console.log("Carte initiale: ");
console.log (mapObj);
mapObj.delete (1966);
console.log("Carte après suppression de l'élément ayant pour clé 1966");
console.log (mapObj);

Sortir:

Carte initiale :
Carte (2) { 1966 => 'Batman: Le Film', 1989 => 'Batman' }
Carte après suppression de l'élément ayant pour clé 1966
Carte (1) { 1989 => 'Batman' }

5. Vérifier si un élément existe dans une carte

Vous pouvez vérifier si un élément existe dans un objet Map en utilisant le a() méthode. Cette méthode accepte la clé de l'élément comme paramètre pour tester la présence dans l'objet Map. Cette méthode renvoie vrai si la clé existe. Sinon, ça revient faux.

let mapObj = new Map([
[1966, 'Batman: Le Film'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman pour toujours'],
[2005, 'Batman Begins'],
[2008, 'Le chevalier noir'],
[2012, 'Le chevalier noir se lève']
]);
console.log (mapObj.has (1966));
console.log (mapObj.has (1977));

Sortir:

vrai
faux

Un élément avec clé 1966 existe dans l'objet Map, donc la méthode renvoyée vrai. Mais, comme il n'y a pas d'élément avec clé 1977 dans l'objet Map, la méthode renvoyée faux dès le deuxième appel.

En rapport: Qu'est-ce que JavaScript et comment ça marche ?

6. Accéder à la valeur d'une clé spécifique

Les avoir() La méthode renvoie un élément spécifique de l'objet Map. Cette méthode accepte la clé de l'élément comme paramètre. Si la clé existe dans l'objet Map, la méthode renvoie la valeur de l'élément. Sinon, ça revient indéfini.

let mapObj = new Map([
[1966, 'Batman: Le Film'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman pour toujours'],
[2005, 'Batman Begins'],
[2008, 'Le chevalier noir'],
[2012, 'Le chevalier noir se lève']
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

Sortir:

Batman: le film
indéfini

Un élément avec clé 1966 existe dans l'objet Map, la méthode a donc renvoyé la valeur de l'élément. Il n'y a pas d'élément avec clé 1988 dans l'objet Map, la méthode a donc renvoyé indéfini.

7. Accéder aux entrées d'une carte via un itérateur

Selon le fonctionnaire Documents Web MDN:

La méthode entry() renvoie un nouvel objet Iterator qui contient les paires [clé, valeur] pour chaque élément de l'objet Map dans l'ordre d'insertion. Dans ce cas particulier, cet objet itérateur est également itérable, donc la boucle for-of peut être utilisée. Lorsque le protocole [Symbol.iterator] est utilisé, il renvoie une fonction qui, lorsqu'elle est invoquée, renvoie cet itérateur lui-même.

Vous pouvez accéder à chaque élément de la carte en utilisant cet itérateur et un pour... de déclaration:

let mapObj = new Map([
[1966, 'Batman: Le Film'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman pour toujours'],
[2005, 'Batman Begins'],
[2008, 'Le chevalier noir'],
[2012, 'Le chevalier noir se lève']
]);
for (laissez l'entrée de mapObj.entries()) {
console.log (entrée);
}

Sortir:

[ 1966, 'Batman: Le Film' ]
[ 1989, 'Batman' ]
[ 1992, 'Batman Returns' ]
[ 1995, 'Batman pour toujours' ]
[ 2005, 'Batman commence' ]
[ 2008, 'Le chevalier noir' ]
[ 2012, 'The Dark Knight Rises' ]

Ou vous pouvez utiliser la fonction d'affectation de destruction ES6 pour accéder à chaque clé et valeur:

let mapObj = new Map([
[1966, 'Batman: Le Film'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman pour toujours'],
[2005, 'Batman Begins'],
[2008, 'Le chevalier noir'],
[2012, 'Le chevalier noir se lève']
]);
for (let [clé, valeur] de mapObj.entries()) {
console.log("Clé: " + clé + " Valeur: " + valeur);
}

Sortir:

Légende: 1966 Valeur: Batman: Le Film
Clé: 1989 Valeur: Batman
Clé: 1992 Valeur: Batman Returns
Clé: 1995 Valeur: Batman Forever
Légende: 2005 Valeur: Batman commence
Légende: 2008 Valeur: le chevalier noir
Légende: 2012 Valeur: The Dark Knight Rises

8. Comment itérer sur les valeurs d'une carte

Les valeurs() la méthode renvoie un Itérateur objet qui contient toutes les valeurs d'une carte, et il le fait dans l'ordre d'insertion.

let mapObj = new Map([
[1966, 'Batman: Le Film'],
[1989, 'Batman'],
[1992, 'Batman Returns']
]);
const iteratorObj = mapObj.values();
for (laissez la valeur de iteratorObj) {
console.log (valeur);
}

Sortir:

Batman: le film
Homme chauve-souris
Le retour de Batman

9. Itérer sur les clés d'une carte

Les clés() la méthode renvoie un Itérateur objet qui contient toutes les clés d'une carte, et il le fait dans l'ordre d'insertion.

let mapObj = new Map([
[1966, 'Batman: Le Film'],
[1989, 'Batman'],
[1992, 'Batman Returns']
]);
const iteratorObj = mapObj.keys();
for (let clé de iteratorObj) {
console.log (clé);
}

Sortir:

1966
1989
1992

En rapport: Les fonctions de flèche JavaScript peuvent faire de vous un meilleur développeur

10. Itérer sur les éléments d'une carte à l'aide d'un rappel

Les pour chaque() La méthode appelle une fonction de rappel pour chaque élément de l'objet Map. La fonction de rappel prend deux paramètres: la clé et la valeur.

function printKeyValue (clé, valeur) {
console.log("Clé: " + clé + " Valeur: " + valeur);
}
let mapObj = new Map([
[1966, 'Batman: Le Film'],
[1989, 'Batman'],
[1992, 'Batman Returns']
]);
mapObj.forEach (printKeyValue);

Sortir:

Légende: Batman: The Movie Valeur: 1966
Clé: Batman Valeur: 1989
Clé: Batman Valeur de retour: 1992

Vous connaissez maintenant les cartes en JavaScript

Vous avez maintenant suffisamment de connaissances pour maîtriser le concept de Maps en JavaScript. La structure de données Map est largement utilisée dans de nombreuses tâches de programmation. Une fois que vous l'avez maîtrisé, vous pouvez passer à d'autres objets JavaScript natifs comme des ensembles, des tableaux, etc.

15 méthodes de tableau JavaScript que vous devriez maîtriser aujourd'hui

Vous voulez comprendre les tableaux JavaScript mais vous n'arrivez pas à les maîtriser? Consultez nos exemples de tableaux JavaScript pour obtenir des conseils.

Lire la suite

A propos de l'auteur