Beispiel für die Konvertierung eines flachen JavaScript-Arrays in eine Baumstruktur

10.000 Daten gingen im Hintergrund verloren

Egal wie viel ich plante, ich konnte ihm nicht entkommen. Das Backend warf tatsächlich Zehntausende Daten auf einmal an das Frontend. Naja, zumindest sind es noch keine 100.000. Wie unten gezeigt, gibt der Hintergrund die folgende Struktur zurück:

const flatArr = [
  { id: '001', name: 'Knoten 1' },
  { id: '0011', parentId: '001', name: 'Knoten 1-1' },
  { id: '00111', parentId: '0011', name: 'Knoten 1-1-1' },
  { id: '002', name: 'Knoten 2' },
]

Wie Sie sehen, handelt es sich hierbei eigentlich um ein flaches Array. Unsere Anforderung besteht darin, solche Daten im Kaskadenselektor von Element-ui darzustellen, der die folgende Baumstruktur erhält:

let Optionen = [
  {
    Wert: 'zhinan',
    Bezeichnung: 'Leitfaden',
    Kinder: [
      {
        Wert: 'shejiyuanze',
        Bezeichnung: 'Designprinzipien',
        Kinder: [
          { Wert: 'yizhi', Bezeichnung: 'konsistent' },
          {Wert: 'fankui', Bezeichnung: 'Feedback'}
        ],
      }
    ]
  }
]

Oh mein Gott, dazu muss ich das flache Array in eine Baumstruktur umwandeln!
Die Operation war so wild wie ein Tiger und die Rekursion wurde ohne ein Wort geschrieben.

Rekursive Methode

Es ist fertig, der Code ist prägnant, die Idee ist klar, aber was passiert, wenn es ausgeführt wird? Die Seite hängt. Laut console.time() hat es etwa 18 Sekunden gedauert, die benötigte Baumstruktur zu berechnen.
Ich habe über mich nachgedacht. Es gibt Zehntausende von Daten. Jedes Mal, wenn ich rekursiv von unten nach oben nach den untergeordneten Knoten des übergeordneten Knotens suche, muss ich das Array einmal durchlaufen, was natürlich zeitaufwändig ist! Darüber hinaus hat die Berechnungszeit offensichtlich zum Einfrieren der Seite geführt, sodass diese Methode definitiv nicht ratsam ist. Gibt es also eine bessere Lösung?

Nicht rekursive Methode

Hier wenden wir geschickt die Funktion an, dass Objekte Referenzen speichern. Jedes Mal wird die ID des aktuellen Knotens als Schlüssel verwendet, um die Referenzinformationen des entsprechenden Knotens zu speichern. Beim Durchlaufen des Arrays werden die untergeordneten Informationen von objMap jedes Mal aktualisiert. Auf diese Weise bleiben alle Knoten und ihre untergeordneten Knoten in objMap erhalten. Am wichtigsten ist, dass wir das Array nur einmal durchlaufen müssen und die Zeitkomplexität O(n) beträgt. Die Berechnungszeit beträgt bei dieser Methode nur 60ms!

Zusammenfassen

• Rekursive Methode: Jedes Mal, wenn Sie rekursiv nach den untergeordneten Knoten des aktuellen Knotens suchen, müssen Sie das Array erneut durchlaufen und die zeitliche Komplexität beträgt O (nlogn).
• Nicht rekursive Methode: Suche nach untergeordneten Knoten vom Stammknoten abwärts, speichere die Informationen jedes Knotens und seiner untergeordneten Knoten über die Karte, die untergeordneten Knoten speichern die Referenzen auf der Karte, die untergeordneten Knoten jedes Knotens können in der Karte anhand der ID gefunden werden, die zeitliche Komplexität beträgt O(n)

Schauen wir uns eine Vergleichstabelle an:

Aus dem oben beschriebenen Trend, dass die zeitliche Komplexität mit der Datenmenge zunimmt, können wir erkennen, dass bei immer größer werdenden Datenmengen der Zeitaufwand des rekursiven Algorithmus viel größer ist als der des nicht-rekursiven Algorithmus. Daher bietet die Verwendung eines rekursiven Algorithmus bei kleinen Datenmengen gewisse Vorteile. Bei einer bestimmten Datenmenge werden die Nachteile des rekursiven Ansatzes jedoch immer deutlicher und die Verwendung eines nicht rekursiven Algorithmus ist viel schneller!

Abschließend muss ich sagen, dass wir durch diesen Vergleich deutlich die Bedeutung von Algorithmen spüren können. Unterschiedliche Implementierungsmethoden können große Unterschiede aufweisen, die die Aufmerksamkeit jedes Entwicklers verdienen!

Dies ist das Ende dieses Artikels über das Implementierungsbeispiel zur Konvertierung eines flachen JavaScript-Arrays in eine Baumstruktur. Weitere relevante Inhalte zur Konvertierung eines flachen JavaScript-Arrays in eine Baumstruktur finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!