Méthode map

La méthode map permet d'appliquer une fonction donnée à chaque élément d'un tableau. Cependant, la méthode ne modifie pas le tableau original, mais retourne le tableau modifié.

La méthode reçoit en paramètre une fonction, qui s'exécutera pour chaque élément du tableau. Ce que cette fonction retourne via return pour un élément du tableau deviendra la nouvelle valeur de cet élément (voir les exemples).

On peut passer 3 paramètres à la fonction. Si ces paramètres sont présents (ils ne sont pas obligatoires), alors le premier recevra automatiquement l'élément du tableau, le deuxième recevra son numéro dans le tableau (l'index), et le troisième - le tableau lui-même.

Syntaxe

javascriptlet nouveau_tableau = tableau.map(function(element, index, tableau) {
  code
  return element_modifie;
});

Exemple

Créons un tableau dont chaque élément est le double de l'élément correspondant dans le tableau initial :

javascriptlet arr = [1, 2, 3, 4, 5];

let res = arr.map(function(elem) {
  return elem * 2;
});

console.log(res);

Résultat de l'exécution du code :

javascript[2, 4, 6, 8, 10]

Exemple

Créons un tableau dont chaque élément est obtenu comme suit - la valeur de l'élément est multipliée par son numéro d'ordre dans le tableau :

javascriptlet arr = [1, 2, 3, 4, 5];

let res = arr.map(function(elem, index) {
  return elem * index;
});

console.log(res);

Résultat de l'exécution du code :

javascript[0, 2, 6, 12, 20]

Exemple

Si nécessaire, on peut passer le tableau lui-même en troisième paramètre :

javascriptlet arr = [1, 2, 3, 4, 5];

let res = arr.map(function(elem, index, arr) {
  // le tableau arr sera accessible ici
});

Exemple

La méthode map peut également être utilisée pour parcourir des tableaux multidimensionnels. Supposons, par exemple, que nous ayons le tableau suivant :

javascriptlet arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

Parcourons ce tableau avec map et affichons ses éléments dans la console :

javascriptlet arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

let result = arr.map(function(elem) {
  console.log(elem);
});

En conséquence, console.log affichera [1, 2, 3], puis [4, 5, 6], puis [7, 8, 9].

Comme vous le voyez, la variable elem reçoit les sous-tableaux. Appliquons maintenant la méthode map à chaque sous-tableau et mettons chaque élément au carré :

javascriptlet arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

let result = arr.map(function(elem) {
  return elem.map(function(num) {
    return num * num;
  });
});

console.log(result);

Voir aussi