Wie kann man in JavaScript effizient eine hierarchische Baumstruktur aus einem flachen Array erstellen?

Aufbau einer hierarchischen Baumstruktur aus einem flachen Array in JavaScript

Einführung

In JavaScript ist das Arbeiten mit hierarchischen Daten unerlässlich für verschiedene Anwendungen, wie zum Beispiel die Erstellung von Baumstrukturen oder Navigationsmenüs. Wenn Daten in einem flachen Array gespeichert werden, ist es notwendig, sie in eine hierarchische Struktur umzuwandeln, um die Datenbearbeitung und -visualisierung zu erleichtern. In diesem Artikel wird eine effektive Methode zum Erstellen eines Baumarrays aus einem flachen Array in JavaScript demonstriert.

Problem

Gegeben sei eine komplexe JSON-Datei, die aus Objekten mit den folgenden Eigenschaften besteht :

• id: Eindeutiger Bezeichner
• parentId: ID des übergeordneten Knotens (0 für root Knoten)
• Ebene: Tiefe des Knotens im Baum

Die Aufgabe besteht darin, die flache JSON-Struktur in eine hierarchische Baumstruktur mit verschachtelten Objekten umzuwandeln, die die Eltern-Kind-Beziehungen darstellen.

Lösung

Die Lösung nutzt einen Map-Lookup-Ansatz, um die Hierarchie effizient aufzubauen Baumstruktur. Der Algorithmus umfasst zwei Schritte:

1. Erstellen Sie eine Karte zum Indexieren von Objekten:

   • Iterieren Sie durch das flache Array und erstellen Sie eine Karte, wo Die Schlüssel sind die ID-Eigenschaften und die Werte sind das entsprechende Array Indizes.

2. Erstellen Sie die Baumstruktur:

   • Iterieren Sie erneut durch das flache Array:

     • Rufen Sie für jedes Objekt den Index seines übergeordneten Elements aus der Karte ab parentId.
     • Wenn das übergeordnete Objekt existiert (kein Root), hängen Sie das aktuelle Objekt als untergeordnetes Objekt an sein übergeordnetes Objekt an.
     • Wenn das übergeordnete Objekt nicht existiert, ist es ein Root-Knoten und sollte hinzugefügt werden zum Wurzelknoten Array.

Beispiel

Betrachten Sie das folgende flache JSON-Array:

const entries = [{
  "id": "12",
  "parentId": "0",
  "text": "Man",
  "level": "1",
  "children": null
},
{
  "id": "6",
  "parentId": "12",
  "text": "Boy",
  "level": "2",
  "children": null
},
{
  "id": "7",
  "parentId": "12",
  "text": "Other",
  "level": "2",
  "children": null
},
{
  "id": "9",
  "parentId": "0",
  "text": "Woman",
  "level": "1",
  "children": null
},
{
  "id": "11",
  "parentId": "9",
  "text": "Girl",
  "level": "2",
  "children": null
}];

Wenn Sie den obigen Algorithmus auf dieses flache Array anwenden, wird der folgende hierarchische Baum ausgegeben Struktur:

const result = [
{
  "id": "12",
  "parentId": "0",
  "text": "Man",
  "level": "1",
  "children": [
    {
      "id": "6",
      "parentId": "12",
      "text": "Boy",
      "level": "2",
      "children": null
    },
    {
      "id": "7",
      "parentId": "12",
      "text": "Other",
      "level": "2",
      "children": null
    }
  ]
},
{
  "id": "9",
  "parentId": "0",
  "text": "Woman",
  "level": "1",
  "children":
  {
    "id": "11",
    "parentId": "9",
    "text": "Girl",
    "level": "2",
    "children": null
  }
}
];

Fazit

Der vorgestellte Algorithmus bietet eine effiziente Möglichkeit, ein flaches Array hierarchischer Daten in ein strukturiertes Baumarray in JavaScript umzuwandeln. Dieser Ansatz nutzt eine Kartensuche zur Optimierung des Prozesses und unterstützt mehrere Stammknoten. Es ist ideal für Situationen, in denen Sie Baumstrukturen aus komplexen Daten zur weiteren Bearbeitung oder Visualisierung erstellen müssen.

Das obige ist der detaillierte Inhalt vonWie kann man in JavaScript effizient eine hierarchische Baumstruktur aus einem flachen Array erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!