菜单数据结构转换(扁平化数据和树形结构互转)

3,602 阅读1分钟

数据格式如下:

const treeData = [
  {
    id: 1,
    title: "课程1",
    children: [
      { id: 4, title: "课程1-1" },
      {
        id: 5,
        title: "课程1-2",
        children: [
          { id: 6, title: "课程1-2-1" },
          { id: 7, title: "课程1-2-2" },
        ],
      },
    ],
  },
  { id: 2, title: "课程2" },
  { id: 3, title: "课程3" },
];
const flatData = [
  { id: 1, parent: 0, title: "课程1" },
  { id: 4,parent: 1, title: "课程1-1" },
  { id: 5,parent: 1, title: "课程1-2" },
  { id: 6,parent: 5, title: "课程1-2-1" },
  { id: 7,parent: 5, title: "课程1-2-2" },
  { id: 2,parent: 0, title: "课程2" },
  { id: 3,parent: 0, title: "课程3" },
]

1.树形结构转扁平化

function TreeToFlat(data) { 
  let formatData = []
  for (var i = 0; i < data.length; i++) {
    formatData.push({
      id: data[i].id,
      title: data[i].title,
    })
    if (data[i].children) {
      formatData = formatData.concat(TreeToFlat(data[i].children));
    }
  }
  return formatData;
}
console.log(TreeToFlat(treeData),'输出为扁平化结构')

2.扁平化数据转为树形结构

function FlatToTree(arr) {
  const map = arr.reduce((acc, val) => {
    acc[val.id] = val
    return acc
  }, {})
  const tree = []
  arr.forEach(region => {
    if (region.parent) {
      const parent = map[region.parent]
      if (!parent.children) {
        parent.children = [region]
      }
      else {
        parent.children.push(region)
      }
    }
    else {
      tree.push(region)
    }
  })
  return { tree }
}
console.log(FlatToTree(flatData),'输出为树形结构')