如何在 JavaScript 中從平面數組高效建構層次樹結構？

在JavaScript 中從平面數組建立分層樹結構

簡介

在分層資料是對於各種應用程式至關重要，例如創建樹結構或導航選單。當資料儲存在平面數組中時，有必要將其轉換為分層結構以方便資料操作和視覺化。本文將示範一種在 JavaScript 中從平面數組建立樹數組的有效方法。

問題

給定一個由具有以下屬性的物件組成的複雜 JSON檔案:

• id：唯一識別碼
• parentId：父節點的ID（0對根節點）
• 層級：樹中節點的深度

任務是將平面JSON結構轉換為具有代表父子的嵌套物件的分層樹結構

解決方案

此解決方案利用地圖查找方法高效建構層次樹結構。演算法涉及兩個步驟：

1. 建立索引物件的映射：

   • 迭代平面數組並建立一個映射，其中鍵是id 屬性，值是對應的陣列索引。

2. 建構樹結構：

   • 再迭代平面數組：

     • 再迭代平面數組：
     • 再迭代平面數組：
     再迭代平面數組：對於每個對象，使用下列方法從地圖中檢索其父對象的索引ParentId。
   如果父節點存在（不是根），則將目前物件作為子節點附加到其父節點。

如果父節點不存在，則它是根節點，應該加入根節點數組。

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
  }
}
];

考慮以下平面 JSON 數組：

將上述演算法應用到這個平面數組將輸出以下層次樹結構：

結論所提出的演算法提供了一種在JavaScript 中將分層資料的平面數組轉換為結構化樹數組的有效方法。這種方法利用地圖查找來最佳化流程並支援多個根節點。它非常適合您需要從複雜資料建立樹結構以進行進一步操作或視覺化的情況。

以上是如何在 JavaScript 中從平面數組高效建構層次樹結構？的詳細內容。更多資訊請關注PHP中文網其他相關文章！