javascript - js寫一個(gè)遞歸把數(shù)據(jù)結(jié)構(gòu)重組成另外的結(jié)構(gòu)
問(wèn)題描述
現(xiàn)在有以下數(shù)據(jù)結(jié)構(gòu):
[{ id: 1, pid: 0, name: '年級(jí)'}, { id: 2, pid: 1, name: '一年級(jí)'}, { id: 3, pid: 1, name: '二年級(jí)'}, { id: 4, pid: 0, name: '專業(yè)'}, { id: 5, pid: 4, name: '單片機(jī)開發(fā)'}]
寫一個(gè)JS方法,將其轉(zhuǎn)換成以下格式數(shù)據(jù):
[{ id: 1, pid: 0, name: '年級(jí)', children: [{id: 2,pid: 1,name: '一年級(jí)' }, {id: 3,pid: 1,name: '二年級(jí)' }]}, { id: 4, pid: 0, name: '專業(yè)', children: [{id: 5,pid: 4,name: '單片機(jī)開發(fā)' }]}]
問(wèn)題解答
回答1:var list = [{ id: 1, pid: 0, name: '年級(jí)'}, { id: 2, pid: 1, name: '一年級(jí)'}, { id: 3, pid: 1, name: '二年級(jí)'}, { id: 4, pid: 0, name: '專業(yè)'}, { id: 5, pid: 4, name: '單片機(jī)開發(fā)'}];function parseList (list) { var map = {}; list.forEach(function (item) {if (!map[item.id]) { map[item.id] = item; } }); list.forEach(function (item) {if (item.pid != 0) { map[item.pid].chidren ? map[item.pid].chidren.push(item) : map[item.pid].chidren = [item];} }); return list.filter(function (item) {return item.pid === 0; });}var newList = parseList(list);回答2:
var list = [ { id: 1, pid: 0, name: '年級(jí)' }, { id: 2, pid: 1, name: '一年級(jí)' }, { id: 3, pid: 1, name: '二年級(jí)' }, { id: 4, pid: 0, name: '專業(yè)' }, { id: 5, pid: 4, name: '單片機(jī)開發(fā)' }];// 生成查找表,可以按 id 查到節(jié)點(diǎn)const dict = list.reduce((all, item) => { all[item.id] = item; return all;}, {});// 由于原始數(shù)據(jù)沒(méi)有 id 為 0 的根節(jié)點(diǎn),// 這里模擬一個(gè),最終它的 children 就是實(shí)際的所有根節(jié)點(diǎn)var root = { id: 0};dict[0] = root;// 循環(huán)添加關(guān)系list.forEach(item => { const parent = dict[item.pid]; // 確保父節(jié)點(diǎn)的 children 存在 parent.children = parent.children || []; parent.children.push(item);});// 輸出結(jié)果 root.children// 注意,root 不是結(jié)果,root.children 才是console.log(JSON.stringify(root.children, null, 4));
參考一下
var sortedData = data.reduce((result, item) => { result[item.id] = Object.assign({}, item) return result}, [])var result = sortedData.reduce((result, item) => { if (item.pid === 0) { result.push(item) } else { if (sortedData[item.pid].children) { sortedData[item.pid].children.push(item) } else { sortedData[item.pid].children = [item] } } return result}, [])
相關(guān)文章:
1. sql語(yǔ)句 - mysql中關(guān)聯(lián)表查詢問(wèn)題2. css - chrome下a標(biāo)簽嵌套img 顯示會(huì)多個(gè)小箭頭?3. javascript - 求解答:實(shí)例對(duì)象調(diào)用constructor,此時(shí)constructor內(nèi)的this的指向?4. javascript - iframe 為什么加載網(wǎng)頁(yè)的時(shí)候滾動(dòng)條這樣顯示?5. javascript - 如何將一個(gè)div始終固定在某個(gè)位置;無(wú)論屏幕和分辨率怎么變化;div位置始終不變6. javascript - vscode alt+shift+f 格式化js代碼,通不過(guò)eslint的代碼風(fēng)格檢查怎么辦。。。7. javascript - 有什么比較好的網(wǎng)頁(yè)版shell前端組件?8. html - vue項(xiàng)目中用到了elementUI問(wèn)題9. mysql updtae追加數(shù)據(jù)sql語(yǔ)句10. javascript - 原生canvas中如何獲取到觸摸事件的canvas內(nèi)坐標(biāo)?
