Array : mthode map()

Exemple interactif

const array = [1, 4, 9, 16];

// Passer une fonction  map
const mapped = array.map((x) => x * 2);

console.log(mapped);
// Rsultat attendu : Array [2, 8, 18, 32]

Syntaxe

map(callbackFn)
map(callbackFn, thisArg)

Paramtres

callbackFn

Une fonction excuter pour chaque lment du tableau. Sa valeur de retour est ajoute comme un lment du nouveau tableau. La fonction est appele avec les arguments suivants :

element

L'lment en cours de traitement dans le tableau.

index

L'indice de l'lment en cours de traitement dans le tableau.

array

Le tableau sur lequel map() a t appele.

thisArg Facultatif

Une valeur utiliser comme this lors de l'excution de callbackFn. Voir mthodes itratives.

Valeur de retour

Un nouveau tableau compos des images de la fonction de rappel.

Description

La mthode map() est une mthode itrative. Elle appelle la fonction callbackFn fournie une fois pour chaque lment du tableau et construit un nouveau tableau partir des rsultats. Consultez la section mthodes itratives pour plus d'informations sur le fonctionnement gnral de ces mthodes.

callbackFn n'est appele que pour les indices du tableau qui ont des valeurs affectes. Elle n'est pas appele pour les cases vides dans les tableaux creux.

La mthode map() est gnrique. Elle attend seulement que la valeur de this possde une proprit length et des proprits cls entires.

Puisque map construit un nouveau tableau, l'appeler sans utiliser le tableau retourn est une mauvaise pratique : utilisez plutt forEach ou for...of.

Exemples

Crer un tableau des racines carres d'un tableau de nombres

Le code suivant prend un tableau de nombres et cre un nouveau tableau contenant les racines carres des nombres du premier tableau.

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots vaut dsormais  [1, 2, 3]
// numbers vaut toujours [1, 4, 9]

Utiliser map pour reformater des objets dans un tableau

Le code suivant prend un tableau d'objets et cre un nouveau tableau contenant les objets nouvellement reformats.

const kvArray = [
  { key: 1, value: 10 },
  { key: 2, value: 20 },
  { key: 3, value: 30 },
];

const reformattedArray = kvArray.map(({ key, value }) => ({ [key]: value }));

console.log(reformattedArray); // [{ 1: 10 }, { 2: 20 }, { 3: 30 }]
console.log(kvArray);
// [
//   { key: 1, value: 10 },
//   { key: 2, value: 20 },
//   { key: 3, value: 30 }
// ]

Utiliser parseInt() avec map()

Il est courant d'utiliser la fonction de rappel avec un seul argument (l'lment parcouru). Certaines fonctions sont galement souvent utilises avec un seul argument, mme si elles acceptent des arguments optionnels supplmentaires. Ces habitudes peuvent conduire des comportements droutants. Considrez :

["1", "2", "3"].map(parseInt);

On peut s'attendre obtenir [1, 2, 3], mais le rsultat rel est [1, NaN, NaN].

parseInt est souvent utilise avec un argument, mais en accepte deux. Le premier est une expression et le second est la base. La fonction de rappel de Array.prototype.map reoit 3 arguments : l'lment, l'indice et le tableau. Le troisime argument est ignor par parseInt mais pas le second ! C'est la source de la confusion possible.

Voici un exemple concis des tapes d'itration :

/* premire itration  (index vaut 0) : */ parseInt("1", 0); // 1
/* deuxime itration (index vaut 1) : */ parseInt("2", 1); // NaN
/* troisime itration  (index vaut 2) : */ parseInt("3", 2); // NaN

Pour rsoudre ce problme, dfinissez une autre fonction qui ne prend qu'un seul argument :

["1", "2", "3"].map((str) => parseInt(str, 10)); // [1, 2, 3]

Vous pouvez aussi utiliser la fonction Number, qui ne prend qu'un seul argument :

["1", "2", "3"].map(Number); // [1, 2, 3]

// Mais contrairement  parseInt(), Number() retourne aussi un flottant ou une notation exponentielle rsolue :
["1.1", "2.2e2", "3e300"].map(Number); // [1.1, 220, 3e+300]

// Pour comparaison, si on utilise parseInt() sur le tableau ci-dessus :
["1.1", "2.2e2", "3e300"].map((str) => parseInt(str, 10)); // [1, 2, 3]

Voir le sujet de discussion Un problme d'argument optionnel en JavaScript (angl.) par Allen Wirfs-Brock.

Le tableau mapp contient undefined

Lorsque undefined ou rien n'est retourn, le tableau rsultant contient undefined. Si vous souhaitez supprimer l'lment la place, chanez une mthode filter(), ou utilisez la mthode flatMap() et retournez un tableau vide pour signifier la suppression.

