Guide complet de la méthode JavaScript `reduce()` avec des exemples concrets

La méthode réduire() est une méthode de tableau puissante en JavaScript, utilisée pour parcourir un tableau et le réduire à une valeur unique. Cette méthode est polyvalente et peut gérer des opérations telles que la somme de nombres, l'aplatissement de tableaux, la création d'objets, etc.

---

Syntaxe de réduire()

array.reduce(callback, initialValue);

• callback : Une fonction à exécuter sur chaque élément du tableau.
  • accumulateur : le résultat accumulé de l'exécution de rappel précédente.
  • currentValue : l'élément actuel en cours de traitement.
  • currentIndex (facultatif) : L'index de l'élément actuel.
  • array (facultatif) : le tableau réduit a été appelé.
• initialValue (facultatif) : une valeur à utiliser comme premier argument du premier appel du rappel.

---

Comment réduire() fonctionne étape par étape

1. Commencez par une valeur initiale ou le premier élément du tableau si aucune valeur initiale n'est fournie.
2. Passez l'accumulateur et la valeur actuelle à la fonction de rappel.
3. Mettez à jour l'accumulateur avec la valeur renvoyée par le rappel.
4. Répétez jusqu'à ce que tous les éléments soient traités.
5. Renvoyer la valeur finale accumulée.

---

Exemple 1 : Calculer le total d'un tableau (vie réelle : panier)

Supposons que vous ayez un panier et que vous souhaitiez calculer le prix total des articles.

const cart = [
    { item: "Laptop", price: 1200 },
    { item: "Phone", price: 800 },
    { item: "Headphones", price: 150 }
];

const totalPrice = cart.reduce((acc, curr) => acc + curr.price, 0);

console.log(`Total Price: $${totalPrice}`); // Total Price: 50

---

Exemple 2 : regroupement d'articles par catégorie (vie réelle : organisation de l'inventaire)

Vous souhaitez regrouper les éléments par catégorie.

const inventory = [
    { name: "Apple", category: "Fruits" },
    { name: "Carrot", category: "Vegetables" },
    { name: "Banana", category: "Fruits" },
    { name: "Spinach", category: "Vegetables" }
];

const groupedItems = inventory.reduce((acc, curr) => {
    if (!acc[curr.category]) {
        acc[curr.category] = [];
    }
    acc[curr.category].push(curr.name);
    return acc;
}, {});

console.log(groupedItems);
/*
{
    Fruits: ['Apple', 'Banana'],
    Vegetables: ['Carrot', 'Spinach']
}
*/

---

Exemple 3 : Aplatir un tableau imbriqué (vie réelle : fusion des données de départements)

Vous recevez des données de différents départements sous forme de tableaux imbriqués et devez les combiner en un seul.

const departmentData = [
    ["John", "Doe"],
    ["Jane", "Smith"],
    ["Emily", "Davis"]
];

const flattenedData = departmentData.reduce((acc, curr) => acc.concat(curr), []);

console.log(flattenedData); // ['John', 'Doe', 'Jane', 'Smith', 'Emily', 'Davis']

---

Exemple 4 : Comptage des occurrences (vie réelle : analyses)

Vous disposez d'un large éventail de pages vues sur un site Web et souhaitez compter le nombre de fois que chaque page a été visitée.

const pageViews = ["home", "about", "home", "contact", "home", "about"];

const viewCounts = pageViews.reduce((acc, page) => {
    acc[page] = (acc[page] || 0) + 1;
    return acc;
}, {});

console.log(viewCounts);
/*
{
    home: 3,
    about: 2,
    contact: 1
}
*/

---

Exemple 5 : Implémentation d'une carte personnalisée à l'aide de réduire()

La méthode réduire() peut imiter la fonctionnalité de map().

const numbers = [1, 2, 3, 4];

const doubled = numbers.reduce((acc, curr) => {
    acc.push(curr * 2);
    return acc;
}, []);

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

---

Exemple 6 : Trouver la valeur maximale (vie réelle : trouver les meilleures ventes)

Vous souhaitez trouver le chiffre de ventes le plus élevé à partir d'un ensemble de données.

const sales = [500, 1200, 300, 800];

const highestSale = sales.reduce((max, curr) => (curr > max ? curr : max), 0);

console.log(`Highest Sale: $${highestSale}`); // Highest Sale: 00

---

Exemple 7 : Transformation des données (vie réelle : transformation des données API)

Vous recevez un tableau de données utilisateur et devez le convertir en un objet saisi par ID utilisateur.

array.reduce(callback, initialValue);

---

Conseils et bonnes pratiques

1. Utiliser initialValue : fournissez toujours une valeur initiale pour éviter un comportement inattendu lorsque vous traitez des tableaux vides.
2. Gardez les choses simples : écrivez des fonctions de réduction concises et claires.
3. Mises à jour immuables : lorsque vous travaillez avec des objets ou des tableaux, évitez de les muter directement à l'intérieur du réducteur.

---

Conclusion

La méthode réduire() est incroyablement polyvalente et peut être adaptée à une variété de tâches, de la sommation de valeurs à la transformation de structures de données. Entraînez-vous avec des exemples concrets comme ceux-ci pour approfondir votre compréhension et libérer tout le potentiel de réduire() dans vos projets JavaScript.

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!