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

By
markettraders
-
0
1746
javascript
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 변수에 저장합니다. 이 변수에는 평면화된 아이템들이 저장됩니다.