扁平数据与树结构的相互转换

扁平数据转树结构的方法

思路：

1.对源数据先进行深拷贝，以免后续操作影响原数据

2.循环所有项，当遇到有数据的id等于其他数据的pid的时候，给当条数据添加children属性，并赋值

3.拿到最顶层pid=0的数据

   var data =
      [{ id: 1, pid: 0, name: '沃尔玛' },
      { id: 2, pid: 0, name: '生鲜区' },
      { id: 3, pid: 1, name: '日用品区' },
      { id: 4, pid: 2, name: '鱼' },
      { id: 5, pid: 2, name: '牛肉' },
      { id: 6, pid: 3, name: '卫生纸' },
      { id: 7, pid: 3, name: '牙刷' },
      { id: 8, pid: 7, name: '电动牙刷' },
      { id: 9, pid: 7, name: '普通牙刷' }];
      
    function setTreeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source))      // 对源数据深度克隆
      return cloneData.filter(father => {                      // 循环所有项，并添加children属性
        let branchArr = cloneData.filter(child => father.id == child.pid);   // 返回每一项的子级数组
        branchArr.length > 0 ? father.children = branchArr : ''   //给父级添加一个children属性，并赋值
        return father.pid == 0;      //返回第一层
      });
    }
    console.log(setTreeData(data));

树结构转扁平数据的方法

思路：

1.利用解构拿到传过来的树结构的children数据和非children数据

2.将非children数据添加到数组中

3.将children数据通过递归的方法再一次调用

4.这样最终结果返回的就是没有children的扁平数据

   const tree = [
      { id: "1", rank: 1 },
      {
        id: "2", rank: 1,
        children: [
          { id: "2.1", rank: 2 },
          { id: "2.2", rank: 2 }
        ]
      },
      {
        id: "3", rank: 1,
        children: [
          {
            id: "3.1", rank: 2,
            children: [
              {
                id: '3.1.1', rank: 3,
                children: [
                  {
                    id: "3.1.1.1", rank: 4,
                    children: [
                      { id: "3.1.1.1.1", rank: 5 }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
    
    
    function flattenArr(tree, arr = []) {
      tree.forEach((item) => {
        const { children, ...otherProps } = item
        // 添加除了children的属性
        arr.push(otherProps)
        if (children) {
          // 递归将所有节点加入到结果集中
          flattenArr(children, arr)
        }
      })
      return arr
    }