Home IT/WEB 트리 구조의 객체를 재귀적 함수로 평면화하는 방법

[javascript]트리 구조의 객체를 재귀적 함수로 평면화하는 방법

const getItems = (items) => {
  const flattenItems = (currentItems) => {
    let flatItems = [];

    for (const item of currentItems) {
      flatItems.push(item);

      if (item.children && item.children.length) {
        flatItems = flatItems.concat(flattenItems(item.children));
      }
    }

    return flatItems;
  };

  return flattenItems(items);
};

const items = getItems(this._.cloneDeep(this.maxDepthItems));
  1. getItems 함수를 선언합니다. 이 함수는 트리 구조의 아이템들을 평면화하기 위한 목적으로 사용됩니다. 인자로 items를 받습니다.
  2. getItems 함수 내부에 flattenItems 함수를 선언합니다. 이 함수는 실제로 트리 구조의 아이템들을 평면화하는 작업을 수행합니다. 인자로 currentItems를 받습니다.
  3. flattenItems 함수 내부에서 빈 배열 flatItems를 선언합니다. 이 배열은 평면화된 아이템들을 담기 위한 목적으로 사용됩니다.
  4. flattenItems 함수 내부에서 currentItems 배열의 각 요소를 순회합니다. 반복문에서 현재 아이템을 flatItems 배열에 추가합니다.
  5. 현재 아이템의 children 프로퍼티가 존재하고, 그 길이가 1 이상일 경우에만 재귀 호출을 수행합니다. 이 때, flattenItems(item.children)를 호출하여 재귀적으로 자식 아이템들을 평면화한 뒤, concat 메소드를 사용하여 현재 flatItems 배열에 추가합니다.
  6. 모든 반복이 끝나면, flattenItems 함수는 완전히 평면화된 아이템들을 담고 있는 flatItems 배열을 반환합니다.
  7. 마지막으로, getItems 함수는 flattenItems 함수를 호출하여 평면화된 아이템들을 반환합니다. 이 때, 인자로 받은 items를 전달합니다.
  8. getItems 함수를 호출하며, this._.cloneDeep(this.maxDepthItems)를 인자로 전달합니다. cloneDeep을 사용함으로써 원본 데이터를 변경하지 않고 필요한 데이터를 얻을 수 있습니다.
  9. getItems 함수의 반환 값을 items 변수에 저장합니다. 이 변수에는 평면화된 아이템들이 저장됩니다.
inline ad

RECENT POSTS

[javascript]트리 구조의 객체를 재귀적 함수로 평면화하는 방법

const getItems = (items) => { const flattenItems = (currentItems) => { let flatItems = ; for...

[javascript]객체를 복사하고 특정 키를 제외하여 객체를 생성하는 방법

const obj = { name: 'markettraders', age: 20, address: { city: 'seoul', zip: '12345' ...

[javascript]!! 연산자 not not 연산자

"!!" 연산자는 값을 boolean으로 형변환하는 데 사용됩니다. 이를 "not not" 연산자라고도 합니다. 이 연산자는 값을 true 또는 false로 간단히 변환하여 반환합니다. 예를 들어, JavaScript에서 다음과...

Youtube 오디오 라이브러리에서 가장 많이 사용하는 음악 TOP20 을 알려드립니다.

YouTube 오디오 라이브러리는 콘텐츠 제작자가 저작권 침해에 대한 걱정 없이 동영상에 사용할 수 있는 방대하고 다양한 무료 음악 및 음향 효과 라이브러리입니다. 아래 URL...