扁平数组与树形结构数组相互转换

最新推荐文章于 2024-05-17 13:52:13 发布

北梦啊

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量171

点赞数

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

本文链接：https://blog.csdn.net/weixin_43628055/article/details/133773408

版权

扁平数组转树形结构数组

先定义一个数组

let dataSet = [
  { id: 1, parentId: 0, name: '1' },
  { id: 2, parentId: 0, name: '1' },
  { id: 11, parentId: 1, name: '1-1' },
  { id: 21, parentId: 2, name: '2-1' },
  { id: 211, parentId: 21, name: '2-1-1' },
  { id: 22, parentId: 2, name: '2-2' },
];

转树形结构数组

方法一 forEach

function buildfun1(dataSet, parentId) {
  let arr = [];
  dataSet.forEach((t) => {
    if (t.parentId === parentId) {
      t.children = buildfun1(dataSet, t.id);
      arr.push(t);
    }
  });
  return arr;
}
const tree1 = buildfun1(dataSet, 0);
console.log('tree1', tree1);

方法二 reduce

function buildfun2(dataSet, parentId = 0) {
  return dataSet.reduce((pre, cur) => {
    if (cur.parentId === parentId) {
      cur.children = buildfun2(dataSet, cur.id).sort((a, b) => a.id - b.id);
      pre.push(cur);
    }
    return pre.sort((a, b) => a.id - b.id);
  }, []);
}
const tree2 = buildfun2(dataSet, 0);
console.log('tree2', tree2);

方法三 filter

function buildfun3(dataSet) {
  return dataSet
    .filter((t) => {
      t.children = dataSet
        .filter((c) => {
          return c.parentId === t.id;
        })
        .sort((a, b) => a.id - b.id);
      return t.parentId === 0;
    })
    .sort((a, b) => a.id - b.id);
}
const tree3 = buildfun3(dataSet, 0);
console.log('tree3', tree3);

树形结构数组转扁平数组

定义一个树形结构数组

let treeData = [
  {
    id: 1,
    name: '1',
    parentId: 0,
    children: [
      {
        id: 11,
        name: '1-1',
        parentId: 0,
        children: [],
      },
    ],
  },
  {
    id: 2,
    name: '2',
    parentId: 0,
    children: [
      {
        id: 21,
        name: '2-1',
        parentId: 0,
        children: [
          {
            id: 211,
            name: '2-1-1',
            parentId: 21,
            children: [],
          },
          {
            id: 212,
            name: '2-1-2',
            parentId: 21,
            children: [],
          },
        ],
      },
      {
        id: 22,
        name: '2-2',
        parentId: 0,
        children: [],
      },
    ],
  },
];

转扁平数组

方法一 reduce

function flat(treeData) {
  return treeData.reduce((pre, cur) => {
    return pre.concat({ id: cur.id, parentId: cur.parentId, name: cur.name }, cur?.children ? flat(cur?.children) : []);
  }, []);
}
const flatData1 = flat(treeData);
console.log('flatData1', flatData1);

方法二 forEach

function flat2(treeData, arr = []) {
  treeData.forEach((t) => {
    arr.push({
      id: t.id,
      parentId: t.parentId,
      name: t.name,
    });
    if (t?.children?.length) {
      flat2(t?.children, arr);
    }
  });
  return arr.sort((a, b) => a.parentId - b.parentId);
}

const flatData2 = flat2(treeData);
console.log('flatData2', flatData2);