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

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

DDD

Libérer： 2024-10-20 14:29:29

original

311 Les gens l'ont consulté

How to Create a Hierarchical Property List from Complex Objects Recursively in 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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!