在说compose函数之前，我们先来看一道题目:
image.png
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")
image.png
嗯，很好，验证通过的，没什么问题！
进一步思考
问题是解决了，但是认真想想一下，这里的题目的需求是不是和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")
image.png
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)))
}
嗯，完美。
网友评论