const nombres = [1, 2, 3, 4];
const nombresFiltres = nombres.map((num, index) => {
  if (index < 3) {
    return num;
  }
});

// l'index commence  0, donc nombresFiltres vaut 1, 2, 3 et undefined.
// nombresFiltres vaut [1, 2, 3, undefined]
// nombres vaut toujours [1, 2, 3, 4]

Mapping avec effets de bord

La fonction de rappel peut avoir des effets de bord.

const cart = [5, 15, 25];
let total = 0;
const withTax = cart.map((cost) => {
  total += cost;
  return cost * 1.2;
});
console.log(withTax); // [6, 18, 30]
console.log(total); // 45

Ce n'est pas recommand, car les mthodes de copie sont utiliser de prfrence avec des fonctions pures. Dans ce cas, il vaut mieux parcourir le tableau deux fois.

const cart = [5, 15, 25];
const total = cart.reduce((acc, cost) => acc + cost, 0);
const withTax = cart.map((cost) => cost * 1.2);

Parfois, ce schma va l'extrme et la seule chose utile que fait map() est de provoquer des effets de bord.

const products = [
  { name: "sports car" },
  { name: "laptop" },
  { name: "phone" },
];

products.map((product) => {
  product.price = 100;
});

Comme mentionn prcdemment, c'est une mauvaise pratique. Si vous n'utilisez pas la valeur de retour de map(), utilisez forEach() ou une boucle for...of la place.

products.forEach((product) => {
  product.price = 100;
});

Ou, si vous souhaitez crer un nouveau tableau :

const productsWithPrice = products.map((product) => ({
  ...product,
  price: 100,
}));

Utiliser le troisime argument de callbackFn

L'argument array est utile si vous souhaitez accder un autre lment du tableau, en particulier lorsque vous n'avez pas de variable existante qui fait rfrence au tableau. L'exemple suivant utilise d'abord filter() pour extraire les valeurs positives puis utilise map() pour crer un nouveau tableau o chaque lment est la moyenne de ses voisins et de lui-mme.

const nombres = [3, -1, 1, 4, 1, 5, 9, 2, 6];
const moyennes = nombres
  .filter((num) => num > 0)
  .map((num, idx, arr) => {
    // Sans l'argument arr, il n'y a aucun moyen d'accder facilement
    // au tableau intermdiaire sans le stocker dans une variable.
    const precedent = arr[idx - 1];
    const suivant = arr[idx + 1];
    let compte = 1;
    let total = num;
    if (precedent !== undefined) {
      compte++;
      total += precedent;
    }
    if (suivant !== undefined) {
      compte++;
      total += suivant;
    }
    const moyenne = total / compte;
    // Arrondir  deux dcimales
    return Math.round(moyenne * 100) / 100;
  });
console.log(moyennes); // [2, 2.67, 2, 3.33, 5, 5.33, 5.67, 4]

L'argument array n'est pas le tableau en cours de construction il n'est pas possible d'accder au tableau en cours de construction depuis la fonction de rappel.

Utiliser map() sur des tableaux creux

Un tableau creux reste creux aprs map(). Les indices des cases vides restent vides dans le tableau retourn, et la fonction de rappel n'est pas appele pour elles.

console.log(
  [1, , 3].map((x, index) => {
    console.log(`Visite ${index}`);
    return x * 2;
  }),
);
// Visite 0
// Visite 2
// [2, empty, 6]

Appeler map() sur des objets qui ne sont pas des tableaux

La mthode map() lit la proprit length de this puis accde chaque proprit dont la cl est un entier non ngatif infrieur length.

const objetSimilaireTableau = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 5, // ignor par map(), car length vaut 3
};
console.log(Array.prototype.map.call(objetSimilaireTableau, (x) => x ** 2));
// [ 4, 9, 16 ]

Cet exemple montre comment parcourir une collection d'objets collects par querySelectorAll(), en retournant un tableau contenant les valeurs de tous les lments option slectionns. Comme querySelectorAll() retourne un NodeList, qui est un objet semblable un tableau sans la mthode map(), nous utilisons Array.prototype.map.call(), en passant elems comme valeur de this et la fonction de rappel comme second argument.

const elems = document.querySelectorAll("select option:checked");
const valeurs = Array.prototype.map.call(elems, ({ valeur }) => valeur);

Vous pouvez aussi utiliser Array.from() pour transformer elems en tableau, puis accder la mthode map().

Spcifications

Compatibilit des navigateurs

Voir aussi

• Guide des collections indexes
• L'objet global Array
• La mthode Array.prototype.forEach()
• La mthode Array.from()
• La mthode TypedArray.prototype.map()
• L'objet global Map
• Prothse d'mulation de Array.prototype.map dans core-js (angl.)
• Prothse d'mulation es-shims de Array.prototype.map (angl.)