De la boucle classique à la méthode forEach(), différentes techniques et méthodes sont utilisées pour itérer à travers des ensembles de données en JavaScript. L’une des méthodes les plus populaires est la méthode .map(). Cette méthode crée un nouveau tableau en appliquant une fonction spécifique à chaque élément du tableau original. Contrairement aux méthodes mutantes qui modifient le tableau existant, .map() est une méthode non mutante.
Dans ce tutoriel, nous allons examiner quatre utilisations importantes de la méthode .map() en JavaScript : appliquer une fonction à chaque élément d’un tableau, convertir une chaîne de caractères en un tableau, rendre des listes dans des bibliothèques JavaScript et reformater les objets d’un tableau.
Conditions préalables
Ce tutoriel ne nécessite pas de codage, mais si vous souhaitez suivre les exemples, vous pouvez utiliser le Node.js REPL ou des outils de développement de navigateur.
- Pour installer Node.js en local, suivez les étapes de l’article Comment installer Node.js et créer un environnement de développement local.
- Les outils Chrome DevTools sont disponibles en téléchargeant et en installant la dernière version de Google Chrome.
Étape 1 – Appliquer une fonction à chaque élément d’un tableau
La méthode .map() accepte une fonction de rappel en tant qu’argument et le paramètre le plus important de cette fonction est la valeur actuelle de l’élément traité. Ce paramètre est obligatoire. Vous pouvez modifier chaque élément du tableau et créer un nouveau tableau en utilisant ce paramètre.
Voici un exemple :
const sweetArray = [2, 3, 4, 5, 35];
const sweeterArray = sweetArray.map(sweetItem => {
return sweetItem * 2;
});
console.log(sweeterArray);La sortie affichée dans la console est :
[4, 6, 8, 10, 70]Vous pouvez simplifier ce code pour le rendre plus lisible en créant une fonction séparée :
const makeSweeter = sweetItem => sweetItem * 2;
const sweetArray = [2, 3, 4, 5, 35];
const sweeterArray = sweetArray.map(makeSweeter);
console.log(sweeterArray);La sortie sera la même :
[4, 6, 8, 10, 70]Utiliser une fonction séparée rend votre code plus lisible.
Étape 2 – Convertir une chaîne de caractères en un tableau
La méthode .map() fait partie du prototype de tableau en JavaScript. Dans cette étape, vous l’utiliserez pour convertir une chaîne de caractères en un tableau. Vous n’avez pas besoin de développer cette méthode pour qu’elle fonctionne avec des chaînes de caractères. Au lieu de cela, vous utiliserez la méthode spéciale .call().
En JavaScript, tout est un objet et les méthodes sont des fonctions liées à ces objets. .call() vous permet d’utiliser le contexte d’un objet sur un autre. Ainsi, vous pouvez copier le contexte de .map() sur un tableau à partir d’une chaîne de caractères.
.call() accepte des arguments pour spécifier le contexte à utiliser et les paramètres pour la fonction d’origine.
Voici un exemple :
const name = "Sammy";
const map = Array.prototype.map;
const newName = map.call(name, eachLetter => {
return `${eachLetter}a`;
});
console.log(newName);La sortie affichée dans la console est :
["Sa", "aa", "ma", "ma", "ya"]Ici, vous avez utilisé le contexte de .map() sur une chaîne de caractères et passé un argument à la fonction attendue par .map().
Cette méthode fonctionne de la même manière que la méthode .split() d’une chaîne, mais vous pouvez modifier chaque caractère avant qu’il ne soit renvoyé dans un tableau.
Étape 3 – Rendre des listes dans une bibliothèque JavaScript
Les bibliothèques JavaScript comme React utilisent la méthode .map() pour rendre les éléments d’une liste. Cela nécessite l’utilisation de la syntaxe JSX, car la méthode .map() est utilisée dans la syntaxe JSX.
Voici un exemple d’un composant React :
import React from "react";
import ReactDOM from "react-dom";
const names = ["whale", "squid", "turtle", "coral", "starfish"];
const NamesList = () => (
<div>
<ul>
{names.map(name => (
<li key={name}>{name}</li>
))}
</ul>
</div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);Il s’agit d’un composant React qui rend une div avec une liste. Les différents éléments de la liste sont rendus en utilisant la méthode .map() pour itérer sur le tableau de noms initialement créé. Ce composant est rendu en utilisant ReactDOM sur l’élément DOM avec l’ID “root”.
Étape 4 – Reformater les objets d’un tableau
La méthode .map() peut être utilisée pour itérer sur des objets dans un tableau et, de la même manière que pour les tableaux traditionnels, modifier le contenu de chaque objet individuel et renvoyer un nouveau tableau. Cette modification est basée sur ce qui est renvoyé dans la fonction de rappel.
Voici un exemple :
const myUsers = [
{ name: 'shark', likes: 'ocean' },
{ name: 'turtle', likes: 'pond' },
{ name: 'otter', likes: 'fish biscuits' }
];
const usersByLikes = myUsers.map(item => {
const container = {};
container[item.name] = item.likes;
container.age = item.name.length * 10;
return container;
});
console.log(usersByLikes);La sortie affichée dans la console est :
[
{shark: "ocean", age: 50},
{turtle: "pond", age: 60},
{otter: "fish biscuits", age: 50}
]Ici, vous avez modifié chaque objet du tableau en utilisant la notation entre crochets et points. Cette utilisation peut être utilisée pour traiter ou condenser les données avant qu’elles ne soient sauvegardées ou analysées dans une application frontale.
Conclusion
Dans ce tutoriel, nous avons examiné quatre utilisations de la méthode .map() en JavaScript. En combinaison avec d’autres méthodes, la fonctionnalité de .map() peut être étendue. Pour plus d’informations, consultez notre article Comment utiliser les méthodes de tableau en JavaScript : Méthodes d’itération.
