树形结构数据的转换

树形结构数据的转换

项目中经常会用到element组件库中的树形组件<el-tree>，它支持两种数据结构，一种是简单数据结构，通过id和parentId来表示层级关系，另一种是嵌套数据结构，将子级放在父级的children属性中。那么这两种数据结构之间如何转换的？

简单数据结构转嵌套数据结构

let simpleData = [
  {
    id: 1,
    parentId: '',
    label: '浙江省',
    value: 'zhejiang',
  },
  {
    id: 2,
    parentId: 1,
    label: '杭州市',
    value: 'zhejiang',
  },
  {
    id: 3,
    parentId: 1,
    label: '宁波市',
    value: 'zhejiang',
  },
  {
    id: 4,
    parentId: 1,
    label: '绍兴市',
    value: 'zhejiang',
  },
  {
    id: 5,
    parentId: 2,
    label: '滨江区',
    value: 'binjiang',
  },
  {
    id: 6,
    parentId: 2,
    label: '江干区',
    value: 'jianggan',
  },
  {
    id: 7,
    parentId: 3,
    label: '余姚市',
    value: 'yuyao',
  },
]

function simpleToNest(data, parentId){
  let result = []
  data.map(item => {
    if(item.parentId === parentId){
      let children = simpleToNest(data, item.id)
      if(children && children.length){
        item.children = children
      }
      result.push(item)
    }
  })
  return result
}

嵌套数据结构转简单数据结构

let nestData = {
  label: '浙江省',
  value: 'zhejiang',
  children: [
    {
      label: '杭州市',
      value: 'hangzhou',
      children: [
        {
          label: '滨江区',
          value: 'binjiang'
        },
        {
          label: '江干区',
          value: 'jianggan'
        }
      ]
    },
    {
      label: '宁波市',
      value: 'ningbo',
      children: [
        {
          label: '余姚市',
          value: 'yuyao'
        }
      ]
    },
    {
      label: '绍兴市',
      value: 'shaoxing'
    }
  ]
}

// 采用深度优先遍历算法实现
function nestToSimple(data) {
  let result = []
  result.push(data)
  if(data.children && data.children.length){
    data.children.map(item => {
      result = result.concat(nestToSimple(item))
    })
    // 如需保留children属性，则注释下面代码
    delete data.children
  }
  return result
}

参考文献：

[1] js之递归拼树（树结构的数据结构）
[2] js实现无限层级树形数据结构（创新算法）