Einführung

Während Sie einen Einführungskurs in Javascript absolvieren und die verschiedenen Methoden der Arrays kennenlernen. Ich habe die wirkliche Leistungsfähigkeit der Reduktionsmethode nicht ganz verstanden und erst nachdem ich ein zweites Mal darauf zurückgegriffen habe, wird mir klar, wie nützlich diese Methode wirklich ist. Ich hoffe, dass der Artikel für einige klarer macht, wie diese Methode funktioniert und wann sie verwendet werden sollte.

Die Methode

Array.prototype.reduce(callbackFunction)
Array.prototype.reduce(callbackFunction, initialValue)

Was genau bewirkt diese Methode?

Die Methode Reduce() verarbeitet jedes Element eines Arrays mithilfe einer Rückruffunktion und akkumuliert das Ergebnis in einem einzelnen Wert. Wenn ein Anfangswert angegeben wird, wird dieser als Ausgangspunkt verwendet; andernfalls wird das erste Array-Element verwendet und die Iteration beginnt beim zweiten Element.

Callback-Funktionsparameter

callbackFunction(accumulator, currentValue, currentIndex, array){}

Akkumulator

Das kumulierte Ergebnis der vorherigen Iteration oder der Anfangswert, falls angegeben.

aktueller Wert

Der Wert des aktuell verarbeiteten Array-Elements.

aktuellerIndex

Der Index des aktuellen Elements, beginnend bei 0, wenn ein Anfangswert angegeben wird, andernfalls 1.

Array

Das Array, auf dem die Methode Reduce() ausgeführt wird.

Anfangswert

Wenn Sie die Reduzierungsmethode ohne Anfangswert verwenden, nimmt die Rückruffunktion das erste Element des Arrays, initialisiert es als Akkumulator und iteriert dann durch den Rest des Arrays.

Anwendungsfälle

Das häufigste Beispiel, auf das Sie bei der Verwendung der Reduzierungsmethode stoßen, ist die Summe eines Arrays.

const ages = [23, 15, 45, 13, 66, 54, 38];
let sumOfAges = ages.reduce(function(sumOfAges, currentAge){
    sumOfAges = sumOfAges   currentAge;
    return sumOfAges;
}); // 254

Auch wenn die Reduce-Methode genau dafür gut ist und gut darin ist, kann sie noch viel mehr.

Das maximale Alter einer Gruppe ermitteln

const ages = [23, 15, 45, 13, 66, 54, 38];
let oldestPerson = ages.reduce(function(maxAge, currentAge){
    if(currentAge>maxAge){
        maxAge = currentAge;
    }
    return maxAge;
}); // 66

Hier verwenden wir die Reduzierungsmethode, um das höchste Alter, das wir im Array finden, zu speichern und diesen Wert zurückzugeben, sobald er durch das gesamte Array iteriert wurde.

Duplikate in einem Array entfernen

const store = ['apple', 'pear', 'apple', 'orange', 'apple', 'pear'];
let itemCatalogue = store.reduce(function(uniqueStoreItems, currentItem){
    if(!uniqueStoreItems.includes(currentItem)){
        uniqueStoreItems.push(currentItem);
    }
    return uniqueStoreItems;
}, []); // ['apple', 'pear', 'orange']

Wichtig Hier ist zu beachten, dass wir für den Anfangswert in der Reduzierungsmethode ein leeres Array bereitstellen, []. Das bedeutet, dass der Akkumulator jetzt ein Array ist und unsere Rückruffunktion nur Elemente pusht, die sich noch nicht in diesem Array befinden. Aus diesem Grund haben wir Duplikate entfernt.

Ermitteln der Anzahl der Elemente in einem Array

const store = ['apple', 'pear', 'apple', 'orange', 'apple', 'pear'];
let itemCount = store.reduce(function(count, currentItem){
    count[currentItem] = (count[currentItem] || 0)   1;
    return count;
}, {}); // { apple: 3, pear: 2, orange: 1 }

Wichtig ist hier zu beachten, dass der Anfangswert ein leeres Objekt ist. Während wir die Artikel im Geschäft durchgehen, füllen wir den Artikel mit der Anzahl aus.

Abschluss

Zunächst einmal, wenn Sie es bis hierher geschafft haben, vielen Dank für die Lektüre! Mein Hauptziel beim Schreiben dieses Artikels war es, mein Verständnis der Reduzierungsmethode zu festigen, und ich hoffe, dass Sie hier vielleicht auch etwas Neues gelernt haben! Die Reduce-Methode hat viele wirklich coole Anwendungen und ist wirklich praktisch zu verwenden. Haben Sie weitere Anwendungsfälle oder lustige Tricks mit der Methode? Ich würde es gerne wissen!