La méthode Reduce

Fait partie de la section Logique & Flux du Journey JavaScript de Coddy. Leçon 54 sur 65.

La méthode reduce() vous permet de « réduire » un array à une seule valeur en exécutant une function fournie pour chaque élément du array. Cette seule valeur peut être un nombre, une chaîne de caractères, un objet ou même un autre array.

Voici la syntaxe du reducer :

array.reduce(function(accumulator, currentValue, currentIndex, array) {
    // retourner la valeur mise à jour de l'accumulateur
}, initialValue);

Composants clés :

accumulator : Accumule les valeurs de retour du rappel (pensez-y comme au total cumulé)

currentValue : L'élément en cours de traitement dans le tableau

currentIndex : (optionnel) L'indice de l'élément courant

array : (optionnel) Le tableau sur lequel reduce() a été appelé

initialValue : (optionnel) Une valeur à utiliser comme premier argument lors du premier appel de la fonction de rappel

Par exemple - la somme de nombres :

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15

Comment cela fonctionne étape par étape :

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => {
    console.log(`Accumulator: ${acc}, Current Value: ${curr}`);
    return acc + curr;
}, 0);

// Sortie :
// Accumulateur : 0, Valeur actuelle : 1
// Accumulateur : 1, Valeur actuelle : 2
// Accumulateur : 3, Valeur actuelle : 3
// Accumulateur : 6, Valeur actuelle : 4
// Résultat final : 10

Défi

Facile

Créez une fonction nommée calculateGroceryTotal qui prend un tableau d'objets représentant des articles d'épicerie.

Chaque objet a deux propriétés :

name: chaîne de caractères (nom de l'article)
price: nombre (prix de l'article)

La fonction doit :

Calculer le coût total de tous les articles
Appliquer une remise : - Si le total est supérieur à 100, appliquer 10% de remise
Si le total est supérieur à 50 mais inférieur ou égal à 100, appliquer 5% de remise
Pas de remise pour les totaux de 50 ou moins.

Retourner un objet contenant :

originalTotal: la somme avant remise
discount: le montant économisé
finalTotal: le montant final après remise

Essayez vous-même

function calculateGroceryTotal(items) {
    // Écrire le code ici
    


    return {
        originalTotal: Math.round(originalTotal * 100) / 100,  // Arrondir à 2 décimales
        discount: Math.round(discount * 100) / 100,
        finalTotal: Math.round(finalTotal * 100) / 100
    };
}