Wie konvertiert man ein flaches Array von JSON-Objekten effizient in eine hierarchische Baumstruktur in JavaScript?

Konvertieren eines flachen Arrays in eine hierarchische Baumstruktur in JavaScript

In JavaScript stoßen wir häufig auf Situationen, in denen wir Daten hierarchisch organisieren müssen. Eine gängige Darstellung ist eine Baumstruktur, in der Knoten durch Eltern-Kind-Beziehungen miteinander verbunden sind. In diesem Artikel wird eine effiziente Technik zum Konvertieren eines flachen Arrays von JSON-Objekten in eine solche hierarchische Baumstruktur untersucht.

Problembeschreibung

Angenommen ein Array von JSON-Objekten, von denen jedes einen Knoten im Baum darstellt, Mit Eigenschaften wie „id“, „parentId“, „level“ und „text“ wollen wir dieses flache Array in ein verschachteltes JSON-Objekt umwandeln, in dem jeder Knoten ein Array davon enthält Kinder.

Lösung

Ein effektiver Ansatz besteht darin, einen Kartensuchalgorithmus zu verwenden. Indem wir eine Karte erstellen, die die „id“ jedes Knotens mit seinem entsprechenden Index im Array verknüpft, können wir das Array effizient durchlaufen und die hierarchische Struktur aufbauen.

Zuerst initialisieren wir die Karte und stellen sicher, dass jeder Knoten eine hat Leeres „Children“-Array zum Speichern seiner Nachkommen. Dann durchlaufen wir das Array und überprüfen für jeden Knoten seine „parentId“. Wenn es nicht „0“ ist, suchen wir den übergeordneten Knoten anhand seiner „id“ aus der Karte und hängen den aktuellen Knoten als untergeordneten Knoten an. Knoten mit „parentId“ als „0“ stellen die Wurzeln des Baums dar.

Die Hauptvorteile dieser Lösung sind ihre Effizienz und ihre Fähigkeit, mehrere Wurzeln zu verarbeiten. Es ist nicht auf externe Bibliotheken angewiesen und kann baumelnde Zweige (untergeordnete Knoten ohne übergeordnete Knoten) verarbeiten.

Hier ist ein JavaScript-Codeausschnitt, der diese Lösung implementiert:

function list_to_tree(list) {
  var map = {}, node, roots = [], i;
  
  for (i = 0; i < list.length; i += 1) {
    map[list[i].id] = i; // initialize the map
    list[i].children = []; // initialize the children
  }
  
  for (i = 0; i < list.length; i += 1) {
    node = list[i];
    if (node.parentId !== "0") {
      // if you have dangling branches check that map[node.parentId] exists
      list[map[node.parentId]].children.push(node);
    } else {
      roots.push(node);
    }
  }
  return roots;
}

Verwendung der bereitgestellten Beispieleingabe , generiert die Funktion die erwartete hierarchische Ausgabe, wie im folgenden Beispiel gezeigt:

var 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
      }
    ];

console.log(list_to_tree(entries));

Dieser Ansatz bietet eine unkomplizierte und effiziente Lösung zum Erstellen Hierarchische Baumstrukturen aus flachen Arrays, die die Anforderungen Ihrer Datenverwaltungs- und Visualisierungsanforderungen erfüllen.

Das obige ist der detaillierte Inhalt vonWie konvertiert man ein flaches Array von JSON-Objekten effizient in eine hierarchische Baumstruktur in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!