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 중국어 웹사이트의 기타 관련 기사를 참조하세요!