数组方法之reducer

133 阅读1分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路

通过练习熟悉reducer的用法

目标:转换格式

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

代码:

       感觉遍历数组的方法差不多都可以做  以下我总结了几种

1. reducer方法

 <script>
        const arr = [{label: '男', value: 0},{label: '女', value: 1}]
        const arr1=[1,2,3]
            function f(arr) {
                // 定义空对象
                let newObj={}
                // 遍历数组 转换格式
                arr.reduce((total,item)=> newObj[item.value]=item.label,0)
                // 返回新对象
                return newObj
            }
            const obj = f(arr) // obj ===> {0: '男', 1:'女'}
            console.log(obj);
  </script>

注意 :reduce的累加器必须有初始值

2.forEach方法

  <script>
        const arr = [{label: '男', value: 0},{label: '女', value: 1}]
        const arr1=[1,2,3]
            function f(arr) {
                // 定义空对象
                let newObj={}
                // 遍历数组 转换格式
                // arr.reduce((total,item)=> newObj[item.value]=item.label,0)
                arr.forEach(item=> newObj[item.value]=item.label)
                // 返回新对象
                return newObj
            }
            const obj = f(arr) // obj ===> {0: '男', 1:'女'}
            console.log(obj);
  </script>

注意点:forEach返回值是undefined 思路都是一样的 还有很多方法 我就演示两种  最后输出结果如下

image.png 上面格式转换 回来

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

总结一下: 
1.定义空数组

2.遍历传入的对象  obj[k]拿到对象的属性值   k拿到对象的属性名

3.其他方法套路也是差不多


image.png