扁平数组转树形结构

我们在实际开发中，有些需求是需要将扁平数组转成属性结构的。例如，像是在使用饿了么ui的tree组件时，我们就需要将数组转换成树形结构，在不麻烦后端小伙伴情况下，我们前端程序猿也有办法将扁平数组转换成树形数组。

1、非递归方法

export function toTreeData(arr) {
  // 定义一个空数组存放结果
  const treeArr = []
  // 辅助对象(快速确定上级)
  const map = {}
  // 循环遍历传进来的数组
  arr.forEach(item => {
    // 给每个对象创建一个children
    item.children = []
    map[item.id] = item
  })
  // console.log(map)
  arr.forEach(ele => {
    const pItem = map[ele.pid]
    // 判断是否有上级
    if (pItem) {
      pItem.children.push(ele)
    } else {
      treeArr.push(ele)
    }
  })
  // 返回出结果
  return treeArr
}

2、递归方法

transListDataToTreeData(list, root) {
      const arr = [];
      // 1.遍历
      list.forEach((item) => {
        // 2.首次传入空字符串  判断list的pid是否为空 如果为空就是一级节点
        if (item.pid === root) {
          // 找到之后就要去找item下面有没有子节点  以 item.id 作为 父 id, 接着往下找
          const children = transListDataToTreeData(list, item.id);
          if (children.length > 0) {
            // 如果children的长度大于0,说明找到了子节点
            item.children = children;
          }
          // 将item项, 追加到arr数组中
          arr.push(item);
        }
      });
      return arr;
    }
transListDataToTreeData(arr,'')

区别

递归方法：代码量更少，但是它的转换时间非常长

非递归方法：代码量多，但是运行时间短

在开发中，建议推荐使用非递归方式