关于数组,和树形结构之间的互相转换

关于数组,对象和树形结构之间的互相转换

数组转对象格式

let obj={}
const arr = [{label: '男', value: 0},{label: '女', value: 1}]
function f(arr) {
   arr.forEach(item => {
      obj[item.value] = item.label
      return
}
 obj = f(arr) // obj ===> {0: '男', 1:'女'}

对象转数组格式

const obj = { 0: '男', 1:'女'}
function f(obj) {
  for (let key in obj) {
      let arr = []
      arr.push({
        value: key,
        label: obj[key]
      })
      console.log(arr)
    }
}
const arr = f(obj) // arr ===>  [{label: '男', value: 0},{label: '女', value: 1}]```

数组转化成树

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 treeData = arrToTree(data)
// treeData就是：
// [{
//   label: '张大大',
//   children: [
//     {
//       label: '小亮',
//       children: [{label: '小丽'}，{label: '大光'}]
//     },
//     {
//       label: '小美',
//       children: [{label: '小高'}]
//     },
//     {
//       label: '老马',
//       children: [{label: '小刘'}，{label: '小华'},{label: '小李'}]
//     },
//     {
//       label: '老王',
//       children: [{label: '小赵'}，{label: '小强'}]
//     },
//     {
//       label: '老李',
//       children: [{label: '小涛'}]
//     }
//   ]
// }]



> 方法一
> 使用递归来查找父级节点，添加元素

// 完成代码
function arrToTree(data) {
  
const treeData = arrToTree(data)
console.log(treeData)

function arrToTree(data) {
  // tree来保存树形数组
  let tree = []

  if (!Array.isArray(data)) {
    return tree
  }

  data.forEach(ele => {
    if (ele.pid === '') return tree.push(nodeObj(ele))
    // 在树形数组上查找ele的父级节点对象
    const obj = getElementById(tree, ele.pid)
    // 如果找到了，添加到这个节点的children属性中
    obj && obj.children.push(nodeObj(ele))
  })

  return tree
}

// 根据扁平数组对象生成树形数组中的节点对象
function nodeObj(obj) {
  return {
    id: obj.id,
    label: obj.name,
    children: [],
    job: obj.job
  }
}

// 通过ID，递归查找树形结构中的元素
function getElementById(arr, id) {
  for (const ele of arr) {
    if (ele.id === id) {
      return ele
    } else if (ele.children.length > 0) {
      const temp = getElementById(ele.children, id)
      if (temp) {
        return temp
      } else {
        continue
      }
    }
  }
}
}

> 方法二 
> 不使用递归，将原数组转换成对象来处理。

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

function arrToTree(data) {
  let tree = []
  if (!Array.isArray(data)) {
    return tree
  }
  // 将数组转换成对象（键值对），将ID作为属性名，原来的数组里的对象作为属性值
  let map = {}
  data.forEach(item => {
    map[item.id] = item
  })
  // 通过对象的属性名（ID）来找到父级节点，将存到map里的对象取出来放到父级节点的childere数组中
  data.forEach(item => {
    let parent = map[item.pid]

    // 修改对象的属性
    delete item.pid
    item['label'] = item.name
    delete item.name

    if (parent) {
      ;(parent.children || (parent.children = [])).push(item)
    } else {
      tree.push(item)
    }
  })
  return tree
}