Die Reduce-Methode

Teil des Abschnitts Logik & Ablauf der JavaScript-Journey von Coddy — Lektion 54 von 65.

Die Methode reduce() ermöglicht es Ihnen, ein Array auf einen einzelnen Wert zu „reduzieren“, indem eine bereitgestellte Funktion für jedes Element des Arrays ausgeführt wird. Dieser einzelne Wert kann eine Zahl, ein String, ein Objekt oder sogar ein weiteres Array sein.

Hier ist die Syntax des Reducers:

array.reduce(function(accumulator, currentValue, currentIndex, array) {
    // gibt den aktualisierten Akkumulatorwert zurück
}, initialValue);

Schlüsselkomponenten:

accumulator: Akkumuliert die Rückgabewerte des Callbacks (betrachten Sie es als die laufende Summe)

currentValue: Das aktuelle Element, das im Array verarbeitet wird

currentIndex: (optional) Der Index des aktuellen Elements

array: (optional) Das Array, auf dem reduce() aufgerufen wurde

initialValue: (optional) Ein Wert, der als erstes Argument beim ersten Aufruf der Callback-Funktion verwendet wird

Zum Beispiel – Summe von Zahlen:

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

Wie es Schritt für Schritt funktioniert:

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

// Output:
// Accumulator: 0, Current Value: 1
// Accumulator: 1, Current Value: 2
// Accumulator: 3, Current Value: 3
// Accumulator: 6, Current Value: 4
// Final result: 10

Aufgabe

Einfach

Erstelle eine Funktion namens calculateGroceryTotal, die ein Array von Objekten entgegennimmt, die Lebensmittelartikel darstellen.

Jedes Objekt hat zwei Eigenschaften:

name: string (Name des Artikels)
price: number (Preis des Artikels)

Die Funktion sollte:

Die Gesamtkosten aller Artikel berechnen
Einen Rabatt anwenden: - Wenn die Gesamtsumme über 100 liegt, wende 10 % Rabatt an
Wenn die Gesamtsumme über 50, aber unter oder gleich 100 liegt, wende 5 % Rabatt an
Kein Rabatt für Gesamtsummen von 50 oder weniger.

Gib ein Objekt zurück, das Folgendes enthält:

originalTotal: die Summe vor dem Rabatt
discount: der gesparte Betrag
finalTotal: der Endbetrag nach dem Rabatt

Spickzettel

Die Methode reduce() reduziert ein Array auf einen einzelnen Wert, indem sie eine Funktion für jedes Element ausführt:

array.reduce(function(accumulator, currentValue, currentIndex, array) {
    // gibt den aktualisierten Akkumulatorwert zurück
}, initialValue);

Wichtige Komponenten:

accumulator: Akkumuliert die Rückgabewerte des Callbacks (laufende Summe)
currentValue: Das aktuell verarbeitete Element
currentIndex: (optional) Der Index des aktuellen Elements
array: (optional) Das Array, auf dem reduce() aufgerufen wurde
initialValue: (optional) Startwert für den Akkumulator

Beispiel - Summe von Zahlen:

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

Schritt-für-Schritt-Ausführung:

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

// Ausgabe:
// Akkumulator: 0, Aktueller Wert: 1
// Akkumulator: 1, Aktueller Wert: 2
// Akkumulator: 3, Aktueller Wert: 3
// Akkumulator: 6, Aktueller Wert: 4
// Endergebnis: 10

Probier es selbst

function calculateGroceryTotal(items) {
    // Code hier schreiben
    


    return {
        originalTotal: Math.round(originalTotal * 100) / 100,  // Auf 2 Dezimalstellen runden
        discount: Math.round(discount * 100) / 100,
        finalTotal: Math.round(finalTotal * 100) / 100
    };
}

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Die Reduce-Methode

Schlüsselkomponenten:

Spickzettel

Wichtige Komponenten:

Alle Lektionen in Logik & Ablauf