需求: 將如下數組轉成樹狀結構

// 需轉化數組示例data = [{ id: '01', lable: '項目經理', pid: '' },{ id: '02', lable: '產品leader', pid: '01' },{ id: '03', lable: 'UIleader', pid: '01' },{ id: '04', lable: '技術leader', pid: '01' },{ id: '05', lable: '測試leader', pid: '01' },{ id: '06', lable: '運維leader', pid: '01' },{ id: '07', lable: '產品經理', pid: '02' },{ id: '08', lable: '產品經理', pid: '02' },{ id: '09', lable: 'UI設計師', pid: '03' },{ id: '10', lable: '前端工程師', pid: '04' },{ id: '11', lable: '后端工程師', pid: '04' },{ id: '12', lable: '后端工程師', pid: '04' },{ id: '13', lable: '測試工程師', pid: '05' },{ id: '14', lable: '測試工程師', pid: '05' },{ id: '15', lable: '運維工程師', pid: '06' }]

注: 如某個對象的 pid 與某個對象的 id 相同, 則此 pid 對象 為此 id 對象 的 子級, 按此需求進行轉化 ;

// 轉化結果示例 treeData = [{id: '01',lable: '項目經理',pid: '',children: [{id: '02',lable: '產品leader',pid: '01',children: [{id: '07',lable: '產品經理1',pid: '02',children: []},{id: '08',lable: '產品經理2',pid: '02',children: []}]},{id: '03',lable: 'UIleader',pid: '01',children: [{id: '09',lable: 'UI設計師',pid: '03',children: []}]},{id: '04',lable: '技術leader',pid: '01',children: [{id: '10',lable: '前端工程師',pid: '04',children: []},{id: '11',lable: '后端工程師1',pid: '04',children: []},{id: '12',lable: '后端工程師2',pid: '04',children: []}]},{id: '05',lable: '測試leader',pid: '01',children: [{id: '13',lable: '測試工程師1',pid: '05',children: []},{id: '14',lable: '測試工程師2',pid: '05',children: []}]},{id: '06',lable: '運維leader',pid: '01',children: [{id: '15',lable: '運維工程師',pid: '06',children: []}]}]}]

代碼實現:

function toTree(data) {// 1.定義最外層的數組const tree = []// 2.定義一個空對象const otherObj = {}// 3.遍歷數組內所有對象data.forEach(item => {// 3.1.給每個當前對象添加一個 children 屬性, 以便存放子級對象item.children = []// 3.2 將當前對象的 id 作為鍵, 與當前對象自身形成鍵值對otherObj[item.id] = item})// 4.再次遍歷數組內所有對象data.forEach(item => {// 4.1.判斷每個當前對象的 pid, 如當前對象 pid 不為空, 則說明不是最上級的根對象if (item.pid) {// 4.3.利用當前對象的 otherObj[pid] 找到 otherObj[id] 中對應當前對象的父級對象, 將當前對象添加到其對應的父級對象的 children 屬性中otherObj[item.pid].children.push(item)} else {// 4.3.當前對象 pid 如果為空, 則為樹狀結構的根對象tree.push(item)}})// 5.返回樹狀結構return tree}toTree(data)

總結

以上是生活随笔為你收集整理的JS 数组转树状结构的全部內容，希望文章能夠幫你解決所遇到的問題。

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