概念
reduce 对数组中每个元素执行一个reducer函数并且返回单个值
reducer接收4个参数
Accumulator (acc) 累加器 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue
Current Value (cur) 当前值 数组中正在处理的元素。
Current Index (idx) 当前索引 数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则从索引1起始。
Source Array (src) 源数组 调用reduce()的数组
语法
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
回调函数第一次执行时取值有两种情况
提供initialValue时， accumulator===initialValue && currentValue===arr[0] && index===0
不提供initialValue时，accumulator===arr[0] && currentValue===arr[1] && index===1
需要注意的场景：
不提供
initialValue且数组为空时， 抛出TypeError不提供
initialValue且数组仅有一个元素或提供initialValue且数组为空时， 直接返回该唯一值
根据是否提供初始值一个非常有趣的实例
var maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x );
var maxCallback2 = ( max, cur ) => Math.max( max, cur );
// reduce() 没有初始值
[ { x: 2 }, { x: 22 }, { x: 42 } ].reduce( maxCallback ); // NaN
[ { x: 2 }, { x: 22 } ].reduce( maxCallback ); // 22
[ { x: 2 } ].reduce( maxCallback ); // { x: 2 }
[ ].reduce( maxCallback ); // TypeError
// map/reduce; 这是更好的方案，即使传入空数组或更大数组也可正常执行
[ { x: 22 }, { x: 42 } ].map( el => el.x )
.reduce( maxCallback2, -Infinity );
基础用法
用作累加
let count = [0, 1, 2, 3, 4, 5].reduce((acc, cur, index, arr) => {
return acc + cur;
})
console.log(count) // 15
解析：来源数组
[0, 1, 2, 3, 4, 5]， 没有提供初始值initialValue，index = 1, 则调用次数为arr.length - 1,reducer每次返回值为acc + cur，即和
注意：假如
reducer中不return而是直接将acc+cur， 那么将会是undefined， 因为acc是reducer的返回值， 所以假如reducer中不返回任何值的话， 那么将不存在该值， 只有当数组为空且提供initialValue时，reducer执行次数为0， 那么将返回initialValue
进阶用法
利用每个元素都必然会进入reducer函数中， 并且可以提供一个初始值initialValue， 所以以此为基础， reduce方法拥有非常多的可能性
处理数组：二维数组转一维数组
let result = [[1, 2, 3], [4, 5, 6]].reduce((acc, cur, index, arr) => {
// 首先确认当前值， acc === [1, 2, 3] && cur ==== [4, 5, 6]
// 那么返回的便是
return acc.concat(cur)
})
console.log(result) // [ 1, 2, 3, 4, 5, 6 ]
处理对象：按属性对Object分类
let result = [{name: 'Alice', age: 20}, {name: 'Max', age: 20}, {name: 'Jane', age: 20},].reduce((acc, cur, index, arr) => {
let key = cur['age'];
if(!arr[key]) {
acc[key] = []
}
acc[key].push(cur)
return acc
}, {})
console.log(result); // { '20': [ { name: 'Max', age: 20 } ], '21': [ { name: 'Jane', age: 21 } ] }
处理函数：顺序执行Promise
/**
* Runs promises from array of functions that can return promises
* in chained manner
*
* @param {array} arr - promise arr
* @return {Object} promise object
*/
function runPromiseInSequence(arr, input) {
return arr.reduce(
(promiseChain, currentFunction) => promiseChain.then(currentFunction),
Promise.resolve(input)
);
}
function sleep(ms) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, ms)
})
}
// promise function 1
function p1(a) {
return new Promise((resolve, reject) => {
setTimeout(() =>{
console.log('p1')
resolve(a * 5);
}, 1200)
});
}
// promise function 2
function p2(a) {
return new Promise((resolve, reject) => {
// resolve(a * 2);
setTimeout(() =>{
console.log('p2')
resolve(a * 2);
}, 1200)
});
}
// function 3 - will be wrapped in a resolved promise by .then()
function f3(a) {
return a * 3;
}
// promise function 4
function p4(a) {
return new Promise((resolve, reject) => {
resolve(a * 4);
});
}
const promiseArr = [p1, p2, f3, p4];
runPromiseInSequence(promiseArr, 10)
.then(console.log); // 1200
处理函数：功能型函数管道
// Building-blocks to use for composition
const double = x => x + x;
const triple = x => 3 * x;
const quadruple = x => 4 * x;
// Function composition enabling pipe functionality
const pipe = (...functions) => input => functions.reduce(
(acc, fn) => fn(acc),
input
);
// Composed functions for multiplication of specific values
const multiply6 = pipe(double, triple);
const multiply9 = pipe(triple, triple);
const multiply16 = pipe(quadruple, quadruple);
const multiply24 = pipe(double, triple, quadruple);
// Usage
multiply6(6); // 36
multiply9(9); // 81
multiply16(16); // 256
multiply24(10); // 240
reduceRight
和reduce类似，不过俩者的执行顺序相反， reduce是从左到右顺序调用reducer， 而reduceRight则是从右到左顺序调用， 有兴趣可以查阅下方资料
资料来源：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight
