函数式编程(三)
函数组合
纯函数和柯里化很容易写出洋葱代码 h(g(f(x)))
比如获取数组的最后一个元素再转换成大写字母, .toUpper(.first(_.reverse(array))),别人维护起来,会不停的看这是谁写的并且想过去抽你嘴巴子,写时一时爽,写完你自己找起bug来都头疼。
你写的洋葱圈
既然不想被揍,函数组合可以让我们把细粒度的函数重新组合生成一个新的函数。
管道
下面这张图表示程序中使用函数处理数据的过程,给 fn 函数输入参数 a,返回结果 b。可以想想 a 数据通过一个管道得到了 b 数据。
如果把长长的绿色管道比喻成水管,要是出bug漏水了,检查起来多费劲,所以聪明的我们把它切成一段段的再连接起来不就好了
即当 fn 函数比较复杂的时候,我们可以把函数 fn 拆分成多个小函数,此时多了中间运算过程产生的 m 和n。
下面这张图中可以想象成把 fn 这个管道拆分成了3个管道 f1, f2, f3,数据 a 通过管道 f3 得到结果 m,m再通过管道 f2 得到结果 n,n 通过管道 f1 得到最终结果 b。
// 伪代码
fn = compose(f1, f2, f3) // 用一个compose把他们组合起来形成原来的fn
b = fn(a) // 这个fn继续像原来一样使用
组合
函数组合 (compose):如果一个函数要经过多个函数顺序处理才能得到最终值,这个时候可以把中间过程的函数合并成一个函数
函数就像是数据的管道,函数组合就是把这些管道连接起来,让数据穿过多个管道形成最终结果
函数组合默认是从右到左执行
函数组合都是些一元函数
下面我们先简单的只组合两个函数来表达一下函数组合, 获取数组的最后一项
// 组合函数
function compose (f, g) {
return function (x) {
return f(g(x)) // 洋葱圈是避免不了了,但是我们把它藏起来了
}
}
// 数组翻转函数
function reverse (arr) {
return arr.reverse()
}
// 取数组第一项的函数
function first (arr) {
return arr[0]
}
// 从右到左运行
let last = compose(first, reverse)
last([1, 2, 3, 4]) // => 4
你说我用N种方法去写,都比这个简单,但是你要清楚的是,我们所写的这些辅助函数,可以任意的去组合,任意的去调用,所以函数式编程让函数最大程度的重用
Lodash中的组合函数
既然这么套路通用,lodash当然也提供了组合函数
Lodash 中组合函数 flow() 或者 flowRight(),他们都可以组合多个函数,flow是流动的意思
flow() 是从左到右运行
flowRight() 是从右到左运行,使用的更多一些
// 取出数组最后一项并大写,flowRight使用方法
const _ = require('lodash')
const toUpper = s => s.toUpperCase()
const reverse = arr => arr.reverse()
const first = arr => arr[0]
const f = _.flowRight(toUpper, first, reverse)
console.log(f(['one', 'two', 'three']))
自己实现lodash中的flowRight
// 多函数组合
function flowRight (...fns) {
return function (value) {
return fns.reverse().reduce(function (acc, fn) { // 对reduce不熟的去看一下
return fn(acc)
}, value)
}
}
函数的组合-结合律
函数的组合要满足结合律,这个结合律就是小时候的乘法结合律(1x2)x3 = 1x(2x3)
// 结合律(associativity)
let f = compose(f, g, h)
let associative = compose(compose(f, g), h) == compose(f, compose(g, h))
// true
所以我们上面的代码可以这样写
const _ = require('lodash')
// const toUpper = s => s.toUpperCase()
// const reverse = arr => arr.reverse()
// const first = arr => arr[0]
// 上面这三个方法是我们自己实现纯函数,其实lodash里都有,下面我们就用lodash自带的吧
const f = _.flowRight(toUpper, first, reverse)
console.log(f(['one', 'two', 'three']))
// 下面这三个是一样的
const f = _.flowRight(_.toUpper, _.first, _.reverse) // 这里是不是有看出lodash的好处
const f = _.flowRight(_.flowRight(_.toUpper, _.first), _.reverse)
const f = _.flowRight(_.toUpper, _.flowRight(_.first, _.reverse))
console.log(f(['one', 'two', 'three'])) // => THREE
如何调试组合函数
当我们预期的结果和实际结果不一致时,如何调试组合函数,找bug
用这样一个例子'NEVER GIVE UP' 转化成 'never-give-up'
const _ = require('lodash')
// 为啥下面这三个要柯里化,因为split等都需要两个入参,我们函数组合需要一元函数
const split = _.curry((sep, str) => _.split(str, sep))
const join = _.curry((sep, array) => _.join(array, sep))
const map = _.curry((fn, array) => _.map(array, fn))
const f = _.flowRight(join('-'), map(_.toLower), split(' '))
console.log(f('NEVER GIVE UP'))
// 假设输出不是我们想要的,我们要查问题出在哪里,由于管道是一节一节的,就在每一次输出后打日志。
// 写一个追踪函数,tag是自定义的,标记哪次输出
const trace = _.curry((tag, v) => {
console.log(tag, v)
return v // 需将值返回
})
const f = _.flowRight(join('-'), trace('map 之后'), map(_.toLower), trace('split 之后'), split(' '))
console.log(f('NEVER GIVE UP'))
lodash-fp模块
从上面的例子我们看到_split, _.join,等还需要再柯里化一遍,太麻烦了,那lodash提供了fp模块来解决这个问题
lodash 的 fp 模块提供了实用的对函数式编程友好的方法
提供了不可变 auto-curried iteratee-first data-last 的方法(自动柯里化,函数在先,数据在后)
// 普通lodash 模块,函数使用方法
const _ = require('lodash')
_.map(['a', 'b', 'c'], _.toUpper) // 可以看到数据在先,函数在后,更符合传统思维
// => ['A', 'B', 'C']
// lodash/fp 模块
const fp = require('lodash/fp')
fp.map(fp.toUpper)(['a', 'b', 'c']) // 自动柯里化,函数在先,数据在后
fp.map(fp.toUpper, ['a', 'b', 'c']) // 这样也是可以的,不过没啥意义
fp.split(' ', 'Hello World')
fp.split(' ')('Hello World')
现在我们用fp模块改造下上面NEVER GIVE UP的例子
const fp = require('lodash/fp')
// 普通模块吓的flowRight,join等函数在fp下一样有,所以直接换就可以了
const f = fp.flowRight(fp.join('-'), fp.map(fp.toLower), fp.split(' '))
console.log(f('NEVER GIVE UP')) // => 'never-give-up'
其实学到这里,我也始终在拿普通的传统的链式调用和函数组合式写法在比较,当时接触JQuery的链式调用行云流水的样子依然记得,我们来对比看看
链式调用是以数据为主语:
我
.吃()
.睡()
.学习()
compose是以函数为主语
compose(学习,睡,吃)(我)
相比较而言compose的写法更容易复用函数,数据也保持稳定不会被莫名修改
const ops = compose(...)
ops(data)
看一下这篇很好理解 他俩对比
使用react的同学看到现在是不是也有些熟悉,因为redux的源码都是函数式写的,不懂函数式编程的同学扒那个源码应该很苦吧,总之这种函数式编程思维,也是现在的趋势
我们最后再来一个例子 ,把单词单词中的首字母提取并转换成大写
'hello web world'=>'H-W-W'
const fp = require('lodash/fp')
// const firstLetterToUpper = fp.flowRight(fp.join('. '), fp.map(fp.first), fp.map(fp.toUpper), fp.split(' '))
// 上面这里我们看到 运用了两次map有些重复,可以再次通过flowRight组合函数
const firstLetterToUpper = fp.flowRight(fp.join('. '), fp.map(fp.flowRight(fp.first, fp.toUpper)), fp.split(' '))
console.log(firstLetterToUpper('hello web world'))
下节再整理下函子,用来处理副作用,异常,异步等
发表评论 (审核通过后显示评论):