JS reduce基本使用及高阶函数compose

先介绍下reduce基本用法：

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

这里注意，reduce() 方法接受一个函数作为累加器。

先看两个例子，理解下是否设置初始值的情况：

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);
// 打印结果
// 1 2 1
// 3 3 2
// 6 4 3
// [1, 2, 3, 4] 10

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}, 1)
console.log(arr, sum);
// 打印结果
// 1 1 0
// 2 2 1
// 4 3 2
// 7 4 3
// [1, 2, 3, 4] 11

常见的用法：现在有一个数组，实现累加：

var array1 = [1, 2, 3, 4];
// 这里我们定义一个累加器函数，作为reduce的参数
var reducer = (accumulator, currentValue) => accumulator + currentValue;
console.log("result：", array1.reduce(reducer)); 
// result： 10

上面的用法比较基础，先理解熟悉基本用法，下面我们来看看，在reduce是如何实现compose的：
假如现在有三个方法，f1、f2、f3，这三个函数参数相同，需要得到依次执行这三个函数的结果。

function f1(arg) {
  console.log("f1", arg);
  return arg;
}
function f2(arg) {
  console.log("f2", arg);
  return arg;
}
function f3(arg) {
  console.log("f3", arg);
  return arg;
}
f3(f2(f1('yuan'))); // "yuan"

如果有多个函数呢，是不是需要一直这么“不优雅”的写下去？我们再看看是不是觉得这种情况和上面的累加比较类似？这里的多个函数就类似累加中的数组，让我们尝试用reduce来解决。我们封装一个函数：

function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg;
  }
  if (funcs.length === 1) {
    return funcs[0];
  }
  // args是将参数一层一层传下去
  return funcs.reduce((a, b) => (...args) => {
    return a(b(...args));
  });
}
var dispatch = compose(f1, f2, f3);
dispatch('yuan');

好好理解下这个compose函数，这也是一个比较常见的高阶聚合函数，在redux源码中有应用到。