阅读 419

[译]Reduce(软件编写)(第五部分)

Smoke Art Cubes to Smoke — MattysFlicks — (CC BY 2.0) (译注:该图是用 PS 将烟雾处理成方块状后得到的效果,参见 flickr。))

注意:这是 “软件编写” 系列文章的第五部分,该系列主要阐述如何在 JavaScript ES6+ 中从零开始学习函数式编程和组合化软件(compositional software)技术(译注:关于软件可组合性的概念,参见维基百科 Composability)。后续还有更多精彩内容,敬请期待!

<上一篇 | << 返回第一篇

在函数式编程中,reduce(也称为:fold,accumulate)允许你在一个序列上迭代,并应用一个函数来处理预先声明的累积值和当前迭代到的元素。当迭代完成时,将返回这个累积值。许多其他有用的功能都可以通过 reduce 实现。多数时候,reduce 可以说是处理集合(collection)最优雅的方式。

reduce 接受一个 reducer 函数以及一个初始值,最终返回一个累积值。对于 Array.prototype.reduce() 来说, 初始列表将由 this 指明, 所以列表本身不会作为该函数的参数:

array.reduce(
  reducer: (accumulator: Any, current: Any) => Any,
  initialValue: Any
) => accumulator: Any复制代码

我们利用如下方式对一个数组进行求和:

[2, 4, 6].reduce((acc, n) => acc + n, 0); // 12复制代码

对于数组的每步迭代,reducer 函数都会被调用,并且向其传入了累积值和当前迭代到的数组元素。reducer 的职责在于以某种方式将当前迭代的元素 “合拢(fold)” 到累加值中。reducer 规定了 “合拢” 的手段和方式,完成了对当前元素的 “合拢” 后,reducer 将返回新的累加值,然后, .reduce() 将开始处理数组中的下一个元素。reducer 需要一个初始值才能开始工作,所以绝大多数的 .reduce() 实现都需要接收一个初始值作为参数。

在数组元素求和一例中,reducer 函数第一次调用时,acc 将会以 0 值(该值是传入 .reduce() 方法的第二个参数)开始。然后,reducer 返回了 0 + 22 是数组的第一个元素), 也就是返回了 2 作为新的累积值。下一步,acc = 2, n = 4 传入了 reducer,reducer返回了 2 + 46)。在最后一步迭代中,acc = 6, n = 6, reducer 返回了 12。迭代完成,.reduce() 返回了最终的累积值 12

在这一例子中,我们传入了一个匿名函数作为 reducer,但是我们也可以抽象出每次求和的过程为一个具名函数,这使得我们代码的复用程度更高:

const summingReducer = (acc, n) => acc + n;
[2, 4, 6].reduce(summingReducer, 0); // 12复制代码

通常,reduce 的工作过程为由左向右。在 JavaScript 中,我们也有一个 [].reduceRight() (译注:MDN -- Array.prototype.reduceRight())方法来让 reduce 由右向左地工作。 具体说来,如果你对数组 [2, 4, 6] 应用 .reduceRight() ,第一个被迭代到的元素就将是 6,最后一个迭代到的元素就是 2

无所不能的 reduce

别吃惊,reduce 确实无所不能,你所熟悉的 map()filter()forEach() 以及其他函数都可借助于 reduce 来创建。

Map:

const map = (fn, arr) => arr.reduce((acc, item, index, arr) => {
  return acc.concat(fn(item, index, arr));
}, []);复制代码

对于 map 来说,我们的累积值就是一个新的数组对象,该数组对象中的每个元素都由原数组对应元素映射得到。累积数组中新的元素由传入 map 的映射函数(fn)所确定:对于当前迭代到的元素 item,我们通过 fn 计算出新的元素,并将其拼接入累加数组 acc 中。

Filter:

const filter = (fn, arr) => arr.reduce((newArr, item) => {
  return fn(item) ? newArr.concat([item]) : newArr;
}, []);复制代码

filter 的工作方式与 map 类似,只不过原数组的元素只有通过一个真值检测函数(predicate function)才能被送入新的累积数组中。亦即,相较于 map,filter 是有条件地选择元素到累积数组中,并且不会改变元素的值。

上面几个例子,你处理的数据都是一些数值序列,你在数值序列上应用指定的函数迭代数据,并将结果合拢到累积值中。大多数应用都因此开始雏形初备,但是你想过这个问题:假如你的序列是函数序列呢?

Compose:

reduce 也是实现函数组合的便捷渠道。假如你想用将函数 g 的输出作为函数 f 的输入,即组合这两个函数: f . g,那么你可以使用下面的 JavaScript 代码片,它没有任何的抽象:

f(g(x))复制代码

reduce 让我们能抽象出函数组合过程,从而让你也能轻易地实现更多层次的函数组合:

f(g(h(x)))复制代码

为了使函数组合是由右向左的,我们就要使用上面提到的 .reduceRight() 方法来抽象函数组合过程:

const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);复制代码

注意:如果 JavaScript 的版本没有提供 [].reduceRight(),你可以借助于 reduce 实现该方法。该实现留给读者自己思考。

