JS每日一题：函数式编程中代码组合(compose)如何理解?

Kaede 发布于2019-08-23 16:08 / 620人阅读

摘要：期函数式编程中代码组合如何理解定义顾名思义，在函数式编程中，就是将几个有特点的函数拼凑在一起，让它们结合，产生一个崭新的函数代码理解一个将小写转大写的函数一个在字符后加的函数将两个函数组合起来这里假设我们实现了每日一题每日一题显示结果里上面

20190315期

函数式编程中代码组合(compose)如何理解?

定义: 顾名思义，在函数式编程中，Compose就是将几个有特点的函数拼凑在一起， 让它们结合， 产生一个崭新的函数

代码理解:

// 一个将小写转大写的函数
let toUpperCase = (x) => x.toUpperCase();

// 一个在字符后加！的函数
let exclaim = (x) => x + "!";

// 将两个函数组合起来, 这里假设我们实现了compose
let shout = compose(toUpperCase,exclaim);

shout("js每日一题") // JS每日一题 !, 显示结果里上面两个函数的特点都应用上了

pointfree

代码组合中有一个重要的概念pointfree（永远不要说出你的数据）, 它的意思是指函数无须提及将要操作的数据是什么样的

有点晦涩，我们还是上代码理解一下

// 我们有一个将字符转换成大写并且将其空格转换为"-"的函数
// 细节的同学应该发现这个函数暴露了一个word形参
// 根据pointfree定义，此函数非pointfree模式
let snakeCase = (word) => word.toUpperCase().replace(/s+/ig,"-");

// 下面这个函数与上面的功能一致，但我们可以观察到其没有数据暴露,所以其为pointfree模式
let snakeCase = compose(replace(/s+/ig,"-"),toUpperCase)

说了这么多，他能干什么呢 ? 它能够帮助我们减少不必要的命名，让代码保持简洁和通用

compose实现

上面我们都是假设已经存在compose方法, 接下来我们来为其实现

首先分析其特性

两个函数都有一个共同的参数

函数的执行顺序从右至左

前面函数执行的结果交由后面的函数处理

根据上面的示例及我们分析的特性来实现一个最简版的

// 这样子其实就能满足我们上面示例的要求了
const compose = function(f, g) {
  return function(x) {
    return f(g(x));
  };
};

结束了吗? 并没有,我们可以看到上面的compose示例都只是传入了两个函数，因为我们的简版compose实现也只支持两个函数，那么如果我们想要支持一条很长很长的管道的时候，显然上面的compose就不够用了, 接着我们来看优秀的开源库redux的compose实现

// 摘自 https://github.com/reactjs/redux/blob/master/src/compose.js
export default function compose(...funcs) {
  // 没有传入函数运行直接返回参数
  if (funcs.length === 0) {
    return arg => arg
  }
  // 只传入一个函数，就返回其本身
  if (funcs.length === 1) {
    return funcs[0]
  }
  
  // 核心代码其实就是一句reduce, reduce特性就是按顺序执行，并且将结果传递给下一次执行, 这里多说一句, reduce顺序执行多个相依赖的promise也很好用
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

总结

将多个单特性的函数组合到一起的函数

多个函数服务一组数据(共同参数)

不必说出数据(pointfree)

函数从右至左顺序执行，结果做为下一个函数的参数

关于JS每日一题

JS每日一题可以看成是一个语音答题社区
每天利用碎片时间采用60秒内的语音形式来完成当天的考题
群主在次日0点推送当天的参考答案

注绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路

点击加入答题

云服务器 idc机房托管 js函数式编程视频函数式编程函数式编程指针函数式编程语言?

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102720.html

JS每日一题：函数式编程中纯函数如何理解?

摘要：期函数式编程中纯函数如何理解概念不依赖执行的上下文，也不影响上下文的变量，输出只由输入决定代码理解一下综上，非纯函数输入依赖外部变量综上，非纯函数输出改变外部变量综上纯函数输出输入不影响外部变量纯函数的好处相信大家发现了，无论是概念还是代码 20190313期函数式编程中纯函数如何理解? 概念: 不依赖执行的上下文，也不影响上下文的变量，输出只由输入决定代码理解一下 // 综上，非...

Zoom 2019-08-23 15:55 评论0 收藏0
浅析Redux源码

摘要：用法源码由在年创建的科技术语。我们除去源码校验函数部分，从最终返回的大的来看。这个返回值无法被识别。洋葱模型我们来看源码源码每个都以作为参数进行注入，返回一个新的链。改变原始组数，是一种副作用。 @(Redux)[|用法|源码] Redux 由Dan Abramov在2015年创建的科技术语。是受2014年Facebook的Flux架构以及函数式编程语言Elm启发。很快，Redux因其...

lifesimple 2019-08-22 17:13 评论0 收藏0
前端知识点(二)

摘要：在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行时。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行内元素line-height方案 flex 弹性布局方案 transform 未知元素宽高解决方案 absolute加mar...

zacklee 2019-08-30 15:55 评论0 收藏0
前端知识点(二)

摘要：在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行时。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行内元素line-height方案 flex 弹性布局方案 transform 未知元素宽高解决方案 absolute加mar...

lbool 2019-08-23 14:52 评论0 收藏0
前端知识点(二)

摘要：在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行时。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行内元素line-height方案 flex 弹性布局方案 transform 未知元素宽高解决方案 absolute加mar...

Alex 2019-08-02 14:09 评论0 收藏0