Comment créer une liste de propriétés hiérarchique à partir d'objets complexes de manière récursive en JavaScript ?

Création récursive d'une liste de propriétés hiérarchiques à partir d'objets complexes

Dans les situations où des objets complexes contiennent plusieurs sous-objets et propriétés avec différents types de données, il devient nécessaire de construire une liste hiérarchique de ces propriétés. Pour y parvenir, une approche de bouclage récursif est essentielle.

Problème donné :

Un objet est fourni avec la structure suivante :

<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>

Sortie souhaitée :

L'objectif est de créer une liste de clés qui reflète avec précision la hiérarchie de l'objet :

aProperty.aSetting1
aProperty.aSetting2
aProperty.aSetting3
aProperty.aSetting4
aProperty.aSetting5
bProperty.bSetting1.bPropertySubSetting
bProperty.bSetting2
cProperty.cSetting

Solution initiale :

<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>

Cette fonction parcourt l'objet et imprime les clés, mais elle ne maintient pas la hiérarchie.

Solution récursive :

Pour préserver la hiérarchie, nous pouvons conserver une chaîne de pile qui représente le chemin de la propriété actuelle. Lorsqu'une propriété primitive est rencontrée, le chemin est imprimé. Pour les objets imbriqués, la pile est mise à jour et la récursion continue.

<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>

Notes supplémentaires :

• Cette solution conserve la même structure d'objet mais ajoute le chemin complet vers la liste de sortie.
• Pour une solution plus élégante qui sépare la hiérarchie des données, reportez-vous à une autre réponse.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!