快捷導(dǎo)航

如何將JavaScript將數(shù)組轉(zhuǎn)為樹形結(jié)構(gòu)

更新時(shí)間：2021年06月02日 09:56:48 作者：蘭村_web

我們經(jīng)常會(huì)碰到樹形數(shù)據(jù)結(jié)構(gòu)，比方組織層級(jí)、省市縣或者者動(dòng)植物分類等等數(shù)據(jù)，那么如何將JavaScript將數(shù)組轉(zhuǎn)為樹形結(jié)構(gòu)，本文就詳細(xì)的來(lái)了解一下

1.需求

后臺(tái)給了一個(gè)這樣的數(shù)據(jù)讓咱前端去轉(zhuǎn)換為樹形結(jié)構(gòu)（沒(méi)有重復(fù)數(shù)據(jù)）。不多說(shuō)，先來(lái)看看給了一個(gè)怎樣的數(shù)組數(shù)據(jù)，轉(zhuǎn)換為怎樣的樹形結(jié)構(gòu)。

服務(wù)器傳過(guò)來(lái)的數(shù)組

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

最終轉(zhuǎn)換為

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

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

const [treeData, setTreeData] = useState([]);
  console.log(treeData); //treeData為最終需要的樹形結(jié)構(gòu)，（在我本地瀏覽器打印出來(lái)是正確的）
  
  useEffect(() => {
    const str = '[[{"deptId":"D019","deptName":"銷售部"},{"deptId":"D019101","deptName":"華北銷售中心"}],[{"deptId":"D019","deptName":"銷售部"},{"deptId":"D019101","deptName":"華北銷售中心"}],[{"deptId":"D083","deptName":"音樂(lè)事業(yè)部"}],[{"deptId":"D027","deptName":"杭州研究院"},{"deptId":"D027048","deptName":"技術(shù)工程事業(yè)部"},{"deptId":"D027048002","deptName":"項(xiàng)目管理與效能中心"}],[{"deptId":"D027","deptName":"杭州研究院"},{"deptId":"D027048","deptName":"技術(shù)工程事業(yè)部"}],[{"deptId":"D027","deptName":"杭州研究院"},{"deptId":"D027048","deptName":"技術(shù)工程事業(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)) { //所有一級(jí)部門
      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);
  }

總結(jié)

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

到此這篇關(guān)于如何將JavaScript將數(shù)組轉(zhuǎn)為樹形結(jié)構(gòu)的文章就介紹到這了,更多相關(guān)JavaScript數(shù)組轉(zhuǎn)為樹形結(jié)構(gòu)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: