2
浅聊组合函数_安东尼漫长的技术岁月的技术博客_51CTO博客
source link: https://blog.51cto.com/u_13961087/5358614
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
浅聊组合函数
原创经历过一些列的函数式编程思想的学习总结，一些重要的高阶函数的学习，以及前一段时间关于 RxJS 的学习。
我们再回看一次 —— 组合函数 compose
本瓜越来越觉得，【易读】的代码应该是将声明和调用分开来的。根据不同的流程，用函数组合的方式、也可以说它是管道、或者说是链式调用，将声明的函数组合起来，再等待时机进行调用。
如果没有组合函数 compose，函数调用将会是嵌套的：
const multi10 = function(x) { return x * 10; }
const toStr = function(x) { return `${x}`; }
const compute = function(x){
return toStr(multi10(x))
}
compute(8)
复制代码
const toStr = function(x) { return `${x}`; }
const compute = function(x){
return toStr(multi10(x))
}
compute(8)
复制代码
fn3(fn2(fn1(fn0(x))))，层层嵌套是很容易看错的；
所以，必须尝试将调用层级扁平化！
compose 应运而生，它大概就会是这样：
const compose = function(f,g) {
return function(x) {
return f(g(x))
}
}
复制代码
return function(x) {
return f(g(x))
}
}
复制代码
let compute = compose(toStr, multi10)
compute(8)
复制代码
compute(8)
复制代码
通过使用compose函数我们可以把两个函数组合成一个函数，这让代码从右往左执行，而不是层层计算某个函数的结果作为另一个函数的参数，这样代码也更加直观。
当然，我们不能让 compose 限制于只能处理连续调用两个函数，于是支持任意参数版本的 compose 将是这样的：
function compose(...funs){
return (x) =>funs.reduce((acc, fun) => fun(acc), x)
}
复制代码
return (x) =>funs.reduce((acc, fun) => fun(acc), x)
}
复制代码
通过函数组合，我们可以可以声明式地指定函数间的关系，代码的可读性也大大提高，也方便我们后续对代码进行扩展跟重构；
而且在React里面，当我们的高阶组件变多的时候，一个套着一个就很难看，我们就可以通过类似的方式来让我们的高阶组件层级扁平化；
这就是最最原始的 compose，以及它被提出的原始动机~~
OK，以上便是本篇分享。点赞关注评论，为好文助力👍
我是掘金安东尼 🤠 100 万阅读量人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 陪你一起度过漫长岁月 🌏
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK