平铺的数组数据转化为树状结构

平铺的数组数据转化为树状结构

在做关于有树状构架的时候,我们需要将平铺的数组转化为树状结构,下面我会介绍一种简便的方式,有详细的注释,供大家参考!

传入数组结构为:{“id”:"",“pid”:"",“name”:""}

代码如下（示例）：

/**
 * 将平铺的数据结构转换为树状结构
 */
  // 最终要产出的数组(树状数据)
  const treeList = []
  // 所有项都使用对象存储起来
  const map = {}
  // 建立映射关系:通过id快速找到对应的元素
  // map:
  // {
  //   "3129":{{"id":"","pid":"","name":""},chidren:[]}
  // }
  list.forEach(item => {
    if (!item.children) { // 补上children
      item.children = []
    }
    map[item.id] = item
  })
  list.forEach(item => {
    // 对于每个元素来说,先找他的上级,能找到,有上级,如果有,即将此数据方法上级的chidren中
    // 如果找不到,则没有上级,为单独存在的,即添加到treeList
    const parent = map[item.pid]
    // 如果存在则表示item不是最顶层的数据,代表其有上级
    if (parent) { // 如果有上级
      if (!parent.children) {
        parent.children = []
      }
      parent.children.push(item) // 将其添加到上级的children中
    } else {
      // 如果不存在 则是顶层数据
      treeList.push(item) // 没有上级的话添加到treeList中
    }
  })
  // 将判断后的树状数组返回出去
  return treeList
}
console.log(treeList)

此方法运用了两层循环。

---

总结

提示：本文只是提供正确思路,仅仅供给将方法传递,谢谢.