JS实现数组与树结构的相互转换

JS实现数组与树结构的相互转换

    let data = [
      { id: 0, parentId: null, name: '生物' },
      { id: 1, parentId: 0, name: '动物' },
      { id: 2, parentId: 0, name: '植物' },
      { id: 3, parentId: 0, name: '微生物' },
      { id: 4, parentId: 1, name: '哺乳动物' },
      { id: 5, parentId: 1, name: '卵生动物' },
      { id: 6, parentId: 2, name: '种子植物' },
      { id: 7, parentId: 2, name: '蕨类植物' },
      { id: 8, parentId: 4, name: '大象' },
      { id: 9, parentId: 4, name: '海豚' },
      { id: 10, parentId: 4, name: '猩猩' },
      { id: 11, parentId: 5, name: '蟒蛇' },
      { id: 12, parentId: 5, name: '麻雀' },
    ]

    function transTree(data) {
      let result = []
      let map = {}
      if (!Array.isArray(data)) {
        //验证data是不是数组类型
        return []
      }
      data.forEach((item) => {
        //建立每个数组元素id和该对象的关系
        map[item.id] = item //这里可以理解为浅拷贝，共享引用
      })
      data.forEach((item) => {
        let parent = map[item.parentId] //找到data中每一项item的爸爸
        if (parent) {
          //说明元素有爸爸，把元素放在爸爸的children下面
          ;(parent.children || (parent.children = [])).push(item)
        } else {
          //说明元素没有爸爸，是根节点，把节点push到最终结果中
          result.push(item) //item是对象的引用
        }
      })
      return result //数组里的对象和data是共享的
    }
    let res = transTree(data)
    console.log(res)

    function transArr(node) {
      let queue = [node]
      let data = [] //返回的数组结构
      while (queue.length !== 0) {
        //当队列为空时就跳出循环
        let item = queue.shift() //取出队列中第一个元素
        data.push({
          id: item.id,
          parentId: item.parentId,
          name: item.name,
        })
        let children = item.children // 取出该节点的孩子
        if (children) {
          for (let i = 0; i < children.length; i++) {
            queue.push(children[i]) //将子节点加入到队列尾部
          }
        }
      }
      return data
    }
    console.log(transArr(res[0]))

重写：

const data = [
  { id: '01', name: '张大大', pid: '', job: '项目经理' },
  { id: '02', name: '小亮', pid: '01', job: '产品leader' },
  { id: '03', name: '小美', pid: '01', job: 'UIleader' },
  { id: '04', name: '老马', pid: '01', job: '技术leader' },
  { id: '05', name: '老王', pid: '01', job: '测试leader' },
  { id: '06', name: '老李', pid: '01', job: '运维leader' },
  { id: '07', name: '小丽', pid: '02', job: '产品经理' },
  { id: '08', name: '大光', pid: '02', job: '产品经理' },
  { id: '09', name: '小高', pid: '03', job: 'UI设计师' },
  { id: '10', name: '小刘', pid: '04', job: '前端工程师' },
  { id: '11', name: '小华', pid: '04', job: '后端工程师' },
  { id: '12', name: '小李', pid: '04', job: '后端工程师' },
  { id: '13', name: '小赵', pid: '05', job: '测试工程师' },
  { id: '14', name: '小强', pid: '05', job: '测试工程师' },
  { id: '15', name: '小涛', pid: '06', job: '运维工程师' },
]

const tree = arrToTree(data)
// console.log(tree)

const arr = treeToArr(tree)
// console.log(arr)

// 数组变树
function arrToTree(data) {
  let res = []
  let map = {}
  data.forEach((item) => {
    map[item.id] = item
  })

  data.forEach((item) => {
    let parent = map[item.pid]
    if (parent) {
      ;(parent.children || (parent.children = [])).push(item)
    } else {
      res.push(item)
    }
  })

  // 输出res
  return res
}

// 树变数组
function treeToArr(data) {
  let arr = []
  for (let item of data) {
    if (item.children) {
      data.push(...item.children)
      delete item.children
    }
    arr.push(item)
  }
  return arr
}