Heim > Web-Frontend > js-Tutorial > Wie füge ich doppelte Schlüssel zusammen und summiere ihre Werte in einem JavaScript-Objektarray?

Wie füge ich doppelte Schlüssel zusammen und summiere ihre Werte in einem JavaScript-Objektarray?

Linda Hamilton
Freigeben: 2024-11-28 03:47:10
Original
844 Leute haben es durchsucht

How to Merge Duplicate Keys and Sum Their Values in a JavaScript Object Array?

Doppelte 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 },
];
Nach dem Login kopieren

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 },
];
Nach dem Login kopieren

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);
Nach dem Login kopieren

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!

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