JavaScript에서 복잡한 개체의 계층적 속성 목록을 반복적으로 만드는 방법은 무엇입니까?-JS 튜토리얼-php.cn

JavaScript에서 복잡한 개체의 계층적 속성 목록을 반복적으로 만드는 방법은 무엇입니까?

DDD

풀어 주다： 2024-10-20 14:29:29

원래의

310명이 탐색했습니다.

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>

로그인 후 복사

추가 참고 사항: