欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何將JavaScript將數(shù)組轉為樹形結構

 更新時間:2021年06月02日 09:56:48   作者:蘭村_web  
我們經(jīng)常會碰到樹形數(shù)據(jù)結構,比方組織層級、省市縣或者者動植物分類等等數(shù)據(jù),那么如何將JavaScript將數(shù)組轉為樹形結構,本文就詳細的來了解一下

1.需求

后臺給了一個這樣的數(shù)據(jù)讓咱前端去轉換為樹形結構(沒有重復數(shù)據(jù))。不多說,先來看看給了一個怎樣的數(shù)組數(shù)據(jù),轉換為怎樣的樹形結構。

服務器傳過來的數(shù)組

const arr = [
      [
        {"deptId":"D019",
        "deptName":"銷售部"},
        {"deptId":"D019101",
        "deptName":"華北銷售中心"}
      ],[
        {"deptId":"D083",
        "deptName":"音樂事業(yè)部"}
      ],[
        {"deptId":"D027",
        "deptName":"杭州研究院"},
        {"deptId":"D027048",
        "deptName":"技術工程事業(yè)部"},
        {"deptId":"D027048002",
        "deptName":"項目管理中心"}
      ],[
        {"deptId":"D027",
        "deptName":"杭州研究院"},
        {"deptId":"D027048",
        "deptName":"技術工程事業(yè)部"}
      ],[
        {"deptId":"D027",
        "deptName":"杭州研究院"},
        {"deptId":"D027048",
        "deptName":"技術工程事業(yè)部"}
      ]
    ]

最終轉換為

const arr = [
    {
      deptId: 'D019',
      deptName: '銷售部',
      children: [{
        deptId: 'D019101',
        deptName: '華北銷售中心',
        children: [],
      }]
    },
    {
      deptId: 'D083',
      deptName: '音樂事業(yè)部',
      children: []
    },
    {
      deptId: 'D027',
      deptName: '杭州研究院',
      children: [{
        deptId: 'D027048',
        deptName: '技術工程事業(yè)部',
        children: [{
          deptId: 'D027048002',
          deptName: '項目管理中心',
          children: []
        }]
      }]
    },
  ]

2.上代碼(在reactHooks中開發(fā))

const [treeData, setTreeData] = useState([]);
  console.log(treeData); //treeData為最終需要的樹形結構,(在我本地瀏覽器打印出來是正確的)
  
  useEffect(() => {
    const str = '[[{"deptId":"D019","deptName":"銷售部"},{"deptId":"D019101","deptName":"華北銷售中心"}],[{"deptId":"D019","deptName":"銷售部"},{"deptId":"D019101","deptName":"華北銷售中心"}],[{"deptId":"D083","deptName":"音樂事業(yè)部"}],[{"deptId":"D027","deptName":"杭州研究院"},{"deptId":"D027048","deptName":"技術工程事業(yè)部"},{"deptId":"D027048002","deptName":"項目管理與效能中心"}],[{"deptId":"D027","deptName":"杭州研究院"},{"deptId":"D027048","deptName":"技術工程事業(yè)部"}],[{"deptId":"D027","deptName":"杭州研究院"},{"deptId":"D027048","deptName":"技術工程事業(yè)部"}]]';
    const arr = JSON.parse(str).flat(); //扁平化

    let newArr = [];
    noRepeat(arr).length && noRepeat(arr).forEach(it => {
      appendChild(it, newArr);
    });
  }, [])

  const noRepeat = (arr) => { //去重
    let newobj = {}; 
    return arr.reduce((preVal, curVal) => {
    newobj[curVal.deptId] ? '' : newobj[curVal.deptId] = preVal.push(curVal); 
      return preVal 
    }, []);
  }

  const appendChild = (item, newArr) => {
    if(!newArr.find(it => item.deptId.indexOf(it.deptId) > -1)) { //所有一級部門
      newArr.push({
        deptId: item.deptId,
        deptName: item.deptName,
        children: [],
      });
      setTreeData(newArr);
    }else {
      appendOtherChild(item, newArr);
    }
  }

  const appendOtherChild = (item, newArr) => {
    newArr.map(it => {
      if(item.deptId.indexOf(it.deptId) > -1 && item.deptId.length === it.deptId.length+3) {
        it.children.push({
          deptId: item.deptId,
          deptName: item.deptName,
          children: [],
        })
      }else {
        appendOtherChild(item, it.children);
      }
    });
    setTreeData(newArr);
  }

