JavaScript——Array.prototype.reduce()

Posted 2021-07-11 奥特曼　

reduce

语法： 数组.reduce(callback(acc, item, idx, arr) ，initialValue)

acc : 累加器初始值 每次拿到上一次调用后的结果

item：每一项的值

idx：每一项的索引

arr：当前元素本身

initialValue: 作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

（1）求数组的和

        let arr = [1,2,3,4]
        const res = arr.reduce(function (sum,num) { return sum+=num},0)

箭头形式

        let arr = [1, 2, 3, 4].reduce((sum, num) => sum += num,0)

sum每次都是拿到上一次累加的返回值  箭头函数可不写return 

（2）求对象数组里的和

        const arr = [{x: 1}, {x:2}, {x:3}]
        const res=  arr.reduce((sum,item)=>sum+=item.x,0)
// 简写  const arr = [{x: 1}, {x:2}, {x:3}].reduce((sum,item)=>sum+=item.x,0)

（3）将二维数组转化为一维

[[0, 1], [2, 3], [4, 5]]  =====》 [0,1,2,3,4,5]

        const arr= [[0, 1], [2, 3], [4, 5]]
        const res = arr.reduce((sum,res)=> sum.concat(res) ,[])
//简写  const arr= [[0, 1], [2, 3], [4, 5]].reduce((sum,res)=> sum.concat(res) ,[])

解题思路：利用数组方法concat 将每一项拼接起来   concat用于合并多个数组 不会影响原数组，返回值为一个新数组

（4）计算数组中每个元素出现的次数

题目 let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
转换 { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

 let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
        const res = names.reduce((obj, key) => {
            if (key in obj) {
                obj[key]++
            } else {
                obj[key] = 1
            }
            return obj
        }, {})
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

简化

        let res = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'].reduce((obj, key) => {
            key in obj ? obj[key]++ : obj[key] = 1
            return obj
        }, {})

解题思路：判断当前项是否在obj存在 如果存在值+1  如果不存在赋值为1

（5）按属性对object分类

var people = [                                 // {          
  { name: 'Alice', age: 21 },              //  20: [                                     
  { name: 'Max', age: 20 },      结果  //  { name: 'Max', age: 20 },                                
  { name: 'Jane', age: 20 }                //   { name: 'Jane', age: 20 }                                
];                                                      //   ],       
                                                        //    21: [{ name: 'Alice', age: 21 }]
                                                        //  }

var people = [{ name: 'Alice', age: 21 }, { name: 'Max', age: 20 },{ name: 'Jane', age: 20 } ];
         const res =  people.reduce((obj,num)=>{   
                let key = num.age
                if(!obj[key]){
                    obj[key]=[]
                }
                obj[key].push(num)
                return obj
            },{})

解题思路 ：拿到想要分配的键，取出来去obj里找，如果没有就赋值一个数组 如果有就往数组里面添加当前项

封装

    function fn(arr,key) {
      return arr.reduce((obj,item)=>{
            let keys = item[key]
            if(!obj[keys]){
               obj[keys]=[]
            }
              obj[keys].push(item)
            return obj
        },{})
      }

（6）需求将数组转换对象，将某个值转为键

题目 ：const arr = [{label: '男', value: 0},{label: '女', value: 1}]

结果 ：const obj = f(arr) // obj ===> {0: '男', 1:'女'}

const res=arr.reduce((obj,item)=>({...obj,[item.value]:item.label}),{})

const res=arr.reduce((obj,item)=>{ 
    obj[item.value]=item.label 
    return obj
},{})

（7）数组去重

 题目    let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd']

        const res = myArray.reduce((arr, item) => {
            if (arr.indexOf(item) === -1) {
                arr.push(item)
            }
            return arr
        },[])