La méthode JavaScript .map
La méthode JavaScript .map()
vous donne la possibilité d’itérer à travers chaque élément d’un tableau et d’effectuer certaines actions. Le tableau d’origine est ainsi conservé.
Qu’est-ce que JavaScript .map()
?
La méthode JavaScript .map()
crée un nouveau tableau en appliquant une fonction callback à chaque élément du tableau original. La méthode transforme chaque valeur du tableau initial, le résultat étant enregistré dans un tableau séparé. Un aspect clé est la non-mutation, ce qui signifie que le tableau d’origine reste inchangé.
La méthode .map()
est souvent utilisée pour transformer tous les éléments d’un tableau. Par exemple, elle peut mettre des éléments au carré, formater des textes, filtrer des objets ou effectuer une multitude d’autres ajustements. Ainsi, .map()
est pratique lorsqu’une modification non destructive des données est souhaitée et assure un code propre et compréhensible.
Syntaxe de JavaScript .map()
La syntaxe de la méthode .map()
consiste en un appel de fonction (fonction callback) sur un tableau :
const newArr = originalArr.map(function(element, index, array) {
// Code
});
javascript-
originalArr
: il s’agit du tableau auquel s’applique la méthode.map()
. -
element
: c’est l’élément courant qui est traité pendant l’itération. -
index (optionnel)
: c’est l’index de l’élément courant dans le tableau. -
array (optionnel)
: il s’agit du tableau d’origine.
Voici un exemple concret :
const nombres = [1, 2, 3, 4, 5];
const nombresAuCarre = nombres.map(function(nombre) {
return nombre * nombre;
});
console.log(nombresAuCarre); // Résultat : [1, 4, 9, 16, 25]
javascriptLa fonction callback, passée en argument à JavaScript .map()
, prend chaque élément du tableau initial nombres
et le met au carré. Nous obtenons un nouveau tableau composé des carrés des éléments du tableau initial.
Exemples concrets de .map()
La méthode JavaScript .map()
permet d’effectuer une multitude d’opérations sur les éléments d’un tableau. Voici quelques-uns des scénarios les plus courants :
Filtrer les données
En combinant .map()
avec la méthode .filter()
, on crée un tableau qui ne contient que les valeurs pour lesquelles la condition donnée est vraie.
const numbers = [1, 2, 3, 4, 5];
const evenNumbersTimesTwo = numbers.filter(num => num % 2 === 0).map(num => num * 2);
// Sortie : [4, 8]
javascriptDans cet exemple, le tableau numbers
possède les valeurs de 1 à 5. Nous appliquons ensuite la méthode .filter()
. Le critère de filtrage détermine que le nombre modulo 2 doit être égal à 0, ce qui est vrai pour les nombres pairs. Le résultat est un nouveau tableau qui ne contient que les éléments divisibles par 2. Le résultat intermédiaire est donc [2, 4]
. Ensuite, nous utilisons la méthode .map()
sur le tableau pour doubler chaque élément. Le résultat final est un tableau dont les éléments peuvent être divisés deux fois par 2, c’est-à-dire [4, 8]
.
Rendu des listes dans les bibliothèques JavaScript
React fait partie des frameworks et bibliothèques JavaScript les plus populaires. La fonction .map()
est utile pour représenter des listes dans React. Notez que React utilise la syntaxe JSX.
import React from "react";
import ReactDOM from "react-dom";
const couleurs = ["rouge", "vert", "bleu", "jaune", "orange"];
const ListeCouleurs = () => (
<div>
<ul>{couleurs.map(couleur => <li key={couleur}>{couleur}</li>)}</ul>
</div>
);
const elementRacine = document.getElementById("root");
ReactDOM.render(<ListeCouleurs />, elementRacine);
javascriptNous importons les modules React
et ReactDOM
et créons un tableau appelé couleurs
avec différents noms de couleurs. Le composant fonctionnel React ListeCouleurs
utilise la méthode JavaScript map
() pour créer un élément <li>
pour chaque couleur. L’attribut key
permet une mise à jour efficace par React. Enfin, le composant ListeCouleurs
est rendu dans le DOM avec ReactDOM.render
et le résultat est ajouté à l’élément DOM avec l’ID root
.
Formater les éléments du tableau
La méthode .map()
est un moyen simple de formater des éléments comme des chaînes de caractères à volonté.
const noms = ["Alice", "Lucas", "Charles"];
const nomsFormates = noms.map(nom => nom.toLowerCase());
// Résultat : ["alice", "lucas", "charles"]
javascriptIci, nous combinons .map()
avec la méthode toLowerCase()
pour convertir chaque nom en minuscules. Le résultat est le nouveau tableau nomsFormates
, qui contient les noms en minuscules. Le tableau original noms
reste inchangé.
- Certificat SSL et protection DDoS
- Sauvegarde et restauration des données
- Assistance 24/7 et conseiller personnel