扁平化列表数据转换为树形数据

日常开发中,我们经常需要将后端返回的扁平化列表数据转换为树形数据进行展示,今天来总结下

扁平数据和列表数据

  //扁平数据
  const arr = [
        { id: 1, pid: '', name: '老王' },
        { id: 2, pid: 1, name: '王一' },
        { id: 3, pid: 1, name: '王二' },
        { id: 4, pid: '', name: '老孙' },
        { id: 5, pid: 4, name: '孙一' },
        { id: 6, pid: 4, name: '孙二' },
      ]
      
  //树形数据(我们所需要的)
   const targetArr = [
         { id: 1,
           pid: '',
           name: '老王',
           children: [
               { id: 2, pid: 1, name: '王一' },
               { id: 3, pid: 1, name: '王二' },
           ]
         },
         { id: 4,
           pid: '',
           name: '老孙' ,
           children: [
               { id: 5, pid: 4, name: '孙一' },
               { id: 6, pid: 4, name: '孙二' },
           ]
         },
    ]

扁平数据==>树形数据

递归实现

说明 后端返回的数据子节点的pid为父节点的id
原理

• 传入父节点特有的pid,遍历数组,找出所有父节点,将其推入新数组
• 通过递归,找出是否有节点的pid等于父节点id的,有的话就将它放在父节点的children中

 function tranListToTreeData(data, rootValue) {
        let arr = []
        data.forEach((item) => {
          if (item.pid === rootValue) {
            //根据传入的参数，找出父节点推入新数组
            arr.push(item)
            //找是否有节点的pid等于父节点的id
            const children = tranListToTreeData(data, item.id)
            if (children.length) {
              item.children = children
            }
          }
        })
        return arr
      }
      console.log(tranListToTreeData(arr, '')) //此时就可以将上面的扁平数据转换为了树形数据

树形数据==>扁平数据

递归实现

function flattTree(data, newArr) {
  data.forEach(item => {
    //有孩子就递归查找，删除孩子，没有没推到新数组
    if (item.children) {
      newArr.push(item)
      flattTree(item.children, newArr)
      delete item['children']
    } else {
      newArr.push(item)
    }
  })
}
let newArr = []
flattTree(targetArr, newArr)
console.log(newArr) //此时新数组就是上面树形数据转换为的扁平数据