JavaScript數(shù)組扁平轉(zhuǎn)樹(shù)形結(jié)構(gòu)數(shù)據(jù)(Tree)的實(shí)現(xiàn)
前言
之前面試有遇到過(guò)這個(gè)問(wèn)題,面試官問(wèn):如何把一個(gè)數(shù)組數(shù)據(jù)扁平,然后轉(zhuǎn)化為Tree
結(jié)構(gòu)數(shù)據(jù),工作中剛好也用到了,在這里總結(jié)一下。
需求大致如下
把這個(gè)數(shù)組轉(zhuǎn)為樹(shù)形結(jié)構(gòu)數(shù)據(jù)(Tree)
const flatArr = [ { id: '01', parentId: 0, name: '節(jié)點(diǎn)1' }, { id: '011', parentId: '01', name: '節(jié)點(diǎn)1-1' }, { id: '0111', parentId: '011', name: '節(jié)點(diǎn)1-1-1' }, { id: '02', parentId: 0, name: '節(jié)點(diǎn)2' }, { id: '022', parentId: '02', name: '節(jié)點(diǎn)2-2' }, { id: '023', parentId: '02', name: '節(jié)點(diǎn)2-3' }, { id: '0222', parentId: '022', name: '節(jié)點(diǎn)2-2-2' }, { id: '03', parentId: 0, name: '節(jié)點(diǎn)3' }, ]
最終結(jié)果
[ { id: '01', name: '節(jié)點(diǎn)1', parentId: 0, children: [ { id: '011', name: '節(jié)點(diǎn)1-1', parentId: '01', children: [ { id: '0111', name: '節(jié)點(diǎn)1-1-1', parentId: '011', children: [ ... ], }, ], }, ], }, { id: '02', name: '節(jié)點(diǎn)2', parentId: 0, children: [ // 如上節(jié)點(diǎn)1 ] }, { id: '03', name: '節(jié)點(diǎn)3', parentId: 0, children: [ // 如上節(jié)點(diǎn)1 ] } ]
遞歸方式
遞歸方式實(shí)現(xiàn)是OK的,但是數(shù)據(jù)多的話會(huì)稍微慢一點(diǎn)哈
const flatArr = [ { id: '01', parentId: 0, name: '節(jié)點(diǎn)1' }, { id: '011', parentId: '01', name: '節(jié)點(diǎn)1-1' }, { id: '0111', parentId: '011', name: '節(jié)點(diǎn)1-1-1' }, { id: '02', parentId: 0, name: '節(jié)點(diǎn)2' }, { id: '022', parentId: '02', name: '節(jié)點(diǎn)2-2' }, { id: '023', parentId: '02', name: '節(jié)點(diǎn)2-3' }, { id: '0222', parentId: '022', name: '節(jié)點(diǎn)2-2-2' }, { id: '03', parentId: 0, name: '節(jié)點(diǎn)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é)果如圖
非遞歸方式
這種方法看起來(lái)就很簡(jiǎn)單代碼也很簡(jiǎn)潔
const flatArr = [ { id: '01', parentId: 0, name: '節(jié)點(diǎn)1' }, { id: '011', parentId: '01', name: '節(jié)點(diǎn)1-1' }, { id: '0111', parentId: '011', name: '節(jié)點(diǎn)1-1-1' }, { id: '02', parentId: 0, name: '節(jié)點(diǎn)2' }, { id: '022', parentId: '02', name: '節(jié)點(diǎn)2-2' }, { id: '023', parentId: '02', name: '節(jié)點(diǎn)2-3' }, { id: '0222', parentId: '022', name: '節(jié)點(diǎn)2-2-2' }, { id: '03', parentId: 0, name: '節(jié)點(diǎn)3' }, ] function getData (arr) { // 利用兩層filter實(shí)現(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é)
實(shí)現(xiàn)的方法很多,選擇自己喜歡的就好,到此這篇關(guān)于JavaScript數(shù)組扁平轉(zhuǎn)樹(shù)形結(jié)構(gòu)數(shù)據(jù)(Tree)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)JavaScript數(shù)組扁平轉(zhuǎn)樹(shù)形結(jié)構(gòu) 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JavaScript樹(shù)形結(jié)構(gòu)數(shù)組處理之遞歸問(wèn)題
- JS前端二維數(shù)組生成樹(shù)形結(jié)構(gòu)示例詳解
- JS實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)與數(shù)組結(jié)構(gòu)相互轉(zhuǎn)換并在樹(shù)形結(jié)構(gòu)中查找對(duì)象
- JavaScript平鋪數(shù)組轉(zhuǎn)樹(shù)形結(jié)構(gòu)的實(shí)現(xiàn)示例
- 如何將JavaScript將數(shù)組轉(zhuǎn)為樹(shù)形結(jié)構(gòu)
- JavaScript 實(shí)現(xiàn)普通數(shù)組數(shù)據(jù)轉(zhuǎn)化為樹(shù)形數(shù)據(jù)結(jié)構(gòu)的步驟說(shuō)明
相關(guān)文章
深入探究使JavaScript動(dòng)畫流暢的一些方法
這篇文章主要介紹了使JavaScript動(dòng)畫流暢的一些方法,包括與CSS動(dòng)畫效果的一些對(duì)比,需要的朋友可以參考下2015-06-06微信小程序MUI導(dǎo)航欄透明漸變功能示例(通過(guò)改變r(jià)gba的a值實(shí)現(xiàn))
這篇文章主要介紹了微信小程序MUI導(dǎo)航欄透明漸變功能,結(jié)合實(shí)例形式分析了通過(guò)改變r(jià)gba的a值實(shí)現(xiàn)透明度漸變功能的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01僅Firefox中鏈接A無(wú)法實(shí)現(xiàn)模擬點(diǎn)擊以觸發(fā)其默認(rèn)行為
偶然發(fā)現(xiàn)之前寫的事件模塊在Firefox5中無(wú)法觸發(fā)A的默認(rèn)行為了。IE/Opera/Firefox5中A具有click方法,因此模擬點(diǎn)擊直接調(diào)用click方法即可。2011-07-07JavaScript中“基本類型”之爭(zhēng)小結(jié)
所謂“基本類型(primitive types)”的概念ECMAScript(V3,V5)中壓根就沒(méi)有,它只是將類型分為6種,感興趣的朋友可以參考下2013-01-01動(dòng)態(tài)加載圖片路徑 保持JavaScript控件的相對(duì)獨(dú)立性
根據(jù)新界面的要求,需要一部分圖片來(lái)增強(qiáng)日期控件的美觀性。考慮到既要實(shí)現(xiàn)加載圖表的目標(biāo),又要保持控件的獨(dú)立性以便將來(lái)的移植。2010-09-09JS正則RegExp.test()使用注意事項(xiàng)(不具有重復(fù)性)
這篇文章主要介紹了JS正則RegExp.test()使用注意事項(xiàng),結(jié)合實(shí)例形式分析了RegExp.test()方法的功能與用法,以及針對(duì)不能重復(fù)調(diào)用的解決方法,需要的朋友可以參考下2016-12-12