>  기사  >  웹 프론트엔드  >  중첩된 JavaScript 개체를 통해 어떻게 반복할 수 있습니까?

중첩된 JavaScript 개체를 통해 어떻게 반복할 수 있습니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-11-03 05:24:31662검색

How Can You Iterate Through Nested JavaScript Objects?

중첩된 JavaScript 객체를 통한 반복

중첩된 JavaScript 객체를 통한 반복은 어려울 수 있으며, 특히 특정 속성 값. 아래 예를 고려하십시오.

var cars = {
  label: 'Autos',
  subs: [
    {
      label: 'SUVs',
      subs: []
    },
    {
      label: 'Trucks',
      subs: [
        {
          label: '2 Wheel Drive',
          subs: []
        },
        {
          label: '4 Wheel Drive',
          subs: [
            {
              label: 'Ford',
              subs: []
            },
            {
              label: 'Chevrolet',
              subs: []
            }
          ]
        }
      ]
    },
    {
      label: 'Sedan',
      subs: []
    }
  ]
};

재귀적 반복 접근 방식:

객체 계층 구조를 깊이 탐색하려면 재귀적 접근 방식을 활용할 수 있습니다.

const iterate = (obj) => {
    Object.keys(obj).forEach(key => {

    console.log(`key: ${key}, value: ${obj[key]}`)

    if (typeof obj[key] === 'object' && obj[key] !== null) {
            iterate(obj[key])
        }
    })
}

이 함수는 객체를 반복적으로 반복하여 각 수준에서 키-값 쌍을 인쇄합니다. 발견된 속성이 다른 개체를 보유하는 경우 함수는 해당 개체를 인수로 사용하여 자신을 호출합니다.

비재귀적 반복 접근 방식:

대체 비재귀적 접근 방식에는 다음이 포함됩니다. 스택 데이터 구조 사용:

const iterate = (obj) => {
    const stack = [obj];
    while (stack?.length > 0) {
        const currentObj = stack.pop();
        Object.keys(currentObj).forEach(key => {
            console.log(`key: ${key}, value: ${currentObj[key]}`);
            if (typeof currentObj[key] === 'object' && currentObj[key] !== null) {
                stack.push(currentObj[key]);
            }
        });
    }
};

이 함수는 스택을 활용하여 개체 계층 구조를 반복합니다. 스택에서 마지막 요소를 팝하고 해당 속성을 반복합니다. 속성이 객체를 보유하는 경우 추가 반복을 위해 해당 객체를 스택에 푸시합니다.

위 내용은 중첩된 JavaScript 개체를 통해 어떻게 반복할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.