Heim >Web-Frontend >js-Tutorial >Wie kann ich mithilfe eines Vanilla-Ansatzes ein Array von Objekten in JavaScript effizient gruppieren?

Wie kann ich mithilfe eines Vanilla-Ansatzes ein Array von Objekten in JavaScript effizient gruppieren?

Susan Sarandon
Susan SarandonOriginal
2024-12-30 12:31:13280Durchsuche

How Can I Efficiently Group an Array of Objects in JavaScript Using a Vanilla Approach?

Effiziente GroupBy-Methode für Arrays von Objekten

Das Gruppieren von Objekten basierend auf gemeinsamen Eigenschaften ist eine häufige Aufgabe in der Datenverarbeitung. Dieses Snippet bietet eine effiziente Lösung zum Gruppieren von Objekten in einem Array mithilfe eines Vanilla-JavaScript-Ansatzes.

Warum Underscore.js vermeiden?

Obwohl Underscore.js eine GroupBy-Funktion bietet, ist deren Implementierung möglicherweise nicht der Fall Geeignet, wenn Sie „zusammengeführte“ Ergebnisse statt separater Gruppen benötigen.

Custom Vanilla JS GroupBy

Das Folgende Das Skript definiert eine GroupBy-Funktion, die ein Array von Objekten bearbeitet:

var groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};

Beispielverwendung

So gruppieren Sie Objekte nach „Phase“:

const data = [
  { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" },
  ...
];
const groupedByPhase = groupBy(data, 'Phase');

groupedByPhase enthält :

{
  "Phase 1": [
    { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" },
    ...
  ],
  "Phase 2": [
    { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "25" },
    ...
  ]
}

Um weiter zu gruppieren „Schritt“:

const groupedByPhaseStep = _(groupedByPhase).values().map(phase => {
  return groupBy(phase, 'Step');
}).value();

groupedByPhaseStep enthält:

[
  {
    "Phase": "Phase 1",
    "Step": "Step 1",
    "Value": 15
  },
  ...
]

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe eines Vanilla-Ansatzes ein Array von Objekten in JavaScript effizient gruppieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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