Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie erstelle ich rekursiv eine hierarchische Eigenschaftenliste aus komplexen Objekten in JavaScript?

DDD
Freigeben: 2024-10-20 14:29:29
Original
280 Leute haben es durchsucht

How to Create a Hierarchical Property List from Complex Objects Recursively in JavaScript?

Rekursives Erstellen einer hierarchischen Eigenschaftenliste aus komplexen Objekten

In Situationen, in denen komplexe Objekte mehrere Unterobjekte und Eigenschaften mit unterschiedlichen Datentypen enthalten, Es besteht die Notwendigkeit, eine hierarchische Liste dieser Eigenschaften zu erstellen. Um dies zu erreichen, ist ein rekursiver Schleifenansatz unerlässlich.

Gegebenes Problem:

Ein Objekt wird mit der folgenden Struktur bereitgestellt:

<code class="javascript">var object = {
    aProperty: {
        aSetting1: 1,
        aSetting2: 2,
        aSetting3: 3,
        aSetting4: 4,
        aSetting5: 5
    },
    bProperty: {
        bSetting1: {
            bPropertySubSetting : true
        },
        bSetting2: "bString"
    },
    cProperty: {
        cSetting: "cString"
    }
};</code>
Nach dem Login kopieren

Gewünschte Ausgabe:

Das Ziel besteht darin, eine Liste von Schlüsseln zu erstellen, die die Hierarchie des Objekts genau widerspiegelt:

aProperty.aSetting1
aProperty.aSetting2
aProperty.aSetting3
aProperty.aSetting4
aProperty.aSetting5
bProperty.bSetting1.bPropertySubSetting
bProperty.bSetting2
cProperty.cSetting
Nach dem Login kopieren

Erste Lösung:

<code class="javascript">function iterate(obj) {
    for (var property in obj) {
        if (obj.hasOwnProperty(property)) {
            if (typeof obj[property] == "object") {
                iterate(obj[property]);
            }
            else {
                console.log(property + "   " + obj[property]);
            }
        }
    }
}</code>
Nach dem Login kopieren

Diese Funktion durchläuft das Objekt und gibt die Schlüssel aus, behält jedoch nicht die Hierarchie bei.

Rekursive Lösung:

Um die Hierarchie beizubehalten, können wir eine Stapelzeichenfolge verwalten, die den Pfad der aktuellen Eigenschaft darstellt. Wenn eine primitive Eigenschaft gefunden wird, wird der Pfad gedruckt. Bei verschachtelten Objekten wird der Stapel aktualisiert und die Rekursion fortgesetzt.

<code class="javascript">function iterate(obj, stack) {
        for (var property in obj) {
            if (obj.hasOwnProperty(property)) {
                if (typeof obj[property] == "object") {
                    iterate(obj[property], stack + '.' + property);
                } else {
                    console.log(property + "   " + obj[property]);
                    $('#output').append($(&quot;<div/>&quot;).text(stack + '.' + property))
                }
            }
        }
    }

iterate(object, '');</code>
Nach dem Login kopieren

Zusätzliche Hinweise:

  • Diese Lösung behält die gleiche Objektstruktur bei, fügt aber hinzu den vollständigen Pfad zur Ausgabeliste.
  • Eine elegantere Lösung, die die Hierarchie von den Daten trennt, finden Sie in einer anderen Antwort.

Das obige ist der detaillierte Inhalt vonWie erstelle ich rekursiv eine hierarchische Eigenschaftenliste aus komplexen Objekten in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage