ES5版本的compose
看下面一段代码,这段代码被称为组合 compose
const compose = function(f, g) {
return function(x) {
return f(g(x));
};
};
ES6版本的compose
由于函数式编程大行其道,所以现在将会在 JavaScript 代码看到大量的箭头()=>()=>()=>的代码。
ES6 版本 compose
const compose = (f, g) => x => f(g(x));
这段代码定义了一个名为 compose 的函数,它接受两个函数作为参数 f 和 g,并返回一个新的函数。这个返回的函数接受一个参数 x,首先将 x 应用到函数 g 上,然后将 g 的结果应用到函数 f 上。这是函数式编程中的一个常见模式,称为函数组合(Function Composition)。
函数组合允许你将多个函数组合成一个单一的函数,这样可以将复杂的操作分解成更小、更易于管理的部分。这样做的可读性远远高于嵌套一大堆的函数调用。在这个例子中,compose 函数允许你将两个函数 f 和 g 组合成一个新的函数,这个新的函数会先执行 g,然后将 g的结果作为输入传递给 f。
举个例子
假设我们有两个简单的函数:
const addOne = x => x + 1;
const double = x => x * 2;
我们可以使用 compose 函数将它们组合起来:
const compose = (f, g) => x => f(g(x));
const addOneThenDouble = compose(double, addOne);
现在,addOneThenDouble
是一个新的函数,当你传递一个值给它时,它会首先将这个值加一,然后将结果翻倍。例如:
console.log(addOneThenDouble(3)); // 输出:8
这里,3 首先被传递给 addOne 函数,得到 4,然后 4 被传递给 double 函数,得到最终结果 8。
升级版 compose
但是我们这个这个compose不够完善,只能处理两个函数参数。redux源码有个很完备的compose函数,我们借鉴一下。
function compose(...funcs){
if (funcs.length === 0){
// 判断有没有传入处理函数,如果没有,直接把参数返回出去
return arg => arg
}
if (funcs.length === 1 ){
// 如果只传入一个处理函数,那么执行传入的第一个函数
return funcs[0]
}
// 如果传入多个执行函数,那么使用reduce函数依次执行
return funcs.reduce((a,b)=>(...args) => a(b(...args)))
}
有了这个函数,我们可以随意组合无数个函数。现在我们增加需求,组合出一个addOneThenDoubleThenaAdTwo函数,内容是把传入的参数先+1,然后翻倍,最后 +2 输出结果
const addOne = x => x + 1;
const addTwo = x => x + 2;
const double = x => x * 2;
const addOneThenDoubleThenaAdTwo = compose(addTwo,double,addOne);
console.log(addOneThenDouble(3)); // 10