文章目錄

• 📋前言
• 🎯扁平數據結構
• 🎯樹形數據結構
• 🎯使用遞歸將扁平數據轉換為樹形數據
• 📝最后

---

📋前言

在前端開發中，我們經常需要將扁平數據結構轉換為樹形結構（Tree）。比如在網站菜單、商品分類等場景下，都需要使用樹形結構來實現數據的層級呈現。在本篇博客中，我將介紹一種常見的方法，使用遞歸方式來將扁平數據結構轉換成樹形結構。

---

🎯扁平數據結構

扁平數據結構是指數據之間沒有任何層次關系，每個數據項都是平級的，通常包含一個parentId字段來表示該數據項的父節點。這種數據結構通常被用于列表、表格等場景下，但對于層級結構的數據展示則不夠方便。

例如，以下是一個扁平數據結構的示例：

const flatData = [{ id: 1, name: '節點1', parentId: null },{ id: 2, name: '節點2', parentId: 1 },{ id: 3, name: '節點3', parentId: 1 },{ id: 4, name: '節點4', parentId: 2 },{ id: 5, name: '節點5', parentId: 2 },{ id: 6, name: '節點6', parentId: 3 } ];

🎯樹形數據結構

而樹形數據結構則是一種具有層次結構的數據結構，在前端開發中通常用于展示層級結構的數據，如文件夾、分類、組織架構等。每個節點僅有一個父節點，但可以有任意多個子節點。

以下是一個樹形數據結構的示例：

const treeData = [{id: 1,name: '節點1',children: [{id: 2,name: '節點2',children: [{ id: 4, name: '節點4' },{ id: 5, name: '節點5' }]},{id: 3,name: '節點3',children: [{ id: 6, name: '節點6' }]}]} ];

🎯使用遞歸將扁平數據轉換為樹形數據

在前面的示例中，我們看到扁平數據結構與樹形數據結構之間存在一定的轉換關系，我們可以通過遞歸的方式將扁平數據結構轉換為樹形數據結構。

以下是一個使用遞歸的方法實現這個過程的代碼示例：

function flatToTree(flatData, parentId = null) {const tree = [];// 遍歷flatData，找到parentId對應的子節點for (const node of flatData) {if (node.parentId === parentId) {// 遞歸查找子節點const children = flatToTree(flatData, node.id);// 如果有子節點，則加入children屬性中if (children.length > 0) {node.children = children;}// 加入tree中tree.push(node);}}return tree; }const treeData = flatToTree(flatData); console.log(treeData); // 輸出轉換得到的Tree數據

以上代碼使用遞歸的方式將扁平數據結構轉換為樹形數據結構。其中，flatToTree函數接收兩個參數：flatData表示要轉換的扁平數據結構，parentId是當前處理節點的父節點ID（初始值為null）。函數返回一個數組，包含所有根節點。

在函數體內，通過遍歷flatData，找到所有parentId等于當前節點id的子節點。對每個子節點，再使用遞歸調用flatToTree函數查找該節點的子節點，并將子節點添加到children屬性中。最終將所有節點加入到tree數組中并返回。

---

📝最后

通過以上的內容，我們可以淺理解如何使用遞歸的方式將扁平數據結構轉換成樹形數據結構。這是一種常見的實現方法，但在數據量較大時可能會影響性能，可以考慮使用其他的實現方式。當然，對于小規模的數據轉換，遞歸是非常方便和好理解的。

總結

以上是生活随笔為你收集整理的浅理解扁平数据结构转Tree（树形结构）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。