JS遍歷樹層級關系實現原理解析
更新時間：2020年08月31日 10:03:27 作者：FeelRose
這篇文章主要介紹了JS遍歷樹層級關系實現原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
1.遍歷樹的層級關系
1）先整理數據
2）找到id和數據的映射關系
3）然后找到父節(jié)點的數據，進行存儲
代碼如下
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);
},
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了uniapp中uni-popup的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06
這篇文章主要介紹了JS array數組檢測方式解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
頁面內查找...2006-09-09
JavaScript基礎教程之如何實現一個簡單的promise
看了些promise的介紹，還是感覺不夠深入，所以下面這篇文章主要給大家介紹了關于JavaScript基礎教程之如何實現一個簡單的promise的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下2018-09-09
本文通過一系列代碼片段,詳細介紹了如何使用JavaScript進行DOM操作、事件處理、屬性操作、內容操作、尺寸和位置獲取,以及實現簡單的動畫效果,涵蓋了基礎和高級技術點,適合初學者和進階開發(fā)者,感興趣的朋友一起看看吧2025-01-01
這篇文章主要為大家詳細介紹了JavaScript鍵盤事件響應順序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
ES6是JavaScript語言的主要增強,允許我們編寫程序,ES6適用于復雜的應用程序,盡管ES5和ES6在本質上有一些相似之處,但它們之間也有許多不同之處,下面這篇文章主要給大家介紹了關于ES5和ES6區(qū)別的相關資料,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細介紹了js實現隨機div顏色位置，類似滿天星效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
在我們進行前端開發(fā)時，針對項目優(yōu)化，常會提到一條：針對較小圖片，合理使用Base64字符串替換內嵌，可以減少頁面http請求。本文整理了一些Base64編碼字符串的相關知識，感興趣的可以了解一下2023-02-02
Javascript中的this,bind和that使用實例
這篇文章主要介紹了Javascript中的this,bind和that使用實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12