js树结构的偏平化和扁平数据的树结构化

186 阅读1分钟
// 树结构:
    let tree = [
      {
        id: '1',
        pid: '0',
        child: [
          {
            id: '1-1',
            pid: '1',
            child: [
              {
                id: '1-1-1',
                pid: '1-1',
              },
              {
                id: '1-1-2',
                pid: '1-1',
                child: [
                  {
                    id: '1-1-2-1',
                    pid: '1-1-2',
                  }
                ]
              },
            ]
          },
          {
            id: '1-2',
            pid: '1',
          }
        ]
      },
      {
        id: '2',
        pid: '0',
      }
    ]

1、树结构的扁平化:

通过reduce+递归实现

    let treeToFlat = function (data) {
      return data.reduce((arr, item) => {
        let { child, ...res } = item;
        if (child && child.length) {
          return arr.concat(res, treeToFlat(child))
        } else {
          return arr.concat(res)
        }
      }, [])
    }

    let flatData = treeToFlat(tree);
    console.log('扁平后的数据:', flatData)

2、扁平数据变树结构:

通过双重filter实现

   let flatToTree = function (data) {
      return data.filter(item => {
        item.child = data.filter(each => item.id === each.pid)
        return item.pid === '0'
      })
    }
    let treeData = flatToTree(flatData); // 直接取上面扁平后的数据
    console.log('树结构化的数据:', treeData)