樹形結構數據的轉換

樹形結構數據的轉換

項目中經常會用到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實現無限層級樹形數據結構（創新算法）