JavaScript의 평면 배열에서 계층적 트리 구조를 효율적으로 구축하는 방법은 무엇입니까?

JavaScript의 평면 배열에서 계층적 트리 구조 구축

소개

JavaScript에서 계층적 데이터 작업은 트리 구조나 탐색 메뉴 생성과 같은 다양한 애플리케이션에 필수적입니다. 데이터가 평면 배열에 저장되면 데이터 조작 및 시각화를 용이하게 하기 위해 이를 계층 구조로 변환해야 합니다. 이 기사에서는 JavaScript의 평면 배열에서 트리 배열을 작성하는 효과적인 방법을 보여줍니다.

문제

다음 속성을 가진 개체로 구성된 복잡한 JSON 파일이 제공됩니다. :

• id: 고유 식별자
• parentId: 상위 노드의 ID (루트 노드의 경우 0)
• level: 트리의 노드 깊이

작업은 평면 JSON 구조를 상위 노드를 나타내는 중첩 개체가 있는 계층적 트리 구조로 변환하는 것입니다. -자녀 관계.

솔루션

솔루션은 다음을 활용합니다. 계층적 트리 구조를 효율적으로 구성하기 위한 맵 조회 접근 방식입니다. 알고리즘에는 다음 두 단계가 포함됩니다.

1. 인덱스 객체에 대한 맵 생성:

   • 평면 배열을 반복하고 다음과 같은 맵을 생성합니다. 키는 id 속성이고 값은 해당 배열입니다.

2. 트리 구조 구축:

   • 평면 배열을 다시 반복합니다.

     • 각 객체에 대해 다음을 사용하여 지도에서 상위 객체의 색인을 검색합니다. parentId.
     • 상위 항목이 존재하는 경우(루트 아님) 현재 객체를 해당 상위 항목에 하위로 추가합니다.
     • 상위 항목이 없으면 루트 노드이므로 추가해야 합니다. 루트 노드로 array.

예

다음과 같은 단순 JSON 배열을 고려하세요.

const entries = [{
  "id": "12",
  "parentId": "0",
  "text": "Man",
  "level": "1",
  "children": null
},
{
  "id": "6",
  "parentId": "12",
  "text": "Boy",
  "level": "2",
  "children": null
},
{
  "id": "7",
  "parentId": "12",
  "text": "Other",
  "level": "2",
  "children": null
},
{
  "id": "9",
  "parentId": "0",
  "text": "Woman",
  "level": "1",
  "children": null
},
{
  "id": "11",
  "parentId": "9",
  "text": "Girl",
  "level": "2",
  "children": null
}];

위의 알고리즘을 이 평면 배열에 적용하면 다음과 같은 계층 트리가 출력됩니다. 구조:

const result = [
{
  "id": "12",
  "parentId": "0",
  "text": "Man",
  "level": "1",
  "children": [
    {
      "id": "6",
      "parentId": "12",
      "text": "Boy",
      "level": "2",
      "children": null
    },
    {
      "id": "7",
      "parentId": "12",
      "text": "Other",
      "level": "2",
      "children": null
    }
  ]
},
{
  "id": "9",
  "parentId": "0",
  "text": "Woman",
  "level": "1",
  "children":
  {
    "id": "11",
    "parentId": "9",
    "text": "Girl",
    "level": "2",
    "children": null
  }
}
];

결론

제시된 알고리즘은 계층적 데이터의 평면 배열을 JavaScript의 구조화된 트리 배열로 변환하는 효율적인 방법을 제공합니다. 이 접근 방식은 맵 조회를 활용하여 프로세스를 최적화하고 여러 루트 노드를 지원합니다. 추가 조작이나 시각화를 위해 복잡한 데이터에서 트리 구조를 만들어야 하는 상황에 이상적입니다.

위 내용은 JavaScript의 평면 배열에서 계층적 트리 구조를 효율적으로 구축하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!