Array.reduce() verstehen

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 einigen klarer macht, wie diese Methode funktioniert und wann sie angewendet 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 durchläuft dann 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 Reduzierungsmethode genau das ist, wozu sie gut ist und was sie gut kann, 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 Methode „reduce“, 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 }

Wichtighier ist 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

Wenn Sie es bis hierher geschafft haben, zunächst einmal 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!

Das obige ist der detaillierte Inhalt vonArray.reduce() verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!