最近在写 React 系列文章，其中写到 Redux 的时候（这里），提到了一个叫做 compose 的高阶函数， 它里面用到的就是 Array.prototype.reduce 方法。它的源码如下：
// https://github.com/reduxjs/redux/blob/4.x/src/compose.js
export default function compose(...funcs) {
if (funcs.length === 0) {
return arg => arg
}
if (funcs.length === 1) {
return funcs[0]
}
return funcs.reduce((a, b) => (...args) => a(b(...args)))
}
其实类似的组合函数，很多都是使用到 Array.prototype.reduce 方法。在此之前，平时比较少用到它，就没好好整理过知识点，但最近我认为，这是必须掌握而且用起来的方法。
To be continue...
一、reduce 方法
它是 ES5 提供的一个数组原生的方法，语法如下：
arr.reduce(reducer, [initialValue])
参数
reducer：是执行数组中每个值（如果没有提供
initialValue则第一个值除外）的函数。initialValue（可选）：作为第一次调用
reducer函数时的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用reduce方法将报错。
返回值
函数累计处理的结果
const arr1 = [1, 2, 3, 4]
const arr2 = []
const arr3 = new Array(10)
const reducer = (acc, cur) => {
console.log(`acc: ${acc}, cur: ${cur}`)
return acc + cur
}
// (1) 是否含初始值的区别
const sum1 = arr1.reduce(reducer) // 循环三次（reduce没有初始值，数组第一项被作为 acc 的初始值）
const sum2 = arr1.reduce(reducer, 0) // 循环四次
// (2) 空数组访问 reduce 方法，必须传初始值，否则报错
const sum3 = arr2.reduce(reducer, 0) // 初始值 0 作为返回结果，且不执行 reducer
const sum4 = arr2.reduce(reducer) // 运行报错
// (3) 同理
const sum5 = arr3.reduce(reducer, 0) // 初始值 0 作为返回结果，从未被赋值的元素不执行 reducer
const sum6 = arr3.reduce(reducer) // 运行报错
console.log(sum1, sum2, sum3, sum4, sum5, sum6)
二、reducer 函数
arr.reduce(reducer(accumulator, currentValue, index, array), initialValue)
它有四个参数：
accumulator：累计器回调的返回值。它是上一次调用回调时返回的累计值。若它是第一次执行，它的值就是
initialValue或者数组的第一项（结合上面的理解）。千万不要被它的命名吓到，如果真是这样，就把它当做参数a或b或c看待，因为它只是一个存储之前执行结果的变量而已。currentValue：当前正在遍历的数组元素。
index（可选）：当前正在遍历的数组元素的索引。若提供了
initialValue，则起始索引是0，否则从索引1起始。array（可选）：调用
reduce()的数组
三、MDN 官方描述
reduce 为数组中的每一个元素依次执行 reducer 函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：
accumulator 累计器currentValue 当前值currentIndex 当前索引array 数组
回调函数第一次执行时，accumulator 和 currentValue 的取值有两种情况：
- 如果调用
reduce()时提供了initialValue，accumulator取值为initialValue，currentValue取数组中的第一个值； - 如果没有提供
initialValue，那么accumulator取数组中的第一个值，currentValue取数组中的第二个值。
注意：如果没有提供
initialValue，reduce会从索引1的地方开始执行reducer方法，跳过第一个索引。如果提供initialValue，从索引0开始。
如果数组为空且没有提供 initialValue，会抛出 TypeError 。如果数组仅有一个元素（无论位置如何）并且没有提供 initialValue， 或者有提供 initialValue 但是数组为空，那么此唯一值将被返回并且 reducer 不会被执行。
*这一小节跟上面的是有重复的。
就本节内容，举例说明一下：
// 在 Array 原型上添加一个 delete 方法：用于删除数组某项
Array.prototype.delete = function (item) {
for (let i = 0; i < this.length; i++) {
if (this[i] === item) {
this.splice(i, 1)
return this
}
}
return this
}
const arr1 = new Array(10)
const arr2 = [1, 2, undefined, null]
const arr3 = [1, 2, 3, 4]
const reducer = (acc, cur, index, arr) => {
// 删除 arr3 数组的第二项
if (index === 0 && arr === arr3) arr.delete(2)
return `${acc} - ${cur}`
}
const sum1 = arr1.reduce(reducer, 0) // 返回：0
const sum2 = arr2.reduce(reducer, 0) // 返回：0 - 1 - 2 - undefined - null
const sum3 = arr3.reduce(reducer, 0) // 返回：0 - 1 - 3 - 4
// 结论：
// 1. 空项（未被赋值项）不执行 reducer ，而 undefined、null 会执行 reducer
// 2. 被删除项，不执行 reducer
// PS: 由于我经常被各种方法对 undefined、null、empty（空项）执不执行困扰，所以我就全列举出来了。
四、应用场景
未完待续...
