扁平数组转换成tree树形数组

1.数据源

const resData = [
  { id: '1', label: '动物', parentId: '', icon: '' },
  { id: '2', label: '狗', parentId: '1', icon: 'icon-chongwutubiao13' },
  { id: '3', label: '哈士奇', parentId: '2', icon: 'icon-hashiqi' },
  { id: '4', label: '柯基', parentId: '2', icon: 'icon-keji-' },
  { id: '6', label: '猫', parentId: '1', icon: 'icon-chongwutubiao04' },
  { id: '7', label: '植物', parentId: '', icon: '' },
  { id: '8', label: '微生物', parentId: '', icon: '' },
]

2.数据处理

function transformData(data) {
  // 深拷贝一份（以防连续调用出错）
  const cData = JSON.parse(JSON.stringify(data))
  const map = {}
  const tData = []
  // 把数组中的每一项,以id为key，每一项为值，组成一个对象。作用是后面遍历时可以直接拿到父节点item
  cData.forEach(item => (map[item.id] = item))
  // 遍历 组成树形结构的数据
  cData.forEach(child => {
    // 这里可以从map对象里很方便的拿到父级数据
    const mapItem = map[child.parentId]
    if (mapItem) {
      // 如果父级身上没有children属性,则添加一个
      if (!mapItem.children) mapItem.children = []
      mapItem.children.push(child)
    } else {
      // 顶级节点
      tData.push(child)
    }
  })
  return tData
}

// 主要是利用了map对象,不管cData 里面的数据的层级有多深,都可以一次就拿到他的父级。比如这里柯基比猫先遍历，会先把柯基push到猫的children中,当遍历到猫时,又把猫push到动物的children中。因为柯基已经在Mao的数据里，所以自然也随之加入到了动物里。所以次序也不会对结构产生影响