


Wie füge ich doppelte Schlüssel zusammen und summiere ihre Werte in einem JavaScript-Objektarray?
Nov 28, 2024 am 03:47 AMDoppelte Schlüssel zusammenführen und Werte in einem Objektarray summieren
In JavaScript kann die Arbeit mit Arrays von Objekten häufig vorkommen. Manchmal besteht möglicherweise die Notwendigkeit, Objekte innerhalb eines Arrays zu gruppieren und zu ändern und dabei bestimmte Eigenschaften beizubehalten. Ein solches Szenario beinhaltet das Summieren von Werten, die mit ähnlichen Schlüsseln verknüpft sind.
Lassen Sie uns diese Aufgabe anhand eines Beispielarrays von Objekten untersuchen:
const objects = [ { name: 'P1', value: 150 }, { name: 'P1', value: 150 }, { name: 'P2', value: 200 }, { name: 'P3', value: 450 }, ];
Unser Ziel ist es, Objekte nach der Eigenschaft „Name“ zu gruppieren und summieren Sie die Eigenschaft „Wert“ für jeden einzelnen „Namen“. Die gewünschte Ausgabe sollte wie folgt aussehen:
[ { name: 'P1', value: 300 }, { name: 'P2', value: 200 }, { name: 'P3', value: 450 }, ];
Um dies zu erreichen, können wir die Objekt- und Array-Manipulationsfunktionen von JavaScript nutzen. Hier ist eine Schritt-für-Schritt-Lösung:
1. Erstellen Sie ein Objekt zum Speichern summierter Werte
Erstellen Sie zunächst ein leeres JavaScript-Objekt namens „holder“, das als Container zum Speichern summierter Werte für jeden „Namen“ dient.
2. Iterieren Sie über das Eingabearray
Verwenden Sie eine „forEach“-Schleife, um über jedes Objekt im Eingabearray („objects“) zu iterieren.
3. Auf vorhandene Namen in „holder“ prüfen
Überprüfen Sie innerhalb der Schleife, ob die „name“-Eigenschaft des aktuellen Objekts bereits als Eigenschaft im „holder“-Objekt vorhanden ist, indem Sie „hasOwnProperty(d.name)“ verwenden.
4. Werte summieren oder initialisieren
Wenn die Eigenschaft „name“ vorhanden ist, fügen Sie die Eigenschaft „value“ des aktuellen Objekts zur entsprechenden Eigenschaft in „holder“ hinzu (z. B. „holder[d.name] = d.value). '). Wenn die Eigenschaft „name“ nicht gefunden wird, initialisieren Sie sie mit der Eigenschaft „value“ des aktuellen Objekts („holder[d.name] = d.value“).
5. Erstellen Sie ein neues Array mit zusammengeführten Objekten
Sobald alle Werte summiert wurden, erstellen Sie ein neues leeres Array mit dem Namen „obj2“, um die zusammengeführten Objekte zu speichern.
6. Iterieren Sie über „Halter“ und verschieben Sie zusammengeführte Objekte.
Verwenden Sie eine weitere Schleife, um über die Eigenschaften des „Halter“-Objekts zu iterieren („for (var prop in holder)“). Erstellen Sie für jede Eigenschaft ein neues Objekt mit den Eigenschaften „Name“ und „Wert“ und verschieben Sie es in „obj2“.
7. Protokollieren Sie die Ausgabe
Zum Schluss protokollieren Sie das Array „obj2“ in der Konsole, um die zusammengeführten Objekte mit summierten „Wert“-Eigenschaften anzuzeigen.
Beispielcode
Hier ist ein Codeausschnitt Das zeigt die Lösung:
const objects = [ { name: 'P1', value: 150 }, { name: 'P1', value: 150 }, { name: 'P2', value: 200 }, { name: 'P3', value: 450 }, ]; const holder = {}; objects.forEach(d => { if (holder.hasOwnProperty(d.name)) { holder[d.name] += d.value; } else { holder[d.name] = d.value; } }); const obj2 = []; for (var prop in holder) { obj2.push({ name: prop, value: holder[prop] }); } console.log(obj2);
Indem Sie diese Schritte befolgen, können Sie mit ähnlichen Schlüsseln verknüpfte Werte effektiv gruppieren und summieren in einem Array von Objekten, wodurch ein neues Array mit geänderten Objekten gemäß der gewünschten Ausgabe erstellt wird.
Das obige ist der detaillierte Inhalt vonWie füge ich doppelte Schlüssel zusammen und summiere ihre Werte in einem JavaScript-Objektarray?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Ersetzen Sie Stringzeichen in JavaScript

Benutzerdefinierte Google -Search -API -Setup -Tutorial

8 atemberaubende JQuery -Seiten -Layout -Plugins

Erstellen Sie Ihre eigenen AJAX -Webanwendungen

10 JavaScript & JQuery MVC -Tutorials