Pipe:

compose() 很好地描述了由内至外的组合过程,某种程度上,这是数学上的关于输入输出的组合。如果你想从事件发生顺序上来思考函数组合呢?

假设我们想要对一个数值加 1,然后对新得到的数值进行翻倍。如果是利用 compose(),就需要这么做:

const add1 = n => n + 1;
const double = n => n * 2;

const add1ThenDouble = compose(
  double,
  add1
);

add1ThenDouble(2); // 6
// ((2 + 1 = 3) * 2 = 6)复制代码

发现问题没有?第一步(加1操作)是 compose 序列上的最后一个元素,所以,compose 需要你自底向上地分析流程的执行。

我们使用 reduce 由左向右的常用特性取代由右向左的组合方式,以示区别,我们用 pipe 来描述新的组合方式:

const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);复制代码

现在,新的流程就可以这么撰写:

const add1ThenDouble = pipe(
  add1,
  double
);

add1ThenDouble(2); // 6
// ((2 + 1 = 3) * 2 = 6)复制代码

如你所见,在组合中,顺序是非常重要的,如果你调换了 doubleadd1 的顺序,你将得到截然不同的结果:

const doubleThenAdd1 = pipe(
  double,
  add1
);

doubleThenAdd1(2); // 5复制代码

之后,我们还会讨论跟多的关于 compose()pipe() 的细节。现在,你所要知道的只是,reduce() 是一个极为强大的工具,因此一定要掌握它。 如果在学习过程中遇到了挫折,也大可不必灰心,很多开发者都花了大量时间才能掌握 reduce。

Redux 中的 reduce

你可能听说过 “reducer” 这个术语被用于描述 Redux 的状态更新。这篇文章撰写之时,对于使用了 React 或者 Angular 进行构建的 web 应用来说,Redux 是最流行的状态管理库/架构(Angualar 中的类 Redux 管理是 ngrx/store )。

Redux 使用了 reducer 函数来管理应用状态。一个 Redux 风格的 reducer 接收一个当前应用状态 state 和 和交互对象 action 作为参数(译注:当前状态就相当于累积值,而 action 就相当于目前处理的元素),处理完成后,返回一个新的应用状态:

reducer(state: Any, action: { type: String, payload: Any}) => newState: Any复制代码

Redux 的一些 reducer 规则需要你牢记在心:

  1. 一个 reducer 如果进行了无参调用,它要返回它的初始状态。
  2. 如果 reducer 操纵的 action 没有声明类型,他要返回当前状态。
  3. 最最重要的是,Redux reducer 必须是纯函数。

现在,我们以 Redux 风格重写上面的求和 reducer,该 reducer 的行为将由 action 类型决定:

const ADD_VALUE = 'ADD_VALUE';

const summingReducer = (state = 0, action = {}) => {
  const { type, payload } = action;

  switch (type) {
    case ADD_VALUE:
      return state + payload.value;
    default: return state;
  }
};复制代码

关于 Redux 的一个非常美妙的事儿就是,其 reducer 都是标准的 reducer (译注:即接收 accumulatorcurrent 两个参数的 reducer ),这意味着你将 Redux 中的 reducer 插入到任何现有的 reduce() 实现中去,比如最常用的 [].reduce()。以此为例,我们可以创建一个 action 对象的数组,并对其进行 reduce 操作,传入 reduce() 的将是我们定义好的 summingReducer,据此,我们获得一个状态快照。之后,一旦对 Redux 中的状态树(store)分派了同样的 action 序列,那么一定能俘获到相同的状态快照:

const actions = [
  { type: 'ADD_VALUE', payload: { value: 1 } },
  { type: 'ADD_VALUE', payload: { value: 1 } },
  { type: 'ADD_VALUE', payload: { value: 1 } },
];

actions.reduce(summingReducer, 0); // 3复制代码

这使得对 Redux 风格的 reducer 的单元测试变得极为容易。

总结

现在,你应该可以瞥见 reduce 的强大甚至是无所不能了。虽然,理解 reduce 要比理解 map 或者 filter 难一些,还是函数式编程中重要的工具,这个工具强大在它是一个基础工具,能够通过它构建出更多更强大的工具。

下一篇: Functors 与 Categories >

接下来

想学习更多 JavaScript 函数式编程吗?

跟着 Eric Elliott 学 Javacript,机不可失时不再来!

Eric Elliott“编写 JavaScript 应用” (O’Reilly) 以及 “跟着 Eric Elliott 学 Javascript” 两书的作者。他为许多公司和组织作过贡献,例如 Adobe SystemsZumba FitnessThe Wall Street JournalESPNBBC 等 , 也是很多机构的顶级艺术家,包括但不限于 UsherFrank Ocean 以及 Metallica

大多数时间,他都在 San Francisco Bay Area,同这世上最美丽的女子在一起。


掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 AndroidiOSReact前端后端产品设计 等领域,想要查看更多优质译文请持续关注 掘金翻译计划

关注下面的标签,发现更多相似文章
评论