数组api的练习第一篇之 -- 数组转对象 $$ 对象转数组 - 《Vue 小知识》

需求一.数组转对象
需求二 .对象转数组

在做这个之前,我们先来回忆一下一个知识点 :
如何给一个对象添加新属性????

// 假如我要给obj添加新属性,可以这样来写
// 用[] 就是动态添加
const obj = []
obj['age'] = 18
console.log(obj)  
// 输出的结果是 {age:18}

需求一.数组转对象

const arr = [ {label: ‘小华’, value: 0}, {label: ‘小美’, value: 1} ]

转换成

{0: ‘小华’, 1:’小美’}

方法1: for循环

 const arr = [
        { label: '小华', value: 1 },
        { label: '小美', value: 0 },
      ]
      const list = {}
      for (i = 0; i < arr.length; i++) {
        list[arr[i].value] = arr[i].label
      }
      console.log(list)

输出结果:

方法2: reduce方法

乞丐版:

 const arr = [
        { label: '小华', value: 1 },
        { label: '小美', value: 0 },
      ]
      let list = arr.reduce((acc, obj) => {
        acc[obj.value] = obj.label
        return acc // 这里一定要写返回值
      }, {})  //  注意这里有一个初始值,定义的是空{}
      console.log(list)

精简版:

看不懂版:

    ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1624096921080-d939280d-b0fc-470b-82e0-55f3556be103.png#clientId=u331a1df0-b848-4&from=paste&height=48&id=uddba4cf9&margin=%5Bobject%20Object%5D&name=image.png&originHeight=48&originWidth=674&originalType=binary&ratio=1&size=5275&status=done&style=none&taskId=uc9defce3-0530-4d3c-83c5-9a67485e831&width=674)

说明:

reduce里面一共有四个参数,acc代表累加器,有一个初始值,item代表的每一项<br />   acc[obj.value]意思就是说,看一看acc里面有没有[key]这个属性,如果没有的话,就加进去,在第一次的时候,list是一个空的对象,然后经过reduce,给这个list添加新的属性,这个时候,这个list就变成了{0,'小美'},<br />然后又经过一次acc累加,看看acc里面有没有''小华''这个对象,发现没有,就累加进去了,然后这个时候这个list就变成了{ 0 :'小美', 1 :'小华'}

输出结果:

需求二 .对象转数组

{0: ‘小华’, 1:’小美’}

转换成

const arr = [ {label: ‘小华’, value: 0}, {label: ‘小美’, value: 1} ]

方法1: for循环

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

方法2:

 const obj = { 0: '男', 1: '女' }
      const arr = Object.keys(obj).map(item => {
        return {
          label:obj[item], // obj[item] 打印出来是['0','1']
          value:item
        }
      })
      console.log(arr);

输出结果:

这里拓展一下Object.keys()这个方法:

作用：遍历对象

返回结果：

1.传入对象，返回属性名
2.传入字符串，返回索引
3.构造函数返回空数组或者属性名

代码说明:

    // 1. 定义一个对象
    var obj = { 0:'熊大',1:'熊二',2:'光头强' } 
    // 2. 使用Object.keys()方法
    var keyValue = Object.keys(obj)
    // 3. 打印结果
    console.log(keyValue)  // 得到是：["0","1","2"]

    var arr = [
      { label: '男', value: 1 },
      { label: '女', value: 0 },
    ]
    let list = []
    arr.forEach((item) => {
      list.push(item.label)
    })
    console.log(list)

需求三 : 数组转对象,将某个值转为键

const arr = [{label: ‘男’ , value: 0}, {label: ‘女’, value:1}]

转换成

{0 : ‘男’ , 1: ‘女’}

方法1: forEach

    function fn(arr) {
      let obj = {}
      arr.forEach(item => obj[item.value] = item.name);
      return obj
    }

方法2 : reduce

    function fn(arr) {
      let res = arr.reduce((res, item) => {
        return {
          ...res,
          [item.value]: item.name
        }
      }, {});
      return res
    }

方法3:

    function fn(arr) {
      let res = arr.reduce((res, item) => {
        res[item.value] = item.name
        return res
      }, {});
      return res
    }