js处理扁平数组和树结构相互转换

在开发过程中，这种需求是比较多的，前端后端都可以实现，只不过java执行效率会高一点，今天就来实现前端怎么来处理这样的数据

1、扁平数组转树结构

        首先数据长这样，里面的pId和id相等就证明他是他的children

let arr = [
      {
        id: 1,
        name: "1",
      },
      {
        id: 2,
        name: "1-1",
        pId: 1,
      },
      {
        id: 3,
        name: "1-1-1",
        pId: 2,
      },
      {
        id: 4,
        name: "1-1-2",
        pId: 2,
      },
      {
        id: 5,
        name: "2",
      },
    ];

        处理函数

function toTree(arr) {
      //先检测是不是数组类型
      if (!Array.isArray(arr)) {
        return [];
      }
      // JS的对象就是hash表
      const obj = {};
      arr.forEach((item) => {
        obj[item.id] = item;
      });
      const targetArr = [];
      arr.forEach((item) => {
        const parent = obj[item.pId];//有pId就说明他有父亲，找到他的父亲parent
        if (parent) {  //如果他有父亲，就给他添加children属性
          parent.children = parent.children || [];
          parent.children.push(item);
        } else {  //他没有父亲，就把当前项push进去（顶层）
          targetArr.push(item);
        }
      });
      return targetArr;
    }

2、树结构扁平化

        首先数据长这样

let arr = [
      {
        id: 1,
        name: "1",
        children: [
          {
            id: 2,
            name: "1-1",
            pId: 1,
            children: [
              {
                id: 3,
                name: "1-1-1",
                pId: 2,
              },
              {
                id: 4,
                name: "1-1-2",
                pId: 2,
              },
            ],
          },
        ],
      },
      {
        id: 5,
        name: "2",
      },
    ];

        处理函数

function treeToArray(tree) {
      let res = [];
      for (const item of tree) {
        const { children, ...i } = item;
        if (children && children.length) {
          res = res.concat(treeToArray(children));
        }
        res.push(i);
      }
      return res;
    }