ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript で複雑なオブジェクトから階層プロパティ リストを再帰的に作成する方法

JavaScript で複雑なオブジェクトから階層プロパティ リストを再帰的に作成する方法

DDD
DDDオリジナル
2024-10-20 14:29:29196ブラウズ

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

複雑なオブジェクトから再帰的に階層プロパティ リストを作成する

複雑なオブジェクトにさまざまなデータ型の複数のサブオブジェクトとプロパティが含まれる状況では、これらのプロパティの階層リストを構築する必要が生じます。これを達成するには、再帰ループのアプローチが不可欠です。

与えられた問題:

オブジェクトは次の構造で提供されます:

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

望ましい出力:

目標は、オブジェクトの階層を正確に反映するキーのリストを作成することです:

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

初期解決策:

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

この関数はオブジェクトをループしてキーを出力しますが、階層は維持されません。

再帰的解決策:

階層を維持するために、現在のプロパティのパスを表すスタック文字列を維持できます。プリミティブ プロパティが見つかると、パスが出力されます。ネストされたオブジェクトの場合、スタックが更新され、再帰が続行されます。

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

追加メモ:

  • このソリューションは同じオブジェクト構造を維持しますが、追加されます。出力リストへの完全なパス。
  • データから階層を分離するより洗練されたソリューションについては、別の回答を参照してください。

以上がJavaScript で複雑なオブジェクトから階層プロパティ リストを再帰的に作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。