快捷導(dǎo)航

js 實(shí)現(xiàn) list轉(zhuǎn)換成tree的方法示例（數(shù)組到樹）

更新時(shí)間：2019年08月18日 08:44:06 作者：圍墻

這篇文章主要介紹了js 實(shí)現(xiàn) list轉(zhuǎn)換成tree的方法示例（數(shù)組到樹），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

目標(biāo)：

JS 將有父子關(guān)系的平行數(shù)組轉(zhuǎn)換成樹形數(shù)據(jù)

方法：雙重遍歷，一次遍歷parentId,一次遍歷id == parendId;

該方法應(yīng)該能很容易被想到，實(shí)現(xiàn)起來(lái)也一步一步可以摸索出來(lái)；

const oldData = [
  {id:1,name:'boss',parentId:0},
  {id:2,name:'lily',parentId:1},
  {id:3,name:'jack',parentId:1},
  {id:4,name:'john',parentId:2},
  {id:5,name:'boss2',parentId:0},
]


function listToTree(oldArr){
  oldArr.forEach(element => {
    let parentId = element.parentId;
    if(parentId !== 0){
      oldArr.forEach(ele => {
        if(ele.id == parentId){ //當(dāng)內(nèi)層循環(huán)的ID== 外層循環(huán)的parendId時(shí)，（說(shuō)明有children），需要往該內(nèi)層id里建個(gè)children并push對(duì)應(yīng)的數(shù)組；
          if(!ele.children){
            ele.children = [];
          }
          ele.children.push(element);
        }
      });
    }
  });
  console.log(oldArr) //此時(shí)的數(shù)組是在原基礎(chǔ)上補(bǔ)充了children;
  oldArr = oldArr.filter(ele => ele.parentId === 0); //這一步是過(guò)濾，按樹展開，將多余的數(shù)組剔除；
  console.log(oldArr)
  return oldArr;
}
listToTree(oldData);

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

解讀函數(shù)的節(jié)流與防抖問(wèn)題
這篇文章主要介紹了解讀函數(shù)的節(jié)流與防抖問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
小程序卡片切換效果組件wxCardSwiper的實(shí)現(xiàn)
這篇文章主要介紹了小程序卡片切換效果組件wxCardSwiper的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
bootstrap模態(tài)框?qū)崿F(xiàn)拖拽效果
這篇文章主要為大家詳細(xì)介紹了bootstrap模態(tài)框?qū)崿F(xiàn)拖拽效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
Javascript判斷對(duì)象是否相等實(shí)現(xiàn)代碼
想判斷2個(gè)js對(duì)象，是不是所有完全相同在表單頁(yè)面應(yīng)用是很常見的，接下來(lái)分享一段判斷代碼，感興趣的你可以參考下哈，希望可以幫助到你
2013-03-03
js拖拽功能實(shí)現(xiàn)代碼解析
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)拖拽功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
如何只用echarts做個(gè)仿3d地圖功能
由于業(yè)務(wù)需求,需要繪制3d地圖,所以下面這篇文章主要給大家介紹了關(guān)于如何只用echarts做個(gè)仿3d地圖功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
如何用JS解析剪切板里的excel內(nèi)容
這篇文章主要介紹了如何用JS解析剪切板里的excel內(nèi)容，對(duì)解析excel感興趣的同學(xué)，可以參考下
2021-04-04
微信小程序使用第三方庫(kù)Immutable.js實(shí)例詳解
Immutable 是 Facebook 開發(fā)的不可變數(shù)據(jù)集合。不可變數(shù)據(jù)一旦創(chuàng)建就不能被修改，是的應(yīng)用開發(fā)更簡(jiǎn)單，允許使用函數(shù)式編程技術(shù)，比如惰性評(píng)估。微信小程序無(wú)法直接使用Immutable.js，下面就來(lái)說(shuō)說(shuō)微信小程序如何使用第三方庫(kù)Immutable.js。
2016-09-09
JS前端實(shí)現(xiàn)留言板功能的方法總結(jié)
留言板的主要使用場(chǎng)景是為用戶提供一個(gè)在網(wǎng)站或應(yīng)用上留言的平臺(tái),本文主要為大家介紹了四個(gè)常見的前端實(shí)現(xiàn)留言板功能的方法,希望對(duì)大家有所幫助
2023-11-11
簡(jiǎn)單了解Javscript中兄弟ifream的方法調(diào)用
這篇文章主要介紹了簡(jiǎn)單了解Javscript中兄弟ifream的方法調(diào)用文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下
2019-06-06