Wie ruft man reduce auf ein Array von Objekten auf, um deren Eigenschaften zu summieren?

Question

Sagen wir, ich möchte summieren a.x für jedes Element in arr .

arr = [ { x: 1 }, { x: 2 }, { x: 4 } ];
arr.reduce(function(a, b){ return a.x + b.x; }); // => NaN

Ich habe Grund zu der Annahme, dass a.x es undefined zu einem bestimmten Zeitpunkt.

Das Folgende funktioniert gut

arr = [ 1, 2, 4 ];
arr.reduce(function(a, b){ return a + b; }); // => 7

Was mache ich im ersten Beispiel falsch?

Answer 1

Bei der ersten Iteration wird 'a' das erste Objekt im Array sein, daher wird a.x + b.x 1+2, also 3 zurückgeben. Bei der nächsten Iteration wird die zurückgegebene 3 a zugewiesen, so dass a eine Zahl ist und der Aufruf von a.x NaN ergibt.

Eine einfache Lösung besteht darin, die Zahlen zunächst in einem Array abzubilden und sie dann wie folgt zu reduzieren:

arr.map(a=>a.x).reduce(function(a,b){return a+b})

aquí arr.map(a=>a.x) wird ein Array von Zahlen [1,2,4] bereitstellen, das nun mit .reduce(function(a,b){return a+b}) wird diese Zahlen einfach und problemlos addieren

Eine andere einfache Lösung besteht darin, eine Anfangssumme von Null zu bilden, indem man 'a' 0 zuweist (siehe unten):

arr.reduce(function(a,b){return a + b.x},0)

Answer 2

Wenn Sie ein komplexes Objekt mit vielen Daten haben, z. B. ein Array von Objekten, können Sie schrittweise vorgehen, um dieses Problem zu lösen.

z.B:

const myArray = [{ id: 1, value: 10}, { id: 2, value: 20}];

Zuerst sollten Sie Ihr Array in ein neues Array Ihres Interesses mappen, in diesem Beispiel könnte es ein neues Array von Werten sein.

const values = myArray.map(obj => obj.value);

Diese Callback-Funktion gibt ein neues Array zurück, das nur Werte aus dem ursprünglichen Array enthält, und speichert es in values const. Jetzt ist Ihr values const ein Array wie dieses:

values = [10, 20];

Und nun können Sie Ihre Reduktion durchführen:

const sum = values.reduce((accumulator, currentValue) => { return accumulator + currentValue; } , 0);

Wie Sie sehen können, führt die reduce-Methode die Callback-Funktion mehrfach aus. Dabei wird jedes Mal der aktuelle Wert des Elements im Array genommen und mit dem Akkumulator summiert. Um die Summe richtig zu bilden, müssen Sie den Anfangswert des Akkumulators als zweites Argument der reduce-Methode festlegen.

Jetzt haben Sie Ihre neue Konstsumme mit dem Wert von 30.

Answer 3

Bei jedem Schritt der Reduzierung geben Sie nicht eine neue {x:???} Objekt. Also müssen Sie entweder tun:

arr = [{x:1},{x:2},{x:4}]
arr.reduce(function(a,b){return a + b.x})

oder Sie müssen Folgendes tun

arr = [{x:1},{x:2},{x:4}]
arr.reduce(function(a,b){return {x: a.x + b.x}; })

Answer 4

Ich habe es in ES6 mit einer kleinen Verbesserung gemacht:

arr.reduce((a, b) => ({x: a.x + b.x})).x

Rückgabenummer

Answer 5

Im ersten Schritt wird es gut funktionieren, da der Wert von a ist 1 und die von b wird 2 sein, aber da 2+1 zurückgegeben wird, wird im nächsten Schritt der Wert von b wird der Rückgabewert sein from step 1 i.e 3 und so b.x wird undefiniert sein... und undefiniert + anyNumber wird NaN sein und das ist, warum Sie dieses Ergebnis erhalten.

Stattdessen können Sie dies versuchen, indem Sie den Anfangswert auf Null setzen, d.h.

arr.reduce(function(a,b){return a + b.x},0);

---