Heim > Web-Frontend > js-Tutorial > Wie gruppiert man JavaScript-Objekte nach mehreren Eigenschaften und summiert ihre Werte?

Wie gruppiert man JavaScript-Objekte nach mehreren Eigenschaften und summiert ihre Werte?

Mary-Kate Olsen
Freigeben: 2024-11-11 03:30:03
Original
231 Leute haben es durchsucht

How do you group JavaScript objects by multiple properties and sum their values?

Objekte nach mehreren Eigenschaften gruppieren und ihre Werte summieren

In JavaScript ist es üblich, mit Arrays von Objekten zu arbeiten. Manchmal ist es notwendig, diese Objekte nach mehreren Eigenschaften zu gruppieren, während Berechnungen für ihre Werte durchgeführt werden, z. B. das Summieren bestimmter Eigenschaften.

Problemübersicht

Gegeben ein Array von Objekten Unser Ziel ist es, sie anhand von zwei Eigenschaften (Form und Farbe) zu gruppieren. Allerdings möchten wir Objekte nur dann als Duplikate behandeln, wenn ihre Form und Farbe übereinstimmen. Das Ziel besteht darin, die verwendeten und Instanzeigenschaften von Objekten innerhalb jeder Gruppe zusammenzufassen und alle Duplikate zu entfernen.

Erwartetes Ergebnis

Verwendung des folgenden Beispielarrays:

arr = [
    {shape: 'square', color: 'red', used: 1, instances: 1},
    {shape: 'square', color: 'red', used: 2, instances: 1},
    {shape: 'circle', color: 'blue', used: 0, instances: 0},
    {shape: 'square', color: 'blue', used: 4, instances: 4},
    {shape: 'circle', color: 'red', used: 1, instances: 1},
    {shape: 'circle', color: 'red', used: 1, instances: 0},
    {shape: 'square', color: 'blue', used: 4, instances: 5},
    {shape: 'square', color: 'red', used: 2, instances: 1}
];
Nach dem Login kopieren

Wir erwarten, ein Array mit vier Gruppen zu erhalten:

[{shape: "square", color: "red", used: 5, instances: 3},
{shape: "circle", color: "red", used: 2, instances: 1},
{shape: "square", color: "blue", used: 11, instances: 9},
{shape: "circle", color: "blue", used: 0, instances: 0}]
Nach dem Login kopieren

Lösungsverwendung Array#reduce und Object#assign

Um dies zu erreichen, können wir die Array#reduce-Methode von JavaScript verwenden, um über das Array von Objekten zu iterieren. Für jedes Objekt erstellen wir einen eindeutigen Schlüssel, indem wir die Form- und Farbeigenschaften verketten. Anschließend verwenden wir ein Hilfsobjekt, einen Helfer, um den Überblick über die gruppierten Objekte zu behalten.

var helper = {};
var result = arr.reduce(function(r, o) {
  var key = o.shape + '-' + o.color;

  if(!helper[key]) {
    helper[key] = Object.assign({}, o); // create a copy of o
    r.push(helper[key]);
  } else {
    helper[key].used += o.used;
    helper[key].instances += o.instances;
  }

  return r;
}, []);
Nach dem Login kopieren

Wenn der Schlüssel nicht im Hilfsobjekt vorhanden ist, fügen wir mithilfe von Object.assign() einen neuen Eintrag hinzu, um ihn zu erstellen eine neue Kopie des aktuellen Objekts. Anschließend verschieben wir dieses neue Objekt in das Ergebnisarray.

Wenn der Schlüssel bereits im Hilfsprogramm vorhanden ist, bedeutet dies, dass wir auf ein Duplikat gestoßen sind. In diesem Fall erhöhen wir einfach die Eigenschaften „used“ und „instances“ des entsprechenden Objekts im Hilfsprogramm.

Schließlich geben wir das Ergebnisarray zurück, das Objekte effektiv nach Form und Farbe gruppiert und gleichzeitig ihre Werte summiert.

Das obige ist der detaillierte Inhalt vonWie gruppiert man JavaScript-Objekte nach mehreren Eigenschaften und summiert ihre Werte?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage