如何在 JavaScript 中有效地將 JSON 物件的平面數組轉換為分層樹狀結構？

在 JavaScript 中將平面數組轉換為分層樹結構

在 JavaScript 中，我們經常遇到需要分層組織資料的情況。一種常見的表示形式是樹結構，其中節點透過父子關係互連。本文探討了將平面 JSON 物件陣列轉換為此類分層樹結構的有效技術。

問題描述

給定一個JSON 物件數組，每個物件代表樹中的一個節點，使用「id」、「parentId」、「level」和「text」等屬性，我們的目標是將這個平面數組轉換為嵌套的JSON 對象，其中每個節點都包含其孩子。

解

一個有效的方法是利用地圖找出演算法。透過建立一個映射，將每個節點的「id」與其在數組中對應的索引關聯起來，我們可以有效地遍歷數組並建立層次結構。

首先，我們初始化映射並確保每個節點都有一個空的「children」陣列來儲存其後代。然後，我們迭代該數組，並針對每個節點檢查其“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));

這種方法提供了一種簡單而有效的解決方案從平面數組建立層次樹結構，滿足您的資料管理和視覺化需求。

以上是如何在 JavaScript 中有效地將 JSON 物件的平面數組轉換為分層樹狀結構？的詳細內容。更多資訊請關注PHP中文網其他相關文章！