js 實現(xiàn) list轉換成tree的方法示例(數(shù)組到樹)
更新時間:2019年08月18日 08:44:06 作者:圍墻
這篇文章主要介紹了js 實現(xiàn) list轉換成tree的方法示例(數(shù)組到樹),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
目標:
JS 將有父子關系的平行數(shù)組轉換成樹形數(shù)據(jù)
方法:雙重遍歷,一次遍歷parentId,一次遍歷id == parendId;
該方法應該能很容易被想到,實現(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){ //當內(nèi)層循環(huán)的ID== 外層循環(huán)的parendId時,(說明有children),需要往該內(nèi)層id里建個children并push對應的數(shù)組; if(!ele.children){ ele.children = []; } ele.children.push(element); } }); } }); console.log(oldArr) //此時的數(shù)組是在原基礎上補充了children; oldArr = oldArr.filter(ele => ele.parentId === 0); //這一步是過濾,按樹展開,將多余的數(shù)組剔除; console.log(oldArr) return oldArr; } listToTree(oldData);
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
javascript getElementByTagName的使用
javascript getElementByTagName當鼠標放上去時將超鏈接的顏色設為藍色的。2009-06-06JavaScript實現(xiàn)數(shù)字數(shù)組正序排列的方法
這篇文章主要介紹了JavaScript實現(xiàn)數(shù)字數(shù)組正序排列的方法,涉及javascript中sort方法的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04iview通過Dropdown(下拉菜單)實現(xiàn)的右鍵菜單
這篇文章主要介紹了iview通過Dropdown(下拉菜單)實現(xiàn)的右鍵菜單 ,需要的朋友可以參考下2018-10-10