Array.
Crée un nouveau tableau avec les résultats de l’appel d’une fonction pour chaque élément.
- Renvoie
- Un nouveau tableau avec les résultats de la fonction, de même longueur que l’original.
- Modifie l’original
- Non
Exemple
#const numbers = [1, 2, 3, 4]
const doubled = numbers.map((n) => n * 2)
console.log(doubled)
console.log(numbers)Définition et utilisation
#La méthode map() parcourt les éléments du tableau les uns après les autres, appelle la fonction donnée pour chacun et construit un nouveau tableau de même longueur à partir des résultats. Le tableau d’origine reste intact.
C’est l’outil de base pour transformer des données : convertir des prix en prix taxés, des objets utilisateurs en simples prénoms, ou des données d’une API en éléments de liste dans l’interface.
Si vous n’avez pas besoin d’un nouveau tableau mais voulez simplement faire quelque chose pour chaque élément (par exemple l’afficher dans la console), utilisez forEach(). Utiliser map() sans se servir du résultat est une erreur fréquente.
Syntaxe
#array.map(callbackFn)
array.map(callbackFn, thisArg)Paramètres
#callbackFn
function (element, index, array)
Fonction appelée pour chaque élément. Elle reçoit l’élément courant, son indice et le tableau entier. Ce qu’elle retourne va dans le nouveau tableau.thisArg
optionnel
Valeur utilisée commethisà l’intérieur decallbackFn. Sans effet avec les fonctions fléchées.
Plus d’exemples
#const students = [
{ name: 'Léa', points: 120 },
{ name: 'Lucas', points: 95 },
{ name: 'Emma', points: 140 }
]
const names = students.map((student) => student.name)
console.log(names)const tasks = ['HTML', 'CSS', 'JavaScript']
const numbered = tasks.map((task, index) => `${index + 1}. ${task}`)
console.log(numbered.join('\n'))console.log(['1', '2', '3'].map(parseInt))
console.log(['1', '2', '3'].map(Number))map() passe aussi l’indice à la fonction, et parseInt traite le second argument comme la base numérique. D’où les NaN. Il est plus sûr d’utiliser Number ou (s) => parseInt(s, 10).
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- La fonction passée à
map()doit retourner une valeur. Unreturnoublié dans des accolades donnera un tableau plein deundefined. - Ne modifiez pas les objets d’origine à l’intérieur de
map(). Retournez-en de nouveaux :{ ...user, active: true }.
Entrées associées
#- map() vs forEach()map() construit un nouveau tableau à partir des résultats de la fonction ; forEach() se contente d’appeler la fonction pour chaque élément et renvoie toujours undefined.
- Array.prototype.filter()Crée un nouveau tableau avec les éléments pour lesquels la fonction a renvoyé true.
- Array.prototype.forEach()Appelle une fonction pour chaque élément du tableau.
- Array.prototype.reduce()Réduit tout le tableau à une seule valeur, par exemple une somme, un objet ou un nouveau tableau.
- Array.prototype.flatMap()Mappe chaque élément et aplatit le résultat d’un niveau.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.