如何将一个数组转换成树状结构？

需求：转化成树状结构

根据pid值对应id值，如图：

 data: [{
        label: '张大大',
        children: [
          {
            label: '小亮',
            children: [{ label: '小丽' }, { label: '大光' }]
          }]
      }],

原数据

const arr = [
        { id: '01', name: '张大大', pid: '', job: '项目经理' },
        { id: '02', name: '小亮', pid: '01', job: '产品leader' },
        { id: '03', name: '小美', pid: '01', job: 'UIleader' },
        { id: '04', name: '老马', pid: '01', job: '技术leader' },
        { id: '05', name: '老王', pid: '01', job: '测试leader' },
        { id: '06', name: '老李', pid: '01', job: '运维leader' },
        { id: '07', name: '小丽', pid: '02', job: '产品经理' },
        { id: '08', name: '大光', pid: '02', job: '产品经理' },
        { id: '09', name: '小高', pid: '03', job: 'UI设计师' },
        { id: '10', name: '小刘', pid: '04', job: '前端工程师' },
        { id: '11', name: '小华', pid: '04', job: '后端工程师' },
        { id: '12', name: '小李', pid: '04', job: '后端工程师' },
        { id: '13', name: '小赵', pid: '05', job: '测试工程师' },
        { id: '14', name: '小强', pid: '05', job: '测试工程师' },
        { id: '15', name: '小涛', pid: '06', job: '运维工程师' },
        { id: '16', name: '小才', pid: '07', job: '运维工程师' },
      ]

分析：

最后要返回一个新的数组，定义一个数组，以及备用的obj对象

将数组转为一个大对象包裹 用其id为名的16个对象

let result = []
      let obj = {}
      arr.forEach(item => {
        obj[item.id] = item
      })

将这个对象再次遍历

因为遍历obj中含有pid中每一项的时候出现为空字符串的时候，结果为undefined

当为undefined时，则证明他是最外层元素

当parent不为undefined时，在其中新加入children属性并赋值为空数组，再向这个数组中push这一项

若果parent可以查找到，必须要在每个数组中加入children属性，（每次遍历加入空数组时，都要添加一个children属性）

arr.forEach(item => {
        // item.pid 为" "时 返回underfined
        let parent = obj[item.pid]
        if (parent) {
          (parent.children || (parent.children = [])).push(item)
        } else {
          // 这里push的item是pid为undefined的数据
          result.push(item)
        }
      })
      console.log(result)

将上述整理后封装为一个方法，方便后续复用

export function tree(arr) {
  const result = []
  const obj = {}
  arr.forEach(item => {
    obj[item.id] = item
  })
  arr.forEach(item => {
    // item.pid 为" "时 返回underfined
    const parent = obj[item.pid]
    if (parent) {
      (parent.children || (parent.children = [])).push(item)
    } else {
      // 这里push的item是pid为undefined的数据
      result.push(item)
    }
  })
  return result
}

方法二：

function getMenuList(authList) {
        let menu = []
        let map = {}
        authList.forEach((m) => {
          m.children = []
          map[m.id] = m 
          if (m.pid === '') {
            menu.push(m) // 如果是根 就直接push到menu中
          } else {
            map[m.pid] && map[m.pid].children.push(m)
          }
        })
        return menu
      }
      console.log(getMenuList(arr))

再新增一个使用递归的方法：

function filterArray(data, pid) {
        var tree = []
        var temp
        for (var i = 0; i < data.length; i++) {
          if (data[i].pid == pid) {
            var obj = data[i]
            temp = filterArray(data, data[i].id)
            if (temp.length > 0) {
              obj.children = temp
          }
            tree.push(obj)
        }
      }
        return tree
    }
console.log(filterArray(arr, ''))