總結

可能這些數(shù)據(jù)和你的不太一樣,但是邏輯可能八九不離十,可以好好看一下這幾十行代碼

到此這篇關于如何將JavaScript將數(shù)組轉為樹形結構的文章就介紹到這了,更多相關JavaScript數(shù)組轉為樹形結構內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • 如何開發(fā)出更好的JavaScript模塊

    如何開發(fā)出更好的JavaScript模塊

    給大家分享一下如何才能開發(fā)出更好的JavaScript模塊和功能,有興趣的朋友參考學習下吧。
    2017-12-12
  • JS數(shù)組方法reverse()用法實例分析

    JS數(shù)組方法reverse()用法實例分析

    這篇文章主要介紹了JS數(shù)組方法reverse()用法,結合實例形式分析了JS數(shù)組reverse()方法基本功能、用法與操作注意事項,需要的朋友可以參考下
    2020-01-01
  • 微信小程序實現(xiàn)美食展示與收藏功能

    微信小程序實現(xiàn)美食展示與收藏功能

    這篇文章主要介紹了如何在微信小程序中實現(xiàn)美食展示與收藏的功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起動手嘗試一下
    2022-03-03
  • Javascript 定時器調用傳遞參數(shù)的方法

    Javascript 定時器調用傳遞參數(shù)的方法

    Javascript 定時器調用傳遞參數(shù)的方法,需要的朋友可以參考下。
    2009-11-11
  • 聊聊JavaScript中.?、??、??=的用法以及含義

    聊聊JavaScript中.?、??、??=的用法以及含義

    今天項目中突然遇到了不太明白的寫法,下面這篇文章主要給大家介紹了關于JavaScript中.?、??、??=的用法以及含義的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-04-04
  • Openlayers實現(xiàn)長度測量的方法

    Openlayers實現(xiàn)長度測量的方法

    在Openlayers中,使用ol/sphere模塊的getDistance函數(shù)可以計算兩點間的大圓距離,繪制線路時,通過監(jiān)聽繪制事件和幾何對象的變化,可實時更新距離,同時getLength函數(shù)幫助獲取整條線路的長度,這些功能主要用于地理信息系統(tǒng)中的距離測量和地圖制作
    2024-11-11
  • 利用iscroll4實現(xiàn)輪播圖效果實例代碼

    利用iscroll4實現(xiàn)輪播圖效果實例代碼

    iScroll 4 這個版本完全重寫了iScroll這個框架的原始代碼。這個項目的產(chǎn)生完全是因為移動版webkit瀏覽器(諸如iPhone,iPad,Android 這些系統(tǒng)上廣泛使用)。下面這篇文章主要介紹了利用iscroll4實現(xiàn)輪播圖效果的方法教程,需要的朋友可以參考下。
    2017-01-01
  • JavaScript數(shù)據(jù)結構之鏈表各種操作詳解

    JavaScript數(shù)據(jù)結構之鏈表各種操作詳解

    數(shù)據(jù)結構是一種有效處理大量數(shù)據(jù)的手段,了解它的結構和組成為我們提供了更有效的工具來設計與某些問題相關的產(chǎn)品。這次我們將進行鏈表介紹,回顧它的特點和用途
    2022-10-10
  • 使用layui 的layedit定義自己的toolbar方法

    使用layui 的layedit定義自己的toolbar方法

    今天小編就為大家分享一篇使用layui 的layedit定義自己的toolbar方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • JS從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù)的方法

    JS從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù)的方法

    這篇文章給大家介紹基于js如何從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù),非常實用,實現(xiàn)方案也很簡單,需要的朋友可以參考下
    2016-06-06

最新評論