js實(shí)現(xiàn)單層數(shù)組轉(zhuǎn)多層樹

更新時(shí)間：2023年06月29日 10:18:05 作者：iru

這篇文章主要介紹了js實(shí)現(xiàn)單層數(shù)組轉(zhuǎn)多層樹方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

js單層數(shù)組轉(zhuǎn)多層樹

在很多場(chǎng)景下由于區(qū)分授權(quán)，比如菜單或組織機(jī)構(gòu)等，給當(dāng)前用戶返回的往往可能不是以固定的父id來標(biāo)識(shí)數(shù)據(jù)的根節(jié)點(diǎn)。

這種情況下就需要?jiǎng)討B(tài)的根據(jù)當(dāng)前數(shù)組本身自動(dòng)判斷構(gòu)造樹。

理論就是根據(jù)父id，在數(shù)組或樹中查找，如果在元素中找到對(duì)應(yīng)id，那么就追加為子元素。

如果找不到，那當(dāng)前元素就是定級(jí)元素。

/**
 * 列表轉(zhuǎn)為樹，pid值未知。思路：第一遍遍歷構(gòu)造為map，第二遍
 * @param {*} list 
 * @returns 
 */
 export function listToTree(list) {
  let treeData = []
  // 第一次遍歷，構(gòu)造一個(gè)map
  let tmpObj = {}
  list.forEach(item => { // 這里也可以把值設(shè)置為數(shù)組的索引，這樣的話在這里可以不必存儲(chǔ)這么大空間了
    tmpObj[item.id] = item
  });
  list.forEach(v => {
    const parent = tmpObj[v.parentId]
    // 如果有parentId并且在臨時(shí)map中存在
    if (v.parentId && parent) {
      // 那么把當(dāng)前元素追加到目標(biāo)元素children之內(nèi)，并且把當(dāng)前key刪除
      if (!parent.children) {
        parent.children = []
      }
      parent.children.push(v)
    } else {
      treeData.push(v)
    }
  })
  // 再遍歷，根據(jù)pid在map中找是否有key，如果有，說明是上級(jí)，那么追加到children中；如果沒有，那么就跳過，表示沒有上級(jí)
  return treeData;
}

js一維（無嵌套單層）數(shù)組轉(zhuǎn)樹結(jié)構(gòu)數(shù)組（多維嵌套數(shù)組）

適用elementui（tree），根據(jù)項(xiàng)中的項(xiàng)的parentId與其他項(xiàng)中的id比較，相同，則將這個(gè)項(xiàng)添加到對(duì)應(yīng)的id項(xiàng)中

有一維數(shù)組如

在這里插入圖片描述

想要等到以下的數(shù)據(jù)格式

在這里插入圖片描述

先循環(huán)出祖先級(jí)的項(xiàng)，再根據(jù)id與parentId，遞歸獲得最終數(shù)據(jù)：

let newArray = [];
arr.forEach(res => {
   if(res.parentId === 0) {
        newArray.push(res);
    }
});
this.arrToTree(arr, newArray) ;
console.log(newArray);  // 最終得到的新數(shù)組；
function arrToTree(list, arr) {
    arr.forEach(res => {
        list.forEach((ret, index) => {
            if(res.id === ret.parentId) {
                if(!res.hasOwnProperty('children')){
                    res.children = [];
                };
                res.children.push(ret);
            }
        })
        if(res.hasOwnProperty('children')) {
            this.arrToTree(list, res.children);
        }
    })
}