Heim > Web-Frontend > js-Tutorial > Wie kann ich in JavaScript ein flaches Array hierarchischer Daten effizient in eine verschachtelte Baumstruktur umwandeln?

Wie kann ich in JavaScript ein flaches Array hierarchischer Daten effizient in eine verschachtelte Baumstruktur umwandeln?

Barbara Streisand
Freigeben: 2024-12-19 22:30:11
Original
578 Leute haben es durchsucht

How Can I Efficiently Convert a Flat Array of Hierarchical Data into a Nested Tree Structure in JavaScript?

Aufbau von Baumstrukturen aus Flat-Array-Daten in JavaScript

Bei der Arbeit mit komplexen hierarchischen Daten ist es notwendig, diese in einer Baumstruktur zu organisieren. wie Struktur für Analyse und Präsentation. In diesem Fall enthält eine geordnete JSON-Datei die Daten, wobei jeder Eintrag eine ID, eine übergeordnete ID, eine Ebene und einen Text hat. Die Aufgabe besteht darin, diese flache Datenstruktur in eine verschachtelte Hierarchie umzuwandeln.

Um diese Transformation effizient zu erreichen, ist es wichtig, eine Kartensuchstrategie zu nutzen. Dazu gehört das Erstellen einer Karte, die jede ID ihrem Index in der Liste zuordnet. Durch die Verwendung dieser Karte kann die verschachtelte Hierarchie in einem Durchgang erstellt werden, wodurch mehrere Schleifen überflüssig werden.

Die folgende JavaScript-Funktion demonstriert den Kartensuchansatz zum Aufbau einer Baumstruktur:

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

Durch die Erstellung einer Karte für den schnellen Zugriff auf übergeordnete Knoten und die Initialisierung von untergeordneten Listen für jeden Knoten kann die Funktion beide for-Schleifen effizient zusammenführen. Dieser Ansatz unterstützt mehrere Wurzeln und kann baumelnde Zweige verarbeiten oder sie mit einer einfachen Änderung ignorieren.

Um die Funktionalität der Funktion zu demonstrieren, können Sie sie mit der folgenden Eingabe ausführen:

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

Dies wird Ausgabe der hierarchischen Baumstruktur mit den erwarteten Beziehungen zwischen den Knoten. Durch die Nutzung der Map-Lookup-Strategie bietet dieser Ansatz eine effiziente und flexible Lösung für die Umwandlung flacher hierarchischer Daten in gut strukturierte Baumarrays.

Das obige ist der detaillierte Inhalt vonWie kann ich in JavaScript ein flaches Array hierarchischer Daten effizient in eine verschachtelte Baumstruktur umwandeln?. 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