数组转树的两种方法

将下面的扁平数组

const data = [
  { 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: '运维工程师' }
]
复制代码

转换成树形数组

[{
  label: '张大大',
  children: [
    {
      label: '小亮',
      children: [{label: '小丽'}，{label: '大光'}]
    },
    {
      label: '小美',
      children: [{label: '小高'}]
    },
    {
      label: '老马',
      children: [{label: '小刘'}，{label: '小华'},{label: '小李'}]
    },
    {
      label: '老王',
      children: [{label: '小赵'}，{label: '小强'}]
    },
    {
      label: '老李',
      children: [{label: '小涛'}]
    }
  ]
}]

方法一:使用递归来查找父级节点，添加元素。

const data = [
  { 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: '运维工程师' }
]

const treeData = arrToTree(data)
console.log(treeData)

function arrToTree(data) {
  // tree来保存树形数组
  let tree = []

  if (!Array.isArray(data)) {
    return tree
  }

  data.forEach(ele => {
    if (ele.pid === '') return tree.push(nodeObj(ele))
    // 在树形数组上查找ele的父级节点对象
    const obj = getElementById(tree, ele.pid)
    // 如果找到了，添加到这个节点的children属性中
    obj && obj.children.push(nodeObj(ele))
  })

  return tree
}

// 根据扁平数组对象生成树形数组中的节点对象
function nodeObj(obj) {
  return {
    id: obj.id,
    label: obj.name,
    children: [],
    job: obj.job
  }
}

// 通过ID，递归查找树形结构中的元素
function getElementById(arr, id) {
  for (const ele of arr) {
    if (ele.id === id) {
      return ele
    } else if (ele.children.length > 0) {
      const temp = getElementById(ele.children, id)
      if (temp) {
        return temp
      } else {
        continue
      }
    }
  }
}

方法二

不使用递归，将原数组转换成对象来处理。

const data = [
  { 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: '运维工程师' }
]

const tree = arrToTree(data)
console.log(tree)

function arrToTree(data) {
  let tree = []
  if (!Array.isArray(data)) {
    return tree
  }
  // 将数组转换成对象（键值对），将ID作为属性名，原来的数组里的对象作为属性值
  let map = {}
  data.forEach(item => {
    map[item.id] = item
  })
  // 通过对象的属性名（ID）来找到父级节点，将存到map里的对象取出来放到父级节点的childere数组中
  data.forEach(item => {
    let parent = map[item.pid]

    // 修改对象的属性
    delete item.pid
    item['label'] = item.name
    delete item.name

    if (parent) {
      ;(parent.children || (parent.children = [])).push(item)
    } else {
      tree.push(item)
    }
  })
  return tree
}

方式三

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: '运维工程师' }
]

    function translateArrToTree(arr) {
      // 1.先是制作字典能够获得每一行的信息
      const newArr = []
      const map = []
      arr.forEach(item => {
        // 为了方便给每一项都添加上children
        // 对象是直接.就可以添加属性的
        item.children = []
        const key = item.id
        map[key] = item
      });

      // 2.遍历每一项,然后有父级的添加到父级的children中,没有父级的直接添加到新的数组中
      arr.forEach(item => {
        const parent = map[item.pid]
        if (parent) {
          parent.children.push(item)
        } else {
          newArr.push(item)
        }
      })
      return newArr
    }
    const res = translateArrToTree(arr)
    console.log(res);