js 實(shí)現(xiàn) list轉(zhuǎn)換成tree的方法示例(數(shù)組到樹)
目標(biāo):
JS 將有父子關(guān)系的平行數(shù)組轉(zhuǎn)換成樹形數(shù)據(jù)
方法:雙重遍歷,一次遍歷parentId,一次遍歷id == parendId;
該方法應(yīng)該能很容易被想到,實(shí)現(xiàn)起來(lái)也一步一步可以摸索出來(lái);
const oldData = [ {id:1,name:'boss',parentId:0}, {id:2,name:'lily',parentId:1}, {id:3,name:'jack',parentId:1}, {id:4,name:'john',parentId:2}, {id:5,name:'boss2',parentId:0}, ] function listToTree(oldArr){ oldArr.forEach(element => { let parentId = element.parentId; if(parentId !== 0){ oldArr.forEach(ele => { if(ele.id == parentId){ //當(dāng)內(nèi)層循環(huán)的ID== 外層循環(huán)的parendId時(shí),(說(shuō)明有children),需要往該內(nèi)層id里建個(gè)children并push對(duì)應(yīng)的數(shù)組; if(!ele.children){ ele.children = []; } ele.children.push(element); } }); } }); console.log(oldArr) //此時(shí)的數(shù)組是在原基礎(chǔ)上補(bǔ)充了children; oldArr = oldArr.filter(ele => ele.parentId === 0); //這一步是過(guò)濾,按樹展開(kāi),將多余的數(shù)組剔除; console.log(oldArr) return oldArr; } listToTree(oldData);
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js微信應(yīng)用場(chǎng)景之微信音樂(lè)相冊(cè)案例分享
這篇文章主要為大家分享了js微信應(yīng)用場(chǎng)景之微信音樂(lè)相冊(cè)案例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08javascript getElementByTagName的使用
javascript getElementByTagName當(dāng)鼠標(biāo)放上去時(shí)將超鏈接的顏色設(shè)為藍(lán)色的。2009-06-06js實(shí)現(xiàn)快速分享功能(你的文章分享工具)
這是一款簡(jiǎn)單易用的文章分享工具,您只需將下面的html代碼拷貝到模板中就可以實(shí)現(xiàn)文章快速分享功能,具體的實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-06-06JS+CSS實(shí)現(xiàn)的拖動(dòng)分頁(yè)效果實(shí)例
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)的拖動(dòng)分頁(yè)效果,可實(shí)現(xiàn)鼠標(biāo)拖動(dòng)頁(yè)面翻轉(zhuǎn)到上一頁(yè)或下一頁(yè)的功能,涉及javascript操作頁(yè)面元素與css樣式的相關(guān)技巧,需要的朋友可以參考下2015-05-05原生JS實(shí)現(xiàn)手動(dòng)輪播圖效果實(shí)例代碼
手動(dòng)輪播圖,為輪播圖中的一種,輪播圖主要有無(wú)縫輪播,手動(dòng)輪播,延遲輪播,切換輪播等等,輪播圖主要用于展現(xiàn)圖片,新出商品,詞條,又能美觀網(wǎng)頁(yè)。給網(wǎng)頁(yè)中增加動(dòng)態(tài)效果。接下來(lái)通過(guò)本文給大家分享原生JS實(shí)現(xiàn)手動(dòng)輪播圖的實(shí)例代碼,一起看看吧2018-11-11JavaScript實(shí)現(xiàn)數(shù)字?jǐn)?shù)組正序排列的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)數(shù)字?jǐn)?shù)組正序排列的方法,涉及javascript中sort方法的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04Javascript實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11JavaScript滿天星導(dǎo)航欄實(shí)現(xiàn)方法
本篇文章給大家分享了JavaScript滿天星導(dǎo)航欄實(shí)現(xiàn)方法,以前也介紹過(guò)很多關(guān)于特效導(dǎo)航的制作方法,對(duì)此有興趣的朋友參考學(xué)習(xí)下。2018-03-03iview通過(guò)Dropdown(下拉菜單)實(shí)現(xiàn)的右鍵菜單
這篇文章主要介紹了iview通過(guò)Dropdown(下拉菜單)實(shí)現(xiàn)的右鍵菜單 ,需要的朋友可以參考下2018-10-10