平铺数组转tree的算法,给大家想出来了两种，拿去就能用，大家有更好的方法也多多分享呀！

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

工作中，后端给我们的代码是这样的

可是在工作中我需要的数据是这样的，这个是element.ui中的数据

那么，就有了接下来我们需要转数组的方法，（ps：这个也算是基本操作）现在很多npm包也有类似的工具，不过既然写了这篇文章，当然是要给大家展示一手啦！

递归

function toTree(list, value) {
  const arr = []
  list.forEach((item) => {
    if (item.pid === value) {
      const children = toTree(list, item.id)
      if (children.length > 0) {
        item.children = children
      }
      arr.push(item)
    }
  })

  return arr
}

非递归

function tranListToTreeData (list) {
      // 1. 定义两个中间变量
      const treeList = [],  // 最终要产出的树状数据的数组
        map = {}        // 存储映射关系

      // 2. 建立一个映射关系，并给每个元素补充children属性.
      // 映射关系: 目的是让我们能通过id快速找到对应的元素
      // 补充children：让后边的计算更方便
      list.forEach(item => {
        if (!item.children) {
          item.children = []
        }
        map[item.id] = item
      })

      // 3. 循环
      list.forEach(item => {
        // 对于每一个元素来说，先找它的上级
        //    如果能找到，说明它有上级，则要把它添加到上级的children中去
        //    如果找不到，说明它没有上级，直接添加到 treeList
        const parent = map[item.pid]
        // 如果存在则表示item不是最顶层的数据
        if (parent) {
          parent.children.push(item)
        } else {
          // 如果不存在 则是顶层数据
          treeList.push(item)
        }
      })
      // 4. 返回出去
      return treeList
    }

    const treeList = tranListToTreeData(arr)
    console.log(treeList)

想比之下，我更喜欢第二种，如果不考虑性能的情况小可以选择第一种，代码简单