Comprendre la méthode JavaScript Array map()

Introduction à map()

La méthode map() crée un nouveau tableau rempli avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant. C'est une technique de programmation fonctionnelle qui permet de transformer chaque élément d'un tableau en un nouvel élément, produisant un nouveau tableau sans modifier celui d'origine.

---

Syntaxe

let newArray = array.map(function callback(currentValue, index, array) {
    // Return element for newArray
}, thisArg);

Ou, en utilisant les fonctions fléchées :

let newArray = array.map((currentValue, index, array) => {
    // Return element for newArray
});

---

Paramètres

• callback : Fonction qui produit un élément du nouveau tableau, prenant trois arguments :
  • currentValue : L'élément actuel en cours de traitement.
  • index (facultatif) : L'index de l'élément actuel.
  • array (facultatif) : La carte du tableau a été appelée.
• thisArg (facultatif) : valeur à utiliser comme ceci lors de l'exécution du rappel.

---

Valeur de retour

Un nouveau tableau dont chaque élément est le résultat de la fonction de rappel.

---

Comment fonctionne map()

• Immuabilité : map() ne modifie pas le tableau d'origine.
• Transformation par élément : applique la fonction de rappel à chaque élément.
• Renvoie un nouveau tableau : collecte les résultats dans un nouveau tableau.

---

Exemples

a. Cartographie des numéros

Exemple : Multipliez chaque nombre d'un tableau par 2.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);

console.log(doubled); // Output: [2, 4, 6, 8, 10]

b. Transformer les cordes

Exemple : Convertir un tableau de chaînes en majuscules.

const fruits = ['apple', 'banana', 'cherry'];
const upperFruits = fruits.map(fruit => fruit.toUpperCase());

console.log(upperFruits); // Output: ['APPLE', 'BANANA', 'CHERRY']

c. Extraction des propriétés d'un objet

Exemple : Extraire une propriété spécifique d'un tableau d'objets.

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
const names = users.map(user => user.name);

console.log(names); // Output: ['Alice', 'Bob']

d. Cartographie sur des tableaux d'objets

Exemple : Transformez chaque objet dans un tableau.

const products = [
  { productId: 1, price: 100 },
  { productId: 2, price: 200 },
];
const discountedProducts = products.map(product => ({
  ...product,
  price: product.price * 0.9,
}));

console.log(discountedProducts);
// Output:
// [
//   { productId: 1, price: 90 },
//   { productId: 2, price: 180 },
// ]

---

Différence entre map() et forEach()

• carte() :
  • Renvoie un nouveau tableau.
  • Utilisé lorsque vous souhaitez transformer chaque élément et collecter les résultats.
• pourEach() :
  • Renvoie non défini.
  • Utilisé lorsque vous souhaitez effectuer des effets secondaires (par exemple, journalisation, modification de variables externes) et que vous n'avez pas besoin d'un nouveau tableau.

Exemple avec forEach() :

let newArray = array.map(function callback(currentValue, index, array) {
    // Return element for newArray
}, thisArg);

---

Utilisation de map() avec les fonctions fléchées

Les fonctions fléchées fournissent une syntaxe concise pour écrire la fonction de rappel.

Exemple :

let newArray = array.map((currentValue, index, array) => {
    // Return element for newArray
});

---

map() en TypeScript

TypeScript ajoute un typage statique à JavaScript, ce qui peut aider à détecter les erreurs au moment de la compilation.

a. Tapez les annotations

Vous pouvez spécifier les types pour les éléments du tableau et le type de retour.

Exemple :

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);

console.log(doubled); // Output: [2, 4, 6, 8, 10]

b. Types génériques

Vous pouvez définir des fonctions génériques pour fonctionner avec n'importe quel type.

Exemple :

const fruits = ['apple', 'banana', 'cherry'];
const upperFruits = fruits.map(fruit => fruit.toUpperCase());

console.log(upperFruits); // Output: ['APPLE', 'BANANA', 'CHERRY']

---

Cas d'utilisation courants

• Transformation des données : convertissez les données d'un formulaire à un autre.
• Extraction de valeurs : extrayez des champs spécifiques d'objets.
• Composition de données : créez de nouveaux tableaux basés sur des données existantes.
• Calculs : Effectuez des calculs sur chaque élément.

---

Sujets avancés

a. Chaînage de map() avec d'autres méthodes de tableau

Vous pouvez chaîner map() avec d'autres méthodes de tableau comme filter(), réduire(), etc.

Exemple :

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
const names = users.map(user => user.name);

console.log(names); // Output: ['Alice', 'Bob']

b. Gestion des opérations asynchrones

map() ne gère pas les opérations asynchrones dans le rappel. Si vous devez effectuer des opérations asynchrones, pensez à utiliser Promise.all() avec map().

Exemple :

const products = [
  { productId: 1, price: 100 },
  { productId: 2, price: 200 },
];
const discountedProducts = products.map(product => ({
  ...product,
  price: product.price * 0.9,
}));

console.log(discountedProducts);
// Output:
// [
//   { productId: 1, price: 90 },
//   { productId: 2, price: 180 },
// ]

---

Bonnes pratiques

• Ne pas utiliser map() pour les effets secondaires : utilisez plutôt forEach() si vous n'avez pas besoin d'un nouveau tableau.
• Évitez de modifier le tableau d'origine : map() ne doit pas muter le tableau d'origine ou ses éléments.
• Renvoyer une valeur : assurez-vous que votre fonction de rappel renvoie une valeur ; sinon, le nouveau tableau contiendra des éléments non définis.
• Utilisez les fonctions fléchées pour plus de concision : elles rendent votre code plus court et plus lisible.

---

Conclusion

Comprendre la fonction map() est essentiel pour une manipulation efficace des tableaux en JavaScript et TypeScript. C'est une méthode polyvalente qui vous permet de transformer les données de manière propre et efficace. Rappelez-vous que map() :

• Crée un nouveau tableau.
• Applique une fonction à chaque élément.
• Ne modifie pas le tableau d'origine.

En maîtrisant map(), vous écrirez un code plus concis et fonctionnel, conduisant à une meilleure maintenabilité et lisibilité.

Merci d'avoir lu. Si vous aimez ce contenu, n'hésitez pas à m'offrir un café :
https://buymeacoffee.com/kellyblaire

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!