JS遍歷樹層級關(guān)系實現(xiàn)原理解析
更新時間:2020年08月31日 10:03:27 作者:FeelRose
這篇文章主要介紹了JS遍歷樹層級關(guān)系實現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
1.遍歷樹的層級關(guān)系
1)先整理數(shù)據(jù)
2)找到id和數(shù)據(jù)的映射關(guān)系
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); },
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實現(xiàn)html轉(zhuǎn)pdf的三種方法詳解
近期項目需要實現(xiàn)將?html?頁面轉(zhuǎn)換成?pdf?報告的需求,經(jīng)過一番調(diào)研以及結(jié)合過往經(jīng)驗,發(fā)現(xiàn)了三種技術(shù)方案,下面我們就來看看它們的具體實現(xiàn)步驟吧2024-02-02JS表格組件神器bootstrap table詳解(強化版)
這篇文章主要以實例的方式為大家再次介紹了JS表格組件神器bootstrap table,bootstrap table界面采用扁平化的風格,用戶體驗比較好,更好兼容各種客戶端,需要了解更多bootstrap table的朋友可以參考下2016-05-05微信小程序MUI導航欄透明漸變功能示例(通過改變opacity實現(xiàn))
這篇文章主要介紹了微信小程序MUI導航欄透明漸變功能,結(jié)合實例形式分析了通過改變opacity實現(xiàn)透明度漸變功能相關(guān)操作技巧,需要的朋友可以參考下2019-01-01