如何將JavaScript將數(shù)組轉(zhuǎn)為樹形結(jié)構(gòu)
1.需求
后臺給了一個(gè)這樣的數(shù)據(jù)讓咱前端去轉(zhuǎn)換為樹形結(jié)構(gòu)(沒有重復(fù)數(shù)據(jù))。不多說,先來看看給了一個(gè)怎樣的數(shù)組數(shù)據(jù),轉(zhuǎn)換為怎樣的樹形結(jié)構(gòu)。
服務(wù)器傳過來的數(shù)組
const arr = [ [ {"deptId":"D019", "deptName":"銷售部"}, {"deptId":"D019101", "deptName":"華北銷售中心"} ],[ {"deptId":"D083", "deptName":"音樂事業(yè)部"} ],[ {"deptId":"D027", "deptName":"杭州研究院"}, {"deptId":"D027048", "deptName":"技術(shù)工程事業(yè)部"}, {"deptId":"D027048002", "deptName":"項(xiàng)目管理中心"} ],[ {"deptId":"D027", "deptName":"杭州研究院"}, {"deptId":"D027048", "deptName":"技術(shù)工程事業(yè)部"} ],[ {"deptId":"D027", "deptName":"杭州研究院"}, {"deptId":"D027048", "deptName":"技術(shù)工程事業(yè)部"} ] ]
最終轉(zhuǎn)換為
const arr = [ { deptId: 'D019', deptName: '銷售部', children: [{ deptId: 'D019101', deptName: '華北銷售中心', children: [], }] }, { deptId: 'D083', deptName: '音樂事業(yè)部', children: [] }, { deptId: 'D027', deptName: '杭州研究院', children: [{ deptId: 'D027048', deptName: '技術(shù)工程事業(yè)部', children: [{ deptId: 'D027048002', deptName: '項(xiàng)目管理中心', children: [] }] }] }, ]
2.上代碼(在reactHooks中開發(fā))
const [treeData, setTreeData] = useState([]); console.log(treeData); //treeData為最終需要的樹形結(jié)構(gòu),(在我本地瀏覽器打印出來是正確的) useEffect(() => { const str = '[[{"deptId":"D019","deptName":"銷售部"},{"deptId":"D019101","deptName":"華北銷售中心"}],[{"deptId":"D019","deptName":"銷售部"},{"deptId":"D019101","deptName":"華北銷售中心"}],[{"deptId":"D083","deptName":"音樂事業(yè)部"}],[{"deptId":"D027","deptName":"杭州研究院"},{"deptId":"D027048","deptName":"技術(shù)工程事業(yè)部"},{"deptId":"D027048002","deptName":"項(xiàng)目管理與效能中心"}],[{"deptId":"D027","deptName":"杭州研究院"},{"deptId":"D027048","deptName":"技術(shù)工程事業(yè)部"}],[{"deptId":"D027","deptName":"杭州研究院"},{"deptId":"D027048","deptName":"技術(shù)工程事業(yè)部"}]]'; const arr = JSON.parse(str).flat(); //扁平化 let newArr = []; noRepeat(arr).length && noRepeat(arr).forEach(it => { appendChild(it, newArr); }); }, []) const noRepeat = (arr) => { //去重 let newobj = {}; return arr.reduce((preVal, curVal) => { newobj[curVal.deptId] ? '' : newobj[curVal.deptId] = preVal.push(curVal); return preVal }, []); } const appendChild = (item, newArr) => { if(!newArr.find(it => item.deptId.indexOf(it.deptId) > -1)) { //所有一級部門 newArr.push({ deptId: item.deptId, deptName: item.deptName, children: [], }); setTreeData(newArr); }else { appendOtherChild(item, newArr); } } const appendOtherChild = (item, newArr) => { newArr.map(it => { if(item.deptId.indexOf(it.deptId) > -1 && item.deptId.length === it.deptId.length+3) { it.children.push({ deptId: item.deptId, deptName: item.deptName, children: [], }) }else { appendOtherChild(item, it.children); } }); setTreeData(newArr); }
總結(jié)
可能這些數(shù)據(jù)和你的不太一樣,但是邏輯可能八九不離十,可以好好看一下這幾十行代碼
到此這篇關(guān)于如何將JavaScript將數(shù)組轉(zhuǎn)為樹形結(jié)構(gòu)的文章就介紹到這了,更多相關(guān)JavaScript數(shù)組轉(zhuǎn)為樹形結(jié)構(gòu)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JavaScript樹形結(jié)構(gòu)數(shù)組處理之遞歸問題
- JS前端二維數(shù)組生成樹形結(jié)構(gòu)示例詳解
- JavaScript數(shù)組扁平轉(zhuǎn)樹形結(jié)構(gòu)數(shù)據(jù)(Tree)的實(shí)現(xiàn)
- JS實(shí)現(xiàn)樹形結(jié)構(gòu)與數(shù)組結(jié)構(gòu)相互轉(zhuǎn)換并在樹形結(jié)構(gòu)中查找對象
- JavaScript平鋪數(shù)組轉(zhuǎn)樹形結(jié)構(gòu)的實(shí)現(xiàn)示例
- JavaScript 實(shí)現(xiàn)普通數(shù)組數(shù)據(jù)轉(zhuǎn)化為樹形數(shù)據(jù)結(jié)構(gòu)的步驟說明
相關(guān)文章
JS數(shù)組方法reverse()用法實(shí)例分析
這篇文章主要介紹了JS數(shù)組方法reverse()用法,結(jié)合實(shí)例形式分析了JS數(shù)組reverse()方法基本功能、用法與操作注意事項(xiàng),需要的朋友可以參考下2020-01-01Javascript 定時(shí)器調(diào)用傳遞參數(shù)的方法
Javascript 定時(shí)器調(diào)用傳遞參數(shù)的方法,需要的朋友可以參考下。2009-11-11Openlayers實(shí)現(xiàn)長度測量的方法
在Openlayers中,使用ol/sphere模塊的getDistance函數(shù)可以計(jì)算兩點(diǎn)間的大圓距離,繪制線路時(shí),通過監(jiān)聽繪制事件和幾何對象的變化,可實(shí)時(shí)更新距離,同時(shí)getLength函數(shù)幫助獲取整條線路的長度,這些功能主要用于地理信息系統(tǒng)中的距離測量和地圖制作2024-11-11利用iscroll4實(shí)現(xiàn)輪播圖效果實(shí)例代碼
iScroll 4 這個(gè)版本完全重寫了iScroll這個(gè)框架的原始代碼。這個(gè)項(xiàng)目的產(chǎn)生完全是因?yàn)橐苿影鎤ebkit瀏覽器(諸如iPhone,iPad,Android 這些系統(tǒng)上廣泛使用)。下面這篇文章主要介紹了利用iscroll4實(shí)現(xiàn)輪播圖效果的方法教程,需要的朋友可以參考下。2017-01-01JavaScript數(shù)據(jù)結(jié)構(gòu)之鏈表各種操作詳解
數(shù)據(jù)結(jié)構(gòu)是一種有效處理大量數(shù)據(jù)的手段,了解它的結(jié)構(gòu)和組成為我們提供了更有效的工具來設(shè)計(jì)與某些問題相關(guān)的產(chǎn)品。這次我們將進(jìn)行鏈表介紹,回顧它的特點(diǎn)和用途2022-10-10使用layui 的layedit定義自己的toolbar方法
今天小編就為大家分享一篇使用layui 的layedit定義自己的toolbar方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JS從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù)的方法
這篇文章給大家介紹基于js如何從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù),非常實(shí)用,實(shí)現(xiàn)方案也很簡單,需要的朋友可以參考下2016-06-06