JS遍歷樹(shù)層級(jí)關(guān)系實(shí)現(xiàn)原理解析
1.遍歷樹(shù)的層級(jí)關(guān)系
1)先整理數(shù)據(jù)
2)找到id和數(shù)據(jù)的映射關(guān)系
3)然后找到父節(jié)點(diǎn)的數(shù)據(jù),進(jìn)行存儲(chǔ)
代碼如下
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); },
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. Intellij IDEA 2019 最新亂碼問(wèn)題及解決必殺技(必看篇)2. 未來(lái)的J2EE主流應(yīng)用框架:對(duì)比Spring和EJB33. 利用django創(chuàng)建一個(gè)簡(jiǎn)易的博客網(wǎng)站的示例4. Android Manifest中meta-data擴(kuò)展元素?cái)?shù)據(jù)的配置與獲取方式5. JS繪圖Flot如何實(shí)現(xiàn)動(dòng)態(tài)可刷新曲線(xiàn)圖6. ASP.NET MVC獲取多級(jí)類(lèi)別組合下的產(chǎn)品7. PHP5.0正式發(fā)布 不完全兼容PHP4 新增多項(xiàng)功能8. 關(guān)于HTML5的img標(biāo)簽9. Android自定義View實(shí)現(xiàn)掃描效果10. JS+css3實(shí)現(xiàn)幻燈片輪播圖
