树形结构数据的转化

假如我们拿到的数据格式是这样的：当我们使用element组件库的Tree组件时,我们需要一个树形数据才能进行渲染，但是我们从后端拿到的数据可能不是我们需要的数据格式，此时，我们就需要对拿到的数据进行格式转化。

假如我们拿到的数据格式是这样的：

//数据格式
const arr = [
  { id: '01', name: '张大大', pid: '00', 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: '前端工程师' },
]

很明显，这样的数据格式不是我们想要的，而且这种数据格式是不能直接渲染到树形结构中的，此时我们就需要封装一个函数进行数据格式转换。但是， js复杂类型存储的是内存的指针 ，所以当我们修改数据之后，原数据格式也会改变。

//封装数据格式转换函数
function tranTreeData(sourceData) {
  // 最终转换出的数组,是一个树形结构的数组
  const treeList = []
  // 所有项都使用对象存储起来
  const obj= {}

// 先遍历原数组，以原数组中的每一项的id作为对象的key, 每一项本身作为对象的value形成一个对象结构(obj)
  sourceData.forEach(item => {  
    //如果对象里面无children孩子节点
    if (!item.children) {
      //那对象的孩子节点直接为一个空数组
      item.children = []
    }
    //如果有children节点，将item的id作为obj的属性，obj[item.id]也就是拿到对应id的item对象
    obj[item.id] = item
    //obj[16]= { id: '16', name: '小才   运维工程师', pid: '07', job: '运维工程师' }
    //console.log(obj[item.id])
  })

//遍历原数组，使用数组中的每一项的父节点pid到第一步形成的obj结构去匹配 key(id) 如果匹配上，说明该元素是匹配元素的父元素
//把当前项放入该节点的children属性数组中去，如果没有，则该元素没有孩子
  sourceData.forEach(item => {
    //将pid的值作为item的属性，也就是拿到对应父ID的元素
    const parent = obj[item.pid]
    // console.log(parent)
    // 如果存在，说明该元素有孩子节点
    if (parent) {
      //此时还要判断一下该元素是否还存在孩子元素，如果没有说明该元素是最后一级元素
      if (!parent.children) {
        parent.children = []
      }
      //如果存在，说明该元素还有子元素，并把该元素放入到该元素的子元素数组中
      parent.children.push(item)//第几层
    } else {
      // 如果不存在，则该元素没有子元素
      treeList.push(item)//第一层
    }
  })
  //把当前项直接放到最终产出的treeList中去，并返回出去
  return treeList
}

调用函数进行输出，控制台输出：

 

 还有一种方式实现，不过原理都是一样的，但是这种还有一些BUG，等我后面有时间在解决，先存这里。

function treelistToTree (treeList)  {
  //有孩子节点的分组 
  const result = [];
  //对每个有children的节点按节点id分组
  for (const item of treeList) {
      if (!Reflect.has(result, item.pid)) {
          result[item.pid] = [];
      }
      //将每个孩子加入到对应的父亲节点分组中
      result[item.pid].push(item);
  }
  // 遍历分组中的所有节点，并将有孩子节点的组加入对应的节点中
  for (const key in result) {
      for (const item of result[key]) {
          item.children = result[item.id];
      }
  }
  return result;
}
//因为是引用类型数据，所以我们可以直接打印原数组的第0项
console.log(arr[0]);
console.log(treelistToTree(arr));

控制台打印：