数组转树形结构_数组转为树形结构-CSDN博客

本文链接：https://blog.csdn.net/alfred____/article/details/116157262

这篇博客介绍了如何将数组数据转换为树形结构，以适应组件库的要求。文章提供了一个JavaScript函数`arrToTree`，它接受一个包含`id`和`pid`的对象数组，通过递归方式将数据转换为树形结构，便于前端展示组织结构或层级关系。示例展示了具体的转换过程和结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景: 如果想使用组件库的树形结构就要用人家规定的数据结构,而后端返回的不是这种数据结构,所以就需要我们手动进行转换

例如: let 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 arrToTree(list, id) {
  // 筛选传入的数组 bag接收的是数据中pid和id相等的那个对象
  const bag = list.filter(son => son.pid === id)
  // 判断如果bag长度为0 代表没有数据 返回一个null做标识 这里可以返回任何值( undefined, 空数组等)
  if (bag.length === 0) return null
  // 如果有数据
  else {
    //   进行遍历返回一个新数组 并把结果return出去
    return bag.map(son => {
    //   console.log(son)
      // 递归再次调用改函数进行循环筛选
      const grandSon = arrToTree(list, son.id)
      // 判断是否有子元素 若没有 返回数据的格式为{ 展开后的son }
      if (grandSon === null) return { ...son }
      // 若有子元素 返回数据的格式为{ 展开后的son, children: grandSon}
      else return { ...son, children: grandSon }
    })
  }
}
 // 调用该函数 并传入数据
     const newArr = arrToTree(arr, '')
     console.log(newArr);