js 陣列 轉為樹形結構
阿新 • • 發佈：2020-12-14
題目：
source = [{ id: 1, pid: 0, name: 'body' }, { id: 2, pid: 1, name: 'title' }, { id: 3, pid: 2, name: 'div' }] 轉換為: [{ id:1, pid: 0, name: 'body', children: [{ id: 2, pid: 1, name: 'title', children: [{ id:3, pid: 1, name: 'div' }] } }]
程式碼實現：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=`, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>toTree</title> </head> <body> <script> var source = [{ id: 1, pid: 0, name: 'body' }, { id: 2, pid: 1, name: 'title' }, { id: 3, pid: 1, name: 'div' }, { id: 4, pid: 3, name: 'span' }, { id: 5, pid: 3, name: 'icon' }, { id: 6, pid: 4, name: 'subspan' }] function toTree(data) { let result = [] if(!Array.isArray(data)) { return result } data.forEach(item => { delete item.children; }); let map = {}; data.forEach(item => { map[item.id] = item; }); data.forEach(item => { let parent = map[item.pid]; if(parent) { (parent.children || (parent.children = [])).push(item); } else { result.push(item); } }); return result; } var TreeData =toTree(source) console.log(TreeData ) console.log(JSON.stringify(TreeData)) </script> </body> </html>