javascript map
JavaScript

Javascript Map : l’excellente alternative aux arrays/objects

Nous allons voir l’intérêt de l’objet javascript map. L’objet Map est apparu avec Ecmascript 6 (2015). L’objet Map est une bonne alternative aux arrays. Ils sont pour moi plus facile à parcourir avec des boucles et plus précis. Ils sont également une bonne alternative aux objects. Contrairement aux objets il est possible de déterminer un ordre précis.

Nous allons directement passer à l’initialisation.

Initialisation

Vu que Map est un objet en JavaScript, nous allons utiliser le constructeur de Map et l’initialiser avec le mot clef new.

let pokemons = new Map();

Il est également possible d’initialiser un objet Map avec un Array. Ce qui est d’ailleurs beaucoup plus pratique que de démarrer un Map de zéro.

const pokemonsArray = [
  [1, 'Pikachu'],
  [2, 'Carapuce'],
  [3, 'Bulbizarre'],
];

let pokemonsMap = new Map(pokemonsArray);

Le grand intérêt d’un map par rapport à un array est de pouvoir gérer des [clef, valeur] vraiment facilement.

Méthodes

De nombreuses méthodes sont disponibles pour les Map. Nous allons les détailler une par une.

Set

La méthode set permet d’ajouter ou de modifier un item de Map. A noter que l’on peut modifier avec la méthode set un objet Map immutable (déclarer avec const)

const pokemons = new Map();

pokemons.set(1, 'Bulbizarre');
pokemons.set(2, 'Pikachu');
pokemons.set(3, 'Carapuce);

Get

La méthode Get permet de récupérer une valeur d’un objet Map très facilement par sa clef (key).

const pokemonsArray = [
  [1, 'Pikachu'],
  [2, 'Carapuce'],
  [3, 'Bulbizarre'],
];

let pokemonsMap = new Map(pokemonsArray);
pokemonsMap.get(2); // 'Pikachu'
pokemonsMap.get(3); // 'Bulbizarre'

Size

La propriété Size permet de renvoyer la taille du Map et de donner le nombre d’item à l’intérieur.

const pokemonsArray = [
  [1, 'Pikachu'],
  [2, 'Carapuce'],
  [3, 'Bulbizarre'],
];

let pokemonsMap = new Map(pokemonsArray);
pokemonsMap.size; // 3

Has

Has est une méthode parfaite pour savoir si l’objet Map a une clef ou non. Et est donc idéale pour être utiliser dans vos conditions (if).

const pokemonsArray = [
  [1, 'Pikachu'],
  [2, 'Carapuce'],
  [3, 'Bulbizarre'],
];

let pokemonsMap = new Map(pokemonsArray);
pokemonsMap.has(2); // true
pokemonsMap.has('Carapuce'); // false

Delete

Delete comme son nom l’indique permet de supprimer un item en fonction de sa clef (key).

const pokemonsArray = [
  [1, 'Pikachu'],
  [2, 'Carapuce'],
  [3, 'Bulbizarre'],
];

let pokemonsMap = new Map(pokemonsArray);
pokemonsMap.delete(2); // delete de Carapuce
pokemonsMap.has(2); // false

Clear

La méthode clear permet de supprimer tous les items [key,value] dans l’objet Map

const pokemonsArray = [
  [1, 'Pikachu'],
  [2, 'Carapuce'],
  [3, 'Bulbizarre'],
];

let pokemonsMap = new Map(pokemonsArray);
pokemonsMap.clear(); // pokemonsMap vide

javascript map : Iteration

C’est bien beau tout ça, mais maintenant nous voulons itérer sur notre object Map. Il y a deux solutions :

  • Passer par ES6 et une destructuration d’Array
  • Passer par la méthode forEach de l’object Map

La méthode forEach de Map

const pokemonsArray = [
  [1, 'Pikachu'],
  [2, 'Carapuce'],
  [3, 'Bulbizarre'],
];
let pokemonsMap = new Map(pokemonsArray);
pokemonsMap.forEach((pokemon, key) => {
  console.log(key); // 1,2,3
  console.log(pokemon); // 'Pikachu','Carapuce','Bulbizarre'
}

La méthode ES6 de destructuration d’Array

const pokemonsArray = [
  [1, 'Pikachu'],
  [2, 'Carapuce'],
  [3, 'Bulbizarre'],
];
let pokemonsMap = new Map(pokemonsArray);
for (let [key, pokemon] of pokemonsMap) {
  console.log(key); // 1,2,3
  console.log(pokemon); // 'Pikachu','Carapuce','Bulbizarre'
}

Si vous voulez aller plus loin dans votre apprentissage du javascript, je vous conseille de lire cet article sur les Arrays :
http://pierreterrat.com/javascript-array-:-comment-bien-les-utiliser?

Beaucoup d’efforts et de temps sont passés pour vous fournir du contenu de qualité, merci de partager et de commenter cet article pour faire vivre ce blog.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *