js 数组转换位对象 以及 对象转换位为数组

数组转对象 

       题目： 把数组arr转为 对象

           1:简单的解法  :在函数中定义一个空对象  通过forEach()对数组进行遍历 

               通过 对象[属性]=值 对对象进行赋值   在导出对象

const arr = [{ lable: '男', value: 1 }, { lable: '女', value: 0 }]


function f (arr) {
  const res = {}

  arr.forEach(element => {
    res[element.value] = element.lable
  })
  return res
}

const obj = f(arr)
console.log(obj);

      2: 使用数组的reduce API

const arr = [{ lable: '男', value: 1 }, { lable: '女', value: 0 }]


function f (arr) {
  return arr.reduce((prev, item) => {
  prev[item.value] = item.lable
  return prev
 }, {})
}
const obj = f(arr)
console.log(obj);

      解析: reduce对数据进行循环并计算 返回最终的结果

reduce ((prev,item,index,array)=>{ return  返回的数据 },inital)

prev表示上次循环返回的值  第一次为inital定义的内容(初始值)

item表示数组的每一项

index表示数字的索引

inital表示prev的初始值 不写默认为0

在这个问题中 每一次循环都会把一组键值对传入空对象中  最后形成新对象

把方法2简化

const arr = [{ lable: '男', value: 1 }, { lable: '女', value: 0 }]


const f = arr => return arr.reduce((prev, item) => ({...prev,[item.value] : item.lable})}, {})

const obj = f(arr)
console.log(obj);

对象转为数组

      1:简单方法

const obj = { 0: "女", 1: "男" }

function fun (obj) {

  const arr = []

  for (let i in obj) {
    arr[arr.length] = { lable: obj[i], value: i }
    arr.push({ lable: obj[i], value: i })
  }

  return arr
}
console.log(fun(obj))

      2:高级写法

const obj = { 0: "女", 1: "男" }

const fun = obj => {
  Object.keys(obj).map(item=> ({ lable: item[i], value: item }))
}

 
console.log(fun(obj))

Object.keys()  对象的API  

      把一个对象传入（）中， 返回一个数组 ，数组的每一项由对象的减构成

 map（（elem,index,arr）=>{ return 新数组的每一项  }） 数据的API   重新生成一个新数组

    elem 数组的每一项

    index数据的索引

     arr   数组的本身

问题

有这样一组数据 

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

 问题1. 找出 与 小刘 处于统一领导下的同事 

简单写法

function fun(data, name) {
// 参数为数据 和需要查找人的名字

  const res=[]
  data.forEach(element => {
    if (element.name === name ) {
      data.forEach(item => {
        if (element.pid === item.pid) {
          res.push(item)
        }
      })
    }
  });
  return res
}

console.log(fun(data, "小刘"));

高级的写法

function f(data, name) {
        return data.filter(
          val => val.pid === data.find(item => item.name === name).pid
        )
      }

  filter()    方法会创建一个新的数组  新数组的元素是原数组满足条件的元素

  find()   返回 满足条件的第一个元素的值

 问题2. 找出 小亮 的所有下属  (与问题1基本类似)

function f2(data, name) {
        // 完成代码
        return data.filter(
          val => val.pid === data.find(item => item.name === name).id
        )
      }

转为树结构 

export function tranListToTreeData(list) {
  // 最终要产出的树状数据的数组
  const treeList = []
  // 所有项都使用对象存储起来
  const map = {}

  // 遍历数组 判断每一项中的 children 属性 如果没有就添加一个 默认值为空数组
  list.forEach(item => {
    if (!item.children) {
      item.children = []
    }
    // 把每一项的id 作为键 每一项作为值 存储到一个对象中
    map[item.id] = item
  })

  // 二次遍历 带有children的list数组
  list.forEach(item => {
    // 找到对象中 的对应每一项的pid 与之对应的id为他的上级
    const parent = map[item.pid] // 通过pid查找对象的键(id) 有对应的就是这个值的上级
    // 判断是否有上级
    if (parent) {
      // 有上级 把这个值放入上级的children中
      parent.children.push(item)
    } else {
      // 如果不存在上级 则是顶层数据,直接添加
      treeList.push(item)
    }
  })

  return treeList
}

第一次遍历 做的事 

     为 list 的每一项添加 children 属性

    新建一个对象 对象的 键为 list 每一项的 id 值是list 的每一项 方便下一步判断

第二次遍历

   先找数组 list 每一项的pid 对应 对象中的id 

找到了就是对应id的下级 添加到上级的children属性中

找不到那就是最高级 直接存放到定义的数组中 低级的会存放到他的children中