Méthode Map()

Cette section explorera plusieurs méthodes couramment utilisées pour travailler avec des tableaux en JavaScript. JS offre une grande variété de méthodes, mais nous nous concentrerons spécifiquement sur celles qui s'avèrent inestimables dans la programmation quotidienne : map(), filter(), find(), reduce(), et sort(). Ces méthodes sont choisies pour leur utilité pratique, répondant à des scénarios courants rencontrés dans les tâches de codage.

Pour une liste complète de toutes les méthodes de tableau, vous pouvez vous référer à la documentation MDN officielle.

map()

La méthode map() itère sur chaque élément du tableau original et applique une fonction de rappel spécifiée pour produire un nouveau tableau.

Voici la syntaxe de base :

element: C'est l'élément actuel en cours de traitement dans le tableau;
index: C'est l'index de l'élément actuel dans le tableau. Il représente la position de l'élément dans le tableau;
array: C'est le tableau sur lequel la méthode map() a été appelée. Il se réfère au tableau original en cours d'itération.

Illustrons ce que représentent element, index et array :


              12345
            
const products = ["Ball", "Shoes", "Mouse"];

const modifiedProducts = products.map((element, index, array) => {
  console.log(`Element: ${element}, Index: ${index}, Array: ${array}`);
});

Points clés à retenir sur map() :

Il itère sur le tableau original élément par élément ;
Il ne modifie pas le tableau original ;
Le résultat de la fonction de rappel est utilisé pour créer un nouveau tableau ;
Il renvoie un nouveau tableau de la même longueur.

Transformation des éléments du tableau

La méthode map() est idéale lorsque nous devons transformer chaque élément d'un tableau sans modifier le tableau original. Considérez l'exemple suivant :


              12345678910
            
const numbers = [3, 5, 11, 32, 87];

/* Use the `map` method to create a new array (`doubledNumbers`) 
  by doubling each element of the `numbers` array. */
const doubledNumbers = numbers.map((element) => {
  return element * 2;
});

console.log("Initial array:", numbers); // Output: 3, 5, 11, 32, 87
console.log("Modified array:", doubledNumbers); // Output: 6, 10, 22, 64, 174