Heim > Web-Frontend > js-Tutorial > Wie gruppiere ich Array-Elemente nach Objekteigenschaften in JavaScript?

Wie gruppiere ich Array-Elemente nach Objekteigenschaften in JavaScript?

DDD
Freigeben: 2024-12-31 01:53:12
Original
835 Leute haben es durchsucht

How to Group Array Items by Object Properties in JavaScript?

Array-Elemente nach Objekteigenschaften gruppieren

In Ihrem Szenario möchten Sie ein Array, das Objekte mit gemeinsamen Gruppeneigenschaften enthält, in einem neuen Array zusammenfassen . Jede Gruppe sollte ein eindeutiges Farbarray haben.

Um dies mit JavaScript zu erreichen:

  1. Erstellen Sie eine Zuordnung von Gruppennamen zu Werten:
    Erstellen Sie eine leeres Objekt, group_to_values. Durchlaufen Sie dann das Eingabearray myArray mit der Reduce-Methode.
  • Überprüfen Sie für jedes Objekt in myArray die Gruppeneigenschaft.
  • Speichern Sie die Gruppeneigenschaft als Geben Sie „group_to_values“ ein.
  • Erstellen Sie ein Array an diesem Schlüssel, wenn dies nicht der Fall ist existieren.
  • Schieben Sie die Farbeigenschaft des Objekts in das Array am entsprechenden Gruppenschlüssel.
var group_to_values = myArray.reduce(function (obj, item) {
    obj[item.group] = obj[item.group] || [];
    obj[item.group].push(item.color);
    return obj;
}, {});
Nach dem Login kopieren
  1. In das gewünschte Format umwandeln:
    Konvertieren Sie das Objekt „group_to_values“ in das gewünschte Array-Format. Verwenden Sie Object.keys(), um die Gruppennamen abzurufen und sie in Objekte umzuwandeln.
var groups = Object.keys(group_to_values).map(function (key) {
    return {group: key, color: group_to_values[key]};
});
Nach dem Login kopieren

Das Ergebnis, groups, ist ein Array von Objekten, die jeweils eine Gruppe darstellen, mit einem Farbarray Enthält alle eindeutigen Farben für diese Gruppe.

Das obige ist der detaillierte Inhalt vonWie gruppiere ich Array-Elemente nach Objekteigenschaften in JavaScript?. 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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage