JavaScript에서는 데이터를 계층적으로 구성해야 하는 상황에 자주 직면합니다. 일반적인 표현 중 하나는 노드가 부모-자식 관계로 상호 연결된 트리 구조입니다. 이 기사에서는 JSON 개체의 평면 배열을 계층적 트리 구조로 변환하는 효율적인 기술을 살펴봅니다.
각각 트리의 노드를 나타내는 JSON 개체 배열이 주어지면, "id", "parentId", "level" 및 "text"와 같은 속성을 사용하여 이 평면 배열을 각 노드가 해당 배열을 포함하는 중첩된 JSON 개체로 변환하는 것을 목표로 합니다.
효과적인 접근 방식 중 하나는 지도 조회 알고리즘을 활용하는 것입니다. 각 노드의 "id"를 배열의 해당 인덱스와 연결하는 맵을 생성함으로써 배열을 효율적으로 탐색하고 계층 구조를 구축할 수 있습니다.
먼저 맵을 초기화하고 각 노드에 하위 항목을 저장하기 위한 빈 "자식" 배열입니다. 그런 다음 배열을 반복하고 각 노드에 대해 "parentId"를 확인합니다. "0"이 아닌 경우 맵의 "id"를 사용하여 상위 노드를 찾고 현재 노드를 하위 노드로 추가합니다. "parentId"가 "0"인 노드는 트리의 루트를 나타냅니다.
이 솔루션의 주요 장점은 효율성과 여러 루트를 처리할 수 있는 능력입니다. 외부 라이브러리에 의존하지 않으며 매달린 분기(상위 노드가 없는 하위 노드)를 처리할 수 있습니다.
다음은 이 솔루션을 구현하는 JavaScript 코드 조각입니다.
function list_to_tree(list) { var map = {}, node, roots = [], i; for (i = 0; i < list.length; i += 1) { map[list[i].id] = i; // initialize the map list[i].children = []; // initialize the children } for (i = 0; i < list.length; i += 1) { node = list[i]; if (node.parentId !== "0") { // if you have dangling branches check that map[node.parentId] exists list[map[node.parentId]].children.push(node); } else { roots.push(node); } } return roots; }
제공된 샘플 입력 사용 , 함수는 아래 예와 같이 예상되는 계층적 출력을 생성합니다.
var 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 } ]; console.log(list_to_tree(entries));
이 접근 방식은 다음을 제공합니다. 데이터 관리 및 시각화 요구 사항을 충족하면서 평면 배열에서 계층적 트리 구조를 구축하는 간단하고 효율적인 솔루션입니다.
위 내용은 JSON 개체의 평면 배열을 JavaScript의 계층적 트리 구조로 효율적으로 변환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!