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