Javascript array.reduce ()

array.reduce()

reduce führt eine Callback-Funktion auf allen Werten des Arrays durch und gibt nur einen Wert zurück. reduce ändert des Original-Arrays nicht.

array.reduce (callback, [initialValue]);

callback ist die obligatorische Callback-Funktion, in der die Operation durchgeführt wird. Das optionale Argument initialValue ist der Anfangswert.

const numbers = [400, 12, 333];
const sum = numbers.reduce (function summarize(sum, number) {
  const updatedSum = sum + number;
  return updatedSum;
}, 0);

sum;
console.log ("sum", sum); 

JSON: Komplexe Funktionen mit array.map, array.filter und array.reduce

So richtig in Fahrt kommen die Array-Methoden reduce, filter, find und map bei der Verarbeitung von JSON-Arrays. Das Beispiel filtert alle Produkte vom Typ »Buch« und berechnet den Gesamtwert der Bücher im Lager.

const produkte = [
	{"art": "Buch", "no": 1724, "price": "3.75", "lager": 27},
	{"art": "Kalender", "no": 475, "price": "13.99", "lager": 13},
	{"art": "Buch", "no": 188, "price": "14.05", "lager": 28},
	{"art": "Spiel", "no": 774, "price": "22.99", "lager": 4},
	{"art": "Papier", "no": 2713, "price": "4.95", "lager": 120},
	{"art": "Spiel", "no": 75, "price": "2.50", "lager": 32}
];

const buchwert  = 
	produkte.filter (
		function(obj){
			if (obj.art == "Buch") {
				return obj;
			}; 
    	}).map (function (obj) {
        	return obj.price * obj.lager;     // [Log] prev, curr – 101.25 – 393.40
    	}).reduce ( function (prev, curr) {
        	return ((parseFloat(prev) + parseFloat(curr)).toFixed(2))
    	});

console.log ("buchwert", buchwert);

Was passiert hier? produkte.filter () gibt bei jedem Schritt ein Objekt zurück, bei dem obj.art === "Buch" true liefert. Das ist dann also ein Array mit zwei Objekten für die beiden Bücher.

map () nimmt diese beiden Objekte und berechnet den Gesamtwert mit der Multiplikation obj.price * obj.lager. Der Rückgabewert ist jetzt ein Array mit zwei einfachen Werten: der Gesamtwert des ersten Buchs und der Gesamtwert des zweiten Buchs.

Im letzten Schritt bildet reduce die Summe aus diesen beiden Werten. Weil die Preise im Objekt produkte in Hochkommas geschrieben sind, liegen Strings vor. parseFloat wandelt die Strings in Gleitkommazahlen um und addiert die Werte. toFixed am Ende der Verarbeitung begrenzt die Zahl der Nachkommastellen auf zwei.

War das kompliziert? Schreiben wir dieses Skript mit einer Arrow-Funktion anstelle der ausführlichen Notation, ist es besser lesbar und nachvollziehbar.

const buchwert = produkte.filter ((obj) => obj.art === "Buch") 
        .map ((obj) => obj.price * obj.lager)
        .reduce ( (prev, curr) => (parseFloat(prev) + parseFloat(curr)).toFixed(2));