Comprendre la méthode map() pour les tableaux JavaScript : un guide simple

La méthode map() crée un nouveau tableau en appliquant une fonction fournie (callbackFn) à chaque élément du tableau d'origine. C’est parfait pour transformer des données sans modifier le tableau d’origine.

---

Syntaxe

array.map(callbackFn, thisArg)

• callbackFn : Une fonction qui s'exécute sur chaque élément du tableau, avec les arguments suivants :
  • élément : élément actuel.
  • index : Indice actuel.
  • array : Le tableau parcouru.
• thisArg (facultatif) : Une valeur à utiliser comme ceci dans la fonction de rappel.

---

Fonctionnalités clés

1. Renvoie un nouveau tableau : Le tableau d'origine reste inchangé.
2. Saute les emplacements vides : le rappel n'est pas appelé pour les éléments non attribués dans les tableaux clairsemés.
3. Utilisation générique : fonctionne avec des objets de type tableau (par exemple, NodeLists).

---

Exemples

1. Exemple de base : transformer des nombres

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));
console.log(roots); // [1, 2, 3]

2. Reformater les objets

const kvArray = [
  { key: 1, value: 10 },
  { key: 2, value: 20 },
];
const reformatted = kvArray.map(({ key, value }) => ({ [key]: value }));
console.log(reformatted); // [{ 1: 10 }, { 2: 20 }]

3. Utilisation de parseInt avec map

// Common mistake:
console.log(["1", "2", "3"].map(parseInt)); // [1, NaN, NaN]

// Correct approach:
console.log(["1", "2", "3"].map((str) => parseInt(str, 10))); // [1, 2, 3]

// Alternative:
console.log(["1", "2", "3"].map(Number)); // [1, 2, 3]

4. Évitez les résultats non définis

Ne rien renvoyer du rappel conduit à undefined dans le nouveau tableau :

const numbers = [1, 2, 3, 4];
const result = numbers.map((num, index) => (index 



<p>Utilisez filter() ou flatMap() pour supprimer les éléments indésirables.</p>

<h4>
  
  
  5. Effets secondaires (anti-modèle)
</h4>

<p>Évitez d'utiliser map() pour les opérations avec des effets secondaires, comme la mise à jour de variables :<br>
</p>

<pre class="brush:php;toolbar:false">const cart = [5, 15, 25];
let total = 0;

// Avoid this:
const withTax = cart.map((cost) => {
  total += cost;
  return cost * 1.2;
});

// Instead, use separate methods:
const total = cart.reduce((sum, cost) => sum + cost, 0);
const withTax = cart.map((cost) => cost * 1.2);

6. Accès à d'autres éléments du tableau

Le troisième argument (tableau) permet d'accéder aux voisins lors des transformations :

const numbers = [3, -1, 1, 4];
const averaged = numbers.map((num, idx, arr) => {
  const prev = arr[idx - 1] || 0;
  const next = arr[idx + 1] || 0;
  return (prev + num + next) / 3;
});
console.log(averaged);

---

Cas d'utilisation courants

1. Transformer les données : appliquez une fonction à chaque élément.
2. Reformater les objets : modifier la structure des données.
3. Map NodeLists : Transformez les éléments DOM comme NodeList en tableaux :

   const elems = document.querySelectorAll("option:checked");
   const values = Array.from(elems).map(({ value }) => value);

---

Quand éviter map()

• Aucune valeur de retour nécessaire : utilisez forEach() ou for...of à la place.
• Mutation des données : Créez de nouveaux objets au lieu de modifier ceux d'origine :

   const products = [{ name: "phone" }];
   const updated = products.map((p) => ({ ...p, price: 100 }));

---

Conseils finaux

• Fonctions pures uniquement : assurez-vous que le rappel n'a aucun effet secondaire.
• Comprendre les arguments : sachez que map() transmet l'élément, l'index et le tableau au rappel.
• Évitez les tableaux clairsemés : les emplacements vides resteront vides.

Utilisez map() pour simplifier votre code lors de la transformation efficace de tableaux !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!