JS遍歷樹層級(jí)關(guān)系實(shí)現(xiàn)原理解析
1.遍歷樹的層級(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); },
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. idea導(dǎo)入maven項(xiàng)目的方法2. idea設(shè)置代碼格式化的方法步驟3. Python和Selenium-未知錯(cuò)誤:在點(diǎn)(663,469)元素不可單擊其他元素將獲得點(diǎn)擊:4. Thinkphp6 配置并使用redis圖文詳解5. springmvc 結(jié)合ajax批量新增的實(shí)現(xiàn)方法6. li中插入img圖片間有空隙的解決方案7. python基礎(chǔ)入門之普通操作與函數(shù)(三)8. java 利用HttpClient PostMethod提交json數(shù)據(jù)操作9. 概述IE和SQL2k開發(fā)一個(gè)XML聊天程序10. 從0到1使用python開發(fā)一個(gè)半自動(dòng)答題小程序的實(shí)現(xiàn)
