JavaScript數(shù)組扁平轉(zhuǎn)樹形結(jié)構(gòu)數(shù)據(jù)(Tree)的實現(xiàn)
前言
之前面試有遇到過這個問題,面試官問:如何把一個數(shù)組數(shù)據(jù)扁平,然后轉(zhuǎn)化為Tree
結(jié)構(gòu)數(shù)據(jù),工作中剛好也用到了,在這里總結(jié)一下。
需求大致如下
把這個數(shù)組轉(zhuǎn)為樹形結(jié)構(gòu)數(shù)據(jù)(Tree)
const flatArr = [ { id: '01', parentId: 0, name: '節(jié)點1' }, { id: '011', parentId: '01', name: '節(jié)點1-1' }, { id: '0111', parentId: '011', name: '節(jié)點1-1-1' }, { id: '02', parentId: 0, name: '節(jié)點2' }, { id: '022', parentId: '02', name: '節(jié)點2-2' }, { id: '023', parentId: '02', name: '節(jié)點2-3' }, { id: '0222', parentId: '022', name: '節(jié)點2-2-2' }, { id: '03', parentId: 0, name: '節(jié)點3' }, ]
最終結(jié)果
[ { id: '01', name: '節(jié)點1', parentId: 0, children: [ { id: '011', name: '節(jié)點1-1', parentId: '01', children: [ { id: '0111', name: '節(jié)點1-1-1', parentId: '011', children: [ ... ], }, ], }, ], }, { id: '02', name: '節(jié)點2', parentId: 0, children: [ // 如上節(jié)點1 ] }, { id: '03', name: '節(jié)點3', parentId: 0, children: [ // 如上節(jié)點1 ] } ]
遞歸方式
遞歸方式實現(xiàn)是OK的,但是數(shù)據(jù)多的話會稍微慢一點哈
const flatArr = [ { id: '01', parentId: 0, name: '節(jié)點1' }, { id: '011', parentId: '01', name: '節(jié)點1-1' }, { id: '0111', parentId: '011', name: '節(jié)點1-1-1' }, { id: '02', parentId: 0, name: '節(jié)點2' }, { id: '022', parentId: '02', name: '節(jié)點2-2' }, { id: '023', parentId: '02', name: '節(jié)點2-3' }, { id: '0222', parentId: '022', name: '節(jié)點2-2-2' }, { id: '03', parentId: 0, name: '節(jié)點3' }, ] function getTreeData (arr, parentId) { function loop (parentId) { return arr.reduce((pre, cur) => { if (cur.parentId === parentId) { cur.children = loop(cur.id) pre.push(cur) } return pre }, []) } return loop(parentId) } const result = getTreeData(flatArr, 0) console.log('result', result)
打印結(jié)果如圖
非遞歸方式
這種方法看起來就很簡單代碼也很簡潔
const flatArr = [ { id: '01', parentId: 0, name: '節(jié)點1' }, { id: '011', parentId: '01', name: '節(jié)點1-1' }, { id: '0111', parentId: '011', name: '節(jié)點1-1-1' }, { id: '02', parentId: 0, name: '節(jié)點2' }, { id: '022', parentId: '02', name: '節(jié)點2-2' }, { id: '023', parentId: '02', name: '節(jié)點2-3' }, { id: '0222', parentId: '022', name: '節(jié)點2-2-2' }, { id: '03', parentId: 0, name: '節(jié)點3' }, ] function getData (arr) { // 利用兩層filter實現(xiàn) let data = arr.filter(item => { item.children = arr.filter(e => { return item.id === e.parentId }) return !item.parentId }) return data } const res = getData(flatArr) console.log('res', res)
打印結(jié)果如圖
小結(jié)
實現(xiàn)的方法很多,選擇自己喜歡的就好,到此這篇關(guān)于JavaScript數(shù)組扁平轉(zhuǎn)樹形結(jié)構(gòu)數(shù)據(jù)(Tree)的實現(xiàn)的文章就介紹到這了,更多相關(guān)JavaScript數(shù)組扁平轉(zhuǎn)樹形結(jié)構(gòu) 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JavaScript樹形結(jié)構(gòu)數(shù)組處理之遞歸問題
- JS前端二維數(shù)組生成樹形結(jié)構(gòu)示例詳解
- JS實現(xiàn)樹形結(jié)構(gòu)與數(shù)組結(jié)構(gòu)相互轉(zhuǎn)換并在樹形結(jié)構(gòu)中查找對象
- JavaScript平鋪數(shù)組轉(zhuǎn)樹形結(jié)構(gòu)的實現(xiàn)示例
- 如何將JavaScript將數(shù)組轉(zhuǎn)為樹形結(jié)構(gòu)
- JavaScript 實現(xiàn)普通數(shù)組數(shù)據(jù)轉(zhuǎn)化為樹形數(shù)據(jù)結(jié)構(gòu)的步驟說明
相關(guān)文章
微信小程序MUI導(dǎo)航欄透明漸變功能示例(通過改變rgba的a值實現(xiàn))
這篇文章主要介紹了微信小程序MUI導(dǎo)航欄透明漸變功能,結(jié)合實例形式分析了通過改變rgba的a值實現(xiàn)透明度漸變功能的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01僅Firefox中鏈接A無法實現(xiàn)模擬點擊以觸發(fā)其默認(rèn)行為
偶然發(fā)現(xiàn)之前寫的事件模塊在Firefox5中無法觸發(fā)A的默認(rèn)行為了。IE/Opera/Firefox5中A具有click方法,因此模擬點擊直接調(diào)用click方法即可。2011-07-07動態(tài)加載圖片路徑 保持JavaScript控件的相對獨立性
根據(jù)新界面的要求,需要一部分圖片來增強日期控件的美觀性??紤]到既要實現(xiàn)加載圖表的目標(biāo),又要保持控件的獨立性以便將來的移植。2010-09-09JS正則RegExp.test()使用注意事項(不具有重復(fù)性)
這篇文章主要介紹了JS正則RegExp.test()使用注意事項,結(jié)合實例形式分析了RegExp.test()方法的功能與用法,以及針對不能重復(fù)調(diào)用的解決方法,需要的朋友可以參考下2016-12-12