JS遍歷樹層級關系實現(xiàn)原理解析
1.遍歷樹的層級關系
1)先整理數(shù)據(jù)
2)找到id和數(shù)據(jù)的映射關系
3)然后找到父節(jié)點的數(shù)據(jù),進行存儲
代碼如下
test() { const list = [ { id: '123', parentId: '', children: [] }, { id: '124', parentId: '123', children: [] }, { id: '125', parentId: '124', children: [] }, { id: '126', parentId: '125', children: [] }, { id: '127', parentId: '126', children: [] } ]; const mapList = []; const tree = []; list.forEach(item => {mapList[item.id] = item; }); list.forEach(item => { const parentNode = mapList[item.parentId]; if (!parentNode) { if (!item.children) { item.children = [] } tree.push(item); } else {if (!parentNode.children) {parentNode.children = []} parentNode.children.push(item); } }); console.log('tree', tree); },
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關文章:
1. IntelliJ IDEA安裝插件的方法步驟2. 理解PHP5中static和const關鍵字3. php模擬實現(xiàn)斗地主發(fā)牌4. spring acegi security 1.0.0 發(fā)布5. Vue封裝一個TodoList的案例與瀏覽器本地緩存的應用實現(xiàn)6. Vuex localStorage的具體使用7. jQuery 實現(xiàn)DOM元素拖拽交換位置的實例代碼8. .Net Core使用Coravel實現(xiàn)任務調度的完整步驟9. vue 使用localstorage實現(xiàn)面包屑的操作10. MyBatis中的JdbcType映射使用詳解

網(wǎng)公網(wǎng)安備