reduce与redux中compose函数-原创手记-慕课网

在说compose函数之前，我们先来看一道题目:

Your task is to write a higher order function for chaining together a list of unary functions. In other words, it should return a function that does a left fold on the given functions.

chained([a,b,c,d])(input)

Should yield the same result as

d(c(b(a(input))))

大致意思就是写个函数能将多个函数进行组合成一个函数，就是一元链式函数

思考

当时我想，要想实现一个这样的函数，肯定是需要有一个遍历的过程，一个函数的执行结果是另一个函数的参数，那这样就需要有个累计的过程，综合以上2点，想到数组中有个reduce函数。这里我们来看看reduce函数：

arr.reduce(callback[, initialValue])

其中 callback是执行数组中每个值的函数，它包含四个参数：

accumulator 累加器累加回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（如下所示）。
currentValue 数组中正在处理的元素。
currentIndex[可选] 数组中正在处理的当前元素的索引。如果提供了initialValue，则索引号为0，否则为索引为1。
array[可选] 调用reduce的数组

initialValue
[可选] 用作第一个调用 callback的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错。

下面的例子求数组成员之和。

[1, 2, 3, 4, 5].reduce(function(x, y){
  console.log(x, y)
  return x + y;
});
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果：15

上面代码中，第一轮执行，x是数组的第一个成员，y是数组的第二个成员。从第二轮开始，x为上一轮的返回值，y为当前数组成员，直到遍历完所有成员，返回最后一轮计算后的x。

利用reduce方法，可以写一个数组求和的sum方法。

Array.prototype.sum = function (){
  return this.reduce(function (pre, next) {
    return pre + next;
  })
};

[3, 4, 5, 6, 10].sum()
// 28

如果要对累积变量指定初值，可以把它放在reduce方法的第二个参数。

[1, 2, 3, 4, 5].reduce(function(x, y){
  return x + y;
}, 10);
// 25

上面代码指定参数x的初值为10，所以数组从10开始累加，最终结果为25。注意，这时y是从数组的第一个成员开始遍历。

第二个参数相当于设定了默认值，处理空数组时尤其有用。

function add(prev, cur) {
  return prev + cur;
}

[].reduce(add)
// TypeError: Reduce of empty array with no initial value
[].reduce(add, 1)
// 1

上面代码中，由于空数组取不到初始值，reduce方法会报错。这时，加上第二个参数，就能保证总是会返回一个值。

解决

在上面我们了解学习reduce之后，我们可以开始来解决这道题了，看代码：

function chained(funcs) {
  return function(input){
    return funcs.reduce(function(input, fn){ return fn(input) }, input);
  }
}

验证一下

function f1(x){ return x*2 }
function f2(x){ return x+2 }
function f3(x){ return Math.pow(x,2) }

function f4(x){ return x.split("").concat().reverse().join("").split(" ")}
function f5(xs){ return xs.concat().reverse() }
function f6(xs){ return xs.join("_") }

Test.assertEquals( chained([f1,f2,f3])(0), 4 )
Test.assertEquals( chained([f1,f2,f3])(2), 36 )
Test.assertEquals( chained([f3,f2,f1])(2), 12 )

Test.assertEquals(chained([f4,f5,f6])("lorem ipsum"), "merol_muspi")

嗯，很好，验证通过的，没什么问题！

进一步思考

问题是解决了，但是认真想想一下，这里的题目的需求是不是和redux中compose函数实现的需求一样呢，嗯，我们来看看compose是怎么实现的。

https://github.com/reactjs/redux/blob/v3.7.2/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)))
}

用es6写的，关于es6的知识，可以看 ECMAScript 6 入门或者es6的十大特性

参考这个compose函数的写法，我们来解一下上面那道题，

function chained(...funcs) {
    if (funcs.length === 0) {
       return arg => arg
    }

    if (funcs.length === 1) {
      return funcs[0]
    }

    return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

验证一下：

function f1(x){ return x*2 }
function f2(x){ return x+2 }
function f3(x){ return Math.pow(x,2) }

function f4(x){ return x.split("").concat().reverse().join("").split(" ")}
function f5(xs){ return xs.concat().reverse() }
function f6(xs){ return xs.join("_") }

Test.assertEquals( chained(f1,f2,f3)(0), 4 )
Test.assertEquals( chained(f1,f2,f3)(2), 36 )
Test.assertEquals( chained(f3,f2,f1)(2), 12 )

Test.assertEquals(chained(f4,f5,f6)("lorem ipsum"), "merol_muspi")

waht? 怎么会只通过一个，原来是顺序反了，题目要求是从右到左累计的，所以这里我们就需要用到reduce函数的兄弟函数reduceRight了，关于两者的区别，reduce是从左到右处理（从第一个成员到最后一个成员），reduceRight则是从右到左（从最后一个成员到第一个成员），其他完全一样。

最终代码：

function chained(...funcs) {
    if (funcs.length === 0) {
       return arg => arg
    }

    if (funcs.length === 1) {
      return funcs[0]
    }

    return funcs.reduceRight((a, b) => (...args) => a(b(...args)))
}

或者

function chained(...funcs) {
    if (funcs.length === 0) {
       return arg => arg
    }

    if (funcs.length === 1) {
      return funcs[0]
    }

    return funcs.reduce((a, b) => (...args) => b(a(...args)))
}

嗯，完美。

参考：
Array.prototype.reduce()

reduce与redux中compose函数原创