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ù)組到樹），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

目標(biāo)：

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

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

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

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í)，（說明有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); //這一步是過濾，按樹展開，將多余的數(shù)組剔除；
  console.log(oldArr)
  return oldArr;
}
listToTree(oldData);

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

您可能感興趣的文章:

相關(guān)文章

js中將時(shí)間戳轉(zhuǎn)化成YYYY-MM-DD?HH:mm:ss的3種實(shí)現(xiàn)辦法
最近開發(fā)中需要和后端進(jìn)日期和時(shí)間傳值,前后端約定為時(shí)間戳的格式,但是前端展示需要展示成年-月-日的格式,就需要進(jìn)行日期和時(shí)間轉(zhuǎn)換格式,這篇文章主要給大家介紹了關(guān)于js中將時(shí)間戳轉(zhuǎn)化成YYYY-MM-DD?HH:mm:ss的3種實(shí)現(xiàn)辦法,需要的朋友可以參考下
2024-06-06
JavaScript語言精粹經(jīng)典實(shí)例(整理篇)
本文是小編日常讀書筆記整理有關(guān)javascript知識(shí)，都是js精粹非常不錯(cuò)，具有參考借鑒價(jià)值，特此分享到腳本之家平臺(tái)供大家參考
2016-06-06
require導(dǎo)入module.exports 或 exports導(dǎo)出的使用方法
module.exports用于導(dǎo)出整個(gè)模塊的內(nèi)容,可以通過賦值給 module.exports 導(dǎo)出一個(gè)對(duì)象、函數(shù)或值,導(dǎo)出的內(nèi)容可以被其他模塊通過require 導(dǎo)入,本文給大家介紹require導(dǎo)入module.exports 或 exports導(dǎo)出的使用,感興趣的朋友一起看看吧
2023-11-11
微信小程序?qū)崿F(xiàn)動(dòng)態(tài)渲染Markdown示例詳解
這篇文章主要為大家介紹了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)渲染Markdown示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
js 利用image對(duì)象實(shí)現(xiàn)圖片的預(yù)加載提高訪問速度
我們來學(xué)習(xí)一種名為圖像預(yù)裝載（image preloading）的小技巧來提高圖像訪問速度，一些瀏覽器試圖通過在本地緩存中保存這些圖片來解決此問題，感興趣的朋友可以了解下
2013-03-03
用javascript實(shí)現(xiàn)記錄來賓姓名的代碼
用javascript實(shí)現(xiàn)記錄來賓姓名的代碼...
2007-03-03
微信小程序?qū)崿F(xiàn)根據(jù)字母選擇城市功能
這篇文章主要為大家詳細(xì)介紹了微信小程序中根據(jù)字母選擇城市的相關(guān)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
js檢測(cè)標(biāo)題與描述中的關(guān)鍵詞發(fā)現(xiàn)就替換或跳轉(zhuǎn)到別的頁面
這篇文章主要介紹了js檢測(cè)標(biāo)題與描述中的關(guān)鍵詞發(fā)現(xiàn)就替換或跳轉(zhuǎn)到別的頁面的實(shí)現(xiàn)方法，主要是分享它的編程思路與加密方法
2021-06-06
layui table去掉右側(cè)滑動(dòng)條的實(shí)現(xiàn)方法
今天小編就為大家分享一篇layui table去掉右側(cè)滑動(dòng)條的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
webpack該如何打包(打包流程)
這篇文章主要介紹了webpack該如何打包及打包流程,本文通過圖文示例相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2023-12-12