该系列会有 3 篇文章，分别介绍什么是函数式编程、剖析函数式编程库、以及函数式编程在 React 中的应用，欢迎关注我的 blog
命令式编程和声明式编程拿泡茶这个事例进行区分命令式编程和声明式编程
命令式编程
1.烧开水(为第一人称)
2.拿个茶杯
3.放茶叶
4.冲水
声明式编程
1.给我泡杯茶(为第二人称)
举个 demo
// 命令式编程 const convert = function(arr) { const result = [] for (let i = 0; i < arr.length; i++) { result[i] = arr[i].toLowerCase() } return result } // 声明式编程 const convert = function(arr) { return arr.map(r => r.toLowerCase()) } 什么是函数式编程函数式编程是声明式编程的范式。在函数式编程中数据在由纯函数组成的管道中传递。
函数式编程可以用简单如交换律、结合律、分配律的数学之法来帮我们简化代码的实现。
它具有如下一些特性:
纯粹性: 纯函数不改变除当前作用域以外的值;
// 反面示例 let a = 0 const add = (b) => a = a + b // 两次 add(1) 结果不一致 // 正确示例 const add = (a, b) => a + b数据不可变性: Immutable
// 反面示例 const arr = [1, 2] const arrAdd = (value) => { arr.push(value) return arr } arrAdd(3) // [1, 2, 3] arrAdd(3) // [1, 2, 3, 3] // 正面示例 const arr = [1, 2] const arrAdd = (value) => { return arr.concat(value) } arrAdd(3) // [1, 2, 3] arrAdd(3) // [1, 2, 3]在后记 1 中对数组字符串方法是否对原值有影响作了整理
函数柯里化: 将多个入参的函数转化为一个入参的函数;
const add = a => b => c => a + b + c add(1)(2)(3)偏函数: 将多个入参的函数转化成两部分;
const add = a => (b, c) => a + b + c add(1)(2, 3)可组合: 函数之间能组合使用
const add = (x) => x + x const mult = (x) => x * x const addAndMult = (x) => add(mult(x)) 柯里化(curry)如下是一个加法函数:
var add = (a, b, c) => a + b + c add(1, 2, 3) // 6假如有这样一个 curry 函数, 用其包装 add 函数后返回一个新的函数 curryAdd, 我们可以将参数 a、b 进行分开传递进行调用。
var curryAdd = curry(add) // 以下输出结果都相同 curryAdd(1, 2, 3) // 6 curryAdd(1, 2)(3) // 6 curryAdd(1)(2)(3) // 6 curryAdd(1)(2, 3) // 6 动手实现一个 curry 函数核心思路: 若传进去的参数个数未达到 curryAdd 的个数，则将参数缓存在闭包变量 lists 中:
function curry(fn, ...args) { const length = fn.length let lists = args || [] let listLen return function (..._args) { lists = [...lists, ..._args] listLen = lists.length if (listLen < length) { const that = lists lists = [] return curry(fn, ...that) } else if (listLen === length) { const that = lists lists = [] return fn.apply(this, that) } } } 代码组合(compose)现在有 toUpperCase、reverse、head 三个函数, 分别如下:
var toUpperCase = (str) => str.toUpperCase() var reverse = (arr) => arr.reverse() var head = (arr) => arr[0]接着使用它们实现将数组末位元素大写化输出, 可以这样做:
var reverseHeadUpperCase = (arr) => toUpperCase(head(reverse(arr))) reverseHeadUpperCase(['apple', 'banana', 'peach']) // "PEACH"此时在构建 reverseHeadUpperCase 函数的时候, 必须手动声明传入参数 arr, 是否能提供一个 compose 函数让使用者更加友好的使用呢? 类似如下形式:
var reverseHeadUpperCase = compose(toUpperCase, head, reverse) reverseHeadUpperCase(['apple', 'banana', 'peach']) // "PEACH"此外 compose 函数符合结合律, 我们可以这样子使用:
compose(compose(toUpperCase, head), reverse) compose(toUpperCase, compose(head, reverse))以上两种写法与 compose(toUpperCase, head, reverse) 的效果完全相同, 都是依次从右到左执行传参中的函数。
此外 compose 和 map 一起使用时也有相关的结合律, 以下两种写法效果相等
compose(map(f), map(g)) map(compose(f, g)) 动手实现一个 compose 函数代码精华集中在一行之内, 其为众多开源库(比如 Redux) 所采用。
var compose = (...args) => (initValue) => args.reduceRight((a, c) => c(a), initValue) 范畴论范畴论是数学中的一个分支。可以将范畴理解为一个容器, 把原来对值的操作，现转为对容器的操作。如下图:
学习函数式编程就是学习各种函子的过程。
函数式编程中, 函子(Functor) 是实现了 map 函数的容器, 下文中将函子视为范畴，模型可表示如下:
class Functor { constructor(value) { this.value = value } map(fn) { return new Functor(fn(this.value)) } }但是在函数式编程中, 要避免使用 new 这种面向对象的编程方式, 取而代之对外暴露了一个 of 的接口, 也称为 pointed functor。
Functor.of = value => new Functor(value) Maybe 函子Maybe 函子是为了解决 this.value 为 null 的情形, 用法如下:
Maybe.of(null).map(r => r.toUpperCase()) // null Maybe.of('m').map(r => r.toUpperCase()) // Maybe {value: "M"}