JS遍歷樹層級關(guān)系實現(xiàn)原理解析

更新時間：2020年08月31日 10:03:27 作者：FeelRose

這篇文章主要介紹了JS遍歷樹層級關(guān)系實現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

1.遍歷樹的層級關(guān)系

1）先整理數(shù)據(jù)

2）找到id和數(shù)據(jù)的映射關(guān)系

3）然后找到父節(jié)點的數(shù)據(jù)，進(jìn)行存儲

代碼如下

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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

uniapp中uni-popup的具體使用
本文主要介紹了uniapp中uni-popup的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-06-06
JS array數(shù)組檢測方式解析
這篇文章主要介紹了JS array數(shù)組檢測方式解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-05-05
頁面內(nèi)查找
頁面內(nèi)查找...
2006-09-09
JavaScript基礎(chǔ)教程之如何實現(xiàn)一個簡單的promise
看了些promise的介紹，還是感覺不夠深入，所以下面這篇文章主要給大家介紹了關(guān)于JavaScript基礎(chǔ)教程之如何實現(xiàn)一個簡單的promise的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下
2018-09-09
JavaScript DOM操作與事件處理方法
本文通過一系列代碼片段,詳細(xì)介紹了如何使用JavaScript進(jìn)行DOM操作、事件處理、屬性操作、內(nèi)容操作、尺寸和位置獲取,以及實現(xiàn)簡單的動畫效果,涵蓋了基礎(chǔ)和高級技術(shù)點,適合初學(xué)者和進(jìn)階開發(fā)者,感興趣的朋友一起看看吧
2025-01-01
JavaScript鍵盤事件響應(yīng)順序詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript鍵盤事件響應(yīng)順序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-09-09
一文了解ES5和ES6的區(qū)別
ES6是JavaScript語言的主要增強(qiáng),允許我們編寫程序,ES6適用于復(fù)雜的應(yīng)用程序,盡管ES5和ES6在本質(zhì)上有一些相似之處,但它們之間也有許多不同之處,下面這篇文章主要給大家介紹了關(guān)于ES5和ES6區(qū)別的相關(guān)資料,需要的朋友可以參考下
2023-05-05
js實現(xiàn)隨機(jī)div顏色位置類似滿天星效果
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)隨機(jī)div顏色位置，類似滿天星效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-10-10
深入理解JavaScript中的Base64編碼字符串
在我們進(jìn)行前端開發(fā)時，針對項目優(yōu)化，常會提到一條：針對較小圖片，合理使用Base64字符串替換內(nèi)嵌，可以減少頁面http請求。本文整理了一些Base64編碼字符串的相關(guān)知識，感興趣的可以了解一下
2023-02-02
Javascript中的this,bind和that使用實例
這篇文章主要介紹了Javascript中的this,bind和that使用實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-12-12