数组转对象/对象转数组/数组转树

1、数组转对象

const arr = [{label: '男', value: 0},{label: '女', value: 1}]
function f(arr) {
  // 写代码
}
const obj = f(arr) // obj ===> {0: '男', 1:'女'}

解题思路：我们先创建一个空对象，随后对数组中的数据进行遍历，拿到需要的值并且返回给我们创建的对象就好啦。

答案如下：

const arr = [
  { label: '男', value: 0 },
  { label: '女', value: 1 }
]
function f(arr) {
  const obj = {}
  for (let i = 0; i < arr.length; i++) {
    obj[arr[i].value] = arr[i].label
  }
  return obj
}
const obj = f(arr) // obj ===> {0: '男', 1:'女'}
console.log(obj)

2、对象转数组

const obj = { 0: '男', 1:'女'}
function f(obj) {
  // 写代码
}
const arr = f(obj) // arr ===>  [{label: '男', value: 0},{label: '女', value: 1}]

解题思路：跟上一题类似，我们先创建一个空数组，随后对obj中的数据进行遍历，拿到需要的值拼接到数组里并且返回给我们创建的数组就好啦。

答案如下：

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

3、重点来喽，下面这是一道将数组转换成树的考题。

        在我们前端写代码的时候，时常需要用到后端接口返回的数据，而后端接口返回的数据一般是平铺的数组结构，而不会是树形结构，例如下面的平铺数组结构：

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: "运维工程师"}
]

         这样的数据可以直接在table中使用，但是不能直接在tree组件中使用，需要我们做一些转换。我们想要得到的数据结构长这样：

         现在我们开始攻克这道题吧~

解题思路：我们需要额外补充一个函数来做转换。

答案如下：

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: "运维工程师"}
]

// 完成代码
function arrToTree(data) {
 // 创建一个空数组
 let result = []
      if (!Array.isArray(data)) {
        // 首先判断传进来的这个参数是不是一个数组
        return result
        // 如果不是直接结束
      }
      data.forEach(item => {
        // 首次循环遍历每一项 判断每一项里面是否有子节点
        delete item.children;
        // 如果有就是不符合条件就删除
      });
      // 创建一个空对象
      let map = {};
      data.forEach(item => {
        // 然后再次遍历数组中的每一项，让每一项的ID值作为map对象的键
        map[item.id] = item;
      });
      data.forEach(item => {
        // 找到item的上一级
        let parent = map[item.pid];
        if (parent) {
          // 判断当前parent有没有children属性有的话就把item加进去，没有就先初始化再加进去
          (parent.children || (parent.children = [])).push(item);
        } else {
          // 如果他没有父亲就把他加入到我们首次声明的数组里
          result.push(item);
        }
      });
      return result;
}

// 目标：
const treeData = arrToTree(data)

        这就是今天所有的内容啦，下期见朋友们。