扁平数据和树状数据之间的转换及拓展（排序）

用xin创造快乐

已于 2022-03-31 14:48:27 修改

阅读量222

点赞数 1

文章标签： javascript 前端开发语言

于 2022-03-16 11:02:56 首次发布

本文链接：https://blog.csdn.net/Hei_ma_feng/article/details/123521214

版权

扁平数据和树状数据之间的转换，利用递归函数来实现很方便哦！

定义一个扁平数据

let arr =[
      {
        id: 1,
        parentId: 0,
        label: '1',
        pxh: 3
      }, {
        id: 2,
        parentId: 0,
        label: '2',
        pxh: 2
      }, {
        id: 3,
        parentId: 0,
        label: '3',
        pxh: 1
      }, {
        id: 11,
        parentId: 1,
        label: '11',
        pxh: 2
      }, {
        id: 12,
        parentId: 1,
        label: '12',
        pxh: 1
      }, {
        id: 13,
        parentId: 1,
        label: '13',
        pxh: 3
      },
      {
        id: 131,
        parentId: 13,
        label: '131',
        pxh: 2
      }, {
        id: 132,
        parentId: 13,
        label: '131',
        pxh: 1
      },
      {
        id: 21,
        parentId: 2,
        label: '21',
        pxh: 2
      }, {
        id: 22,
        parentId: 2,
        label: '22',
        pxh: 1
      }, {
        id: 23,
        parentId: 2,
        label: '23',
        pxh: 3
      },
    ]

扁平数据转树状数据

// 扁平数据转树状数据
    function zhuan(arr, parentId) {
      let arr1 = JSON.parse(JSON.stringify(arr))
      let tree = [];
      arr1.forEach(item => {
        if (item.parentId == parentId) {
          let obj = JSON.parse(JSON.stringify(item));
          obj.children = zhuan(arr1, item.id);
          tree.push(obj)
        }
      });
      return tree
    }

树状数据转扁平数据

// 树状数据转扁平数据
    function zhuan1(arr) {
      let arr1 = JSON.parse(JSON.stringify(arr));
      let arr2 = []
      arr1.forEach(item => {
        arr2.push(item);
        if (item.children && item.children.length > 0) {
          arr2.push(...zhuan1(item.children))
        }
        delete item.children
      })
      return arr2
    }

树状数据排序（包括子集）

// 树状数据排序  arr是树状数据
    function treeSort(arr) {
      let arr1 = JSON.parse(JSON.stringify(arr));
      let arr2 = arr1.sort((a, b) => {
        return a.pxh - b.pxh
      });
      arr2.forEach(item => {
        item.children = treeSort(item.children)
      })
      return arr2
    }