函数式编程(三)

函数组合 纯函数和柯里化很容易写出洋葱代码 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')) 下节再整理下函子,用来处理副作用,异常,异步等

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):