函数式编程（三）

函数组合

纯函数和柯里化很容易写出洋葱代码 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'))

下节再整理下函子，用来处理副作用，异常，异步等