处理树形结构化

const data = [
  {
    id: 1,
    pid: 0,
    name: 'coder',
    path: '/coder',
    title: '编程'
  },
  {
    id: 2,
    pid: 1,
    name: 'student',
    path: '/student',
    title: '学生'
  },
  {
    id: 3,
    pid: 1,
    name: 'teacher',
    path: '/teacher',
    title: '编程老师'
  },
  {
      id: 4,
      pid: 3,
      name: 'class',
      path: '/class',
      title: '课程数据'
  },
   {
      id: 5,
      pid: 0,
      name: 'user',
      path: '/user',
      title: '用户管理'
  }
]

扁平化一维数组的数据转换成树形结构的关键是找到每个数据之间的关联，以上数据他们之间的关联就是pid和id，当pid为1时表示该数据是id为1的子级。以下就是完成这结果的两种方案。

一、递归

const formatDataTree = (data) => {
  // 1.分别将顶级数据和子级数据找出来
  const parents = data.filter(parent => parent.pid === 0),
        children = data.filter(children => children.pid !== 0)
  // 2. 将子级数据根据pid -> id的关系放入父级数据的children(Array)的属性中(分别遍历父级与子级数据)
  function dataToTree(parents, children) {
    parents.forEach(p => {
      children.forEach((c, i) => {
        if (c.pid === p.id) {
          const _children = JSON.parse(JSON.stringify(children)) // 深拷贝
          _children.splice(i, 1) // 删掉已经匹配过的元素
          dataToTree([c], _children) // 遍历子级的子级
          if (p.children) {
            p.children.push(c)
          } else {
            p.children = [c]
          }
        }
      })
    })
  }
  dataToTree(parents, children)
  return parents
}

二、扁平化处理

即当遍历数据中的每一项时都重新遍历整个数据，找到pid -> id对应的数据

const formatDataTree = (data) => {
  const _data = JSON.parse(JSON.stringify(data))

  return _data.filter(p => {
    const _arr = _data.filter(c => c.pid === p.id)
    _arr.length && (p.children = _arr)
    return p.pid === 0
  })
}