Array.prototype.reduce

前言

reduce方法是JavaScript中一个十分强大的方法，平时的开发中经常使用。本文是对reduce方法的一个系统的学习和总结

MDN介绍

reduce方法是对数组中的每个元素执行一个由您提供的reducer函数（升序执行），将其结果汇总为单个返回值

reducer函数

reducer函数接收4个参数：

Accumulator（acc）累计器
Current Value（cur）当前值
Current Index （idx）当前索引
Source Array （src）源数组您的reducer函数的返回值分配给累加器，该返回值会在数组的每个迭代中被记住，最后成为最终的单个结果值

语法

arr.reduce(callback(accumulator,currentValue[ ,index [, array] ] ) [,initialValue])

参数

callback 执行数组中的每个值（如果没有提供initialValue则第一个值除外）的函数，包含四个参数:
- Accumulator（acc）: 累计器累计回调的返回值，他是上一次调用回调时返回的累加值，或initialValue
- currentValue ：数组中正在处理的当前元素值
- index 可选：数组中正在处理的当前元素的索引。如果提供了initialValue，则起始索引为0，否则索引从1开始
- arraty 可选：调用reduce的数组
initialValue 作为第一个调用callback函数时的第一个参数的值，如果没有提供初始值，则将使用数组的第一个元素。在没有初始值的空数组调用reduce会报错

返回值

函数累计处理的结果

实例

1.数组累加

数组累加是项目中经常遇到的，比如计算商品总价，可以使用reduce来实现

//累加
var sum = [1,2,3,4,5,6,7,8].reduce((pre,cur)=> pre + cur)
//输出：36

//累加，默认一个初始值
var sum = [1,2,3,4,5,6,7,8].reduce((pre,cur)=> pre + cur ， 5)
//输出 41

var sum = [{x:1},{x:2},{x:3}].reduce(pre,cur)=>{
    return pre + cur.x
 }, 0)
 
 // 输出 6

2.将二维数组转化为一维数组

var flatArr  = [[0,1],[2,3],[4,5]]
var arr = flatArr.reduce((pre,cur)=>{
    return pre.concat(cur)
}, [])

3. 计算数组中每个元素出现的次数

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
var countName = names.reduce((pre,cur)=>{
    if(name in pre){
        pre[name] ++ ;
    }else {
        prep[name] = 1
    }    
}, {})

// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

4.按属性对object分类

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

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

var groupdPeople = groupBy(people,"age")
// {
//   20: [
//     { name: 'Max', age: 20 },
//     { name: 'Jane', age: 20 }
//   ],
//   21: [{ name: 'Alice', age: 21 }]
// }

总结

reduce的功能十分强大，例如：数组去重，字符串反转等都可以实现，通过使用reduce更好的简化代码，抽象代码。具体用法可以参照MDN上面对于reduce的解释

数组方法 ---reduce