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)文章
這篇文章主要介紹了解讀函數(shù)的節(jié)流與防抖問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
小程序卡片切換效果組件wxCardSwiper的實現(xiàn)
這篇文章主要介紹了小程序卡片切換效果組件wxCardSwiper的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
bootstrap模態(tài)框?qū)崿F(xiàn)拖拽效果
這篇文章主要為大家詳細(xì)介紹了bootstrap模態(tài)框?qū)崿F(xiàn)拖拽效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
想判斷2個js對象，是不是所有完全相同在表單頁面應(yīng)用是很常見的，接下來分享一段判斷代碼，感興趣的你可以參考下哈，希望可以幫助到你2013-03-03
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)拖拽功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
由于業(yè)務(wù)需求,需要繪制3d地圖,所以下面這篇文章主要給大家介紹了關(guān)于如何只用echarts做個仿3d地圖功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要介紹了如何用JS解析剪切板里的excel內(nèi)容，對解析excel感興趣的同學(xué)，可以參考下2021-04-04
Immutable 是 Facebook 開發(fā)的不可變數(shù)據(jù)集合。不可變數(shù)據(jù)一旦創(chuàng)建就不能被修改，是的應(yīng)用開發(fā)更簡單，允許使用函數(shù)式編程技術(shù)，比如惰性評估。微信小程序無法直接使用Immutable.js，下面就來說說微信小程序如何使用第三方庫Immutable.js。2016-09-09
留言板的主要使用場景是為用戶提供一個在網(wǎng)站或應(yīng)用上留言的平臺,本文主要為大家介紹了四個常見的前端實現(xiàn)留言板功能的方法,希望對大家有所幫助2023-11-11
簡單了解Javscript中兄弟ifream的方法調(diào)用
這篇文章主要介紹了簡單了解Javscript中兄弟ifream的方法調(diào)用文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，,需要的朋友可以參考下2019-06-06