2020.3正式进军前端,目标高级前端工程师,经验尚浅,文章内容如若有误,欢迎指正。
一:认识函数式编程
1.什么是函数式编程?
(1):函数式编程是一种编程范式
函数式编程(Functional Programming, FP)是编程范式之一,我们常听说的编程范式还有面向过程编程、面向对象编程。我们在分别使用这三种编程范式进行思考和编码时,思维方式和编码结果都会非常的不同,如下案例:
// 1.面向过程(关注点:step1、step2、...、stepN)let num1 = 2let num2 = 3let sum = num1 + num2console.log(sum)// 2.函数式编程(关注点:输入input、输出output、映射关系f)function add (n1, n2) { return n1 + n2
}let sum = add(2, 3)console.log(sum)// 3.面向对象(关注点:对象object、属性Attribute、行为behavior)class Math {
add (n1, n2) { return n1 + n2
}
}let math = new Math()let sum = math.add(2, 3)console.log(sum)复制代码
(2):函数式编程这种编程范式的思维方式
把现实世界的事物和事物之间的联系抽象到程序世界(对运算过程进行抽象)。
- 程序的本质:根据输入通过某种运算获得相应的输出,程序开发过程中会涉及很多有输入和输出的函数
- x -> f(联系、映射) -> y,y=f(x)
函数式编程中的函数指的不是程序中的函数(方法),而是数学中的函数即映射关系,例如:y= sin(x),x和y的关系
- 相同的输入始终要得到相同的输出(纯函数)
- 函数式编程用来描述数据(函数)之间的映射
二:函数的相关复习
安利一波我的另一篇博客,JavaScript函数,从入门到精通。
1.函数是一等公民
简单来说,在JavaScript中,函数是对象,它可以:
- 存储在变量中
- 作为参数
- 作为返回值
2.高阶函数
如果我们把只能接收原始类型(也叫 值类型 / 基本类型)和一般类型对象(非函数类型)作为参数或者返回值的函数称为普通函数,那么我们就可以把可以接收函数类型对象的函数作为参数或者返回值的函数称之为比普通函数更高阶的高阶函数。高阶函数之高阶也就在于此,“ 普通函数 ”只能把数据作为函数的输入输出,而高阶函数除了可以把数据作为函数的输入输出之外,还可以把处理逻辑(函数)作为函数的输入输出。
原理上也就是因为JavaScript语言拥有头等函数,函数是对象,可以作为变量传递,可以作为参数和返回值。
说明示例
// 高阶函数,fn函数作为参数function filter (array, fn) {let results = []for (let i = 0; i < array.length; i++) {if (fn(array[i])) {
results.push(array[i])
}
}return results
}复制代码
3.闭包
闭包是JavaScript亘古不变的话题,训练营中讲的对,但不够深入,想深入理解闭包的小伙伴推荐可以看看《JavaScript忍者秘籍(第二版)》函数篇章,当然也可以先阅读我在学习完该篇章之后做的学习笔记JavaScript函数,从入门到精通。
这里简单来说闭包的本质:函数在调用结束后即出栈,但如果它存储在堆里的局部变量对象被其它变量直接或间接引用了,就不会被垃圾回收器回收,然后就形成了闭包Closure。如下简单说明案例:
function makePower (power) { return function (x) { return Math.pow(x, power)
}
}let power2 = makePower(2)// makePower函数执行完后从调用栈中弹出,但power2指向内部函数,内部函数又指向power变量,这导致了makePower函数在堆中存储变量的对象不能被回收,进而形成了闭包,就是这么简单。let power3 = makePower(3)复制代码
三:函数式编程的基础
1.纯函数
纯函数概念
概念
相同的输入永远会得到相同的输出,而且没有任何可观察的副作用。
个人理解
- 纯函数是编码时符合数学函数 f( input ) = output 的函数。
- 它的输入可控,只依赖于传递的参数(意味着不能读外部数据)。
- 它的输出可控,纯函数运行结束后,除了返回值外,不会对运行环境产生其它的影响(意味着不能写外部数据)。
- 它的输入输出之间的映射关系可控,相同的输入永远会得到相同的输出(意味着不能使用随机数等,此处留个疑惑 ?)。
纯函数和不纯函数示例
let numbers = [1, 2, 3, 4, 5]
// 数组的slice方法是一个纯函数 numbers.slice(0, 3) // => [1, 2, 3] numbers.slice(0, 3) // => [1, 2, 3] numbers.slice(0, 3) // => [1, 2, 3] // 数组的splice方法是一个不纯的函数 numbers.splice(0, 3) // => [1, 2, 3] numbers.splice(0, 3) // => [4, 5]numbers.splice(0, 3) // => []// 相同的输入,产生了不同的输出,不纯原因具体分析:// 1.输入不可控,读了外部变量numbers。// 2.输出不可控,写了外部变量numbers。复制代码
纯函数优点
由以上纯函数的特征,我们可以很容易的得出使用纯函数的优点:
- 可缓存
- 易测试
- 利于并行处理
相同的输入始终得到相同的输出,意味着可以使用 key = input,value = output 的键值对把输出存储起来。
纯函数的运行不会读写外部数据,不依赖上下文环境,意味着很容易编写单元测试。
并行处理
纯函数的运行不会读写外部数据,意味着多线程运行时( ES6的Web Worker能为JavaScript创造多线程环境)不会互相干扰,有利于程序的并行处理。
2.函数的柯里化
什么是函数的柯里化?
函数的柯里化是指当一个函数有多个参数的时候先传递一部分参数调用它(这部分参数以后永远不变),然后返回一个新的函数接收剩余的参数。它并不是一个复杂的东西,其实很好理解,直接看个示例吧:
// 普通纯函数 function checkAge(min, age) { return age >= min
}
checkAge(18, 24)// lodash.curry函数柯里化const lodash = require('lodash');const checkAgeMin18 = lodash.curry(checkAge, 18)// 函数柯里化原理function checkAge(min) { return function (age) {return age >= min
}
}let checkAge18 = checkAge(18)let checkAge = min => (age => age >= min)// checkAge柯里化,ES6 写法 复制代码
由上示例我们可以这样理解,函数的柯里化其实就是利用闭包的原理对原函数进行参数提取,把一个带有多个参数的函数变成一个由参数拆分然后嵌套的嵌套函数,就像番薯(一层皮)变成了洋葱(很多层皮)。
函数柯里化的作用
(1)可以从具有“ 配置型 ”参数的函数中获取具体配置的函数
由于函数的柯里化可以对参数进行提取,那么我们就可以利用函数的柯里化把一些函数的配置型参数给提取出来,这样新得到的函数由于闭包的原理就可以实现原函数的配置型参数被持久化并且外部不能更改的效果,案例就如上示例中,由checkAge函数获得checkAge18这个函数。。
(2)获取一元函数,以备函数的组合
这里指的一元函数指一个参数的函数。这一条可以算是1的特殊情况,就是把最后一个参数之前的所有参数都视为最后一个参数的配置项,通常使用目的是为了配合函数的组合,把原函数柯里化成一元函数以便对一个数据进行流式处理,案例会在下述的函数组合中给出。
3.函数的组合
什么是函数的组合?
如果一个函数要经过多个函数处理才能得到最终值,这个时候可以把中间过程的函数合并成一个函数(符合Point free模式),这个合并的过程我们就叫做函数的组合,简单说明示例如下:
- 需求:获取数组的最后一个元素再转换成大写字母
- 定义公用的数据和基本函数
const arr = [1, 2, 3, 4];function first (arr) { return arr[0]
}function reverse (arr) { return arr.reverse()
}function toUpper (arr) { return arr.toUpperCase();
}复制代码
- 实现需求方式1:函数不组合实现
console.log(toUpper(first(reverse(arr))))复制代码
- 实现需求方式2:函数组合实现
// 定义组合函数function compose (f, g, h) { return function (arr) { return f(g(h(arr))
}
}// 从右到左运行let last = compose(toUpper, first, reverse)console.log(last(arr))复制代码
调试组合函数
由上可知,我们在对一个数据进行流式处理时把中间过程给屏蔽了,这时如果我们调用组合函数出了问题时,我们就会需要找出问题出在哪一步,所以我们需要封装一个trace函数来提供这些信息,实现和使用示例如下:
// 这也可以视为trace(step, data)函数柯里化后的函数const trace = function(step) { return function(data) { console.log(`${step} error, data = ${data}`)
}
}let last = compose(toUpper, first, trace('reverse之后'), reverse)复制代码
什么时候使用函数的组合?
在我们对某一个数据进行流式处理,只需要关注总的运算结果,而不需要关注中间运算结果时,我们就可以使用函数的组合。
4.函数式编程库
lodash
lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。它提供了很多基本函数以及柯里化函数、组合函数等函数,熟练使用lodash库能实现和简化我们的很多日常JavaScript开发逻辑,并且让我们的JavaScript代码整体提升一个层次。
具体使用此处不做赘述,自行查找翻阅文档即可。
folktale
Folktale是一个JavaScript函数式编程的标准库。具体使用此处不做赘述,自行查找翻阅文档即可。
四:函子
1.认识、理解函子
认识函子
- 它是一个容器:包含值和值的变形关系(这个变形关系就是函数)
- 它是一个特殊的容器:它通过一个普通的对象来实现,该对象具有map方法,map方法可以运行一个函数对值进行处理。
理解函子
个人认为,函子只是一种封装思想,如果我们把它的封装过程给模拟出来,那么就能很自然的理解函子并且触类旁通了。接下来我们通过以下四个步骤来模拟函子的实现。
step1:函数作为参数实现数据的变形
把变形关系作为参数,就可以实现对某个数据的多种变形,代码实现如下:
const value = 'xxx';function map(fn){
fn(value);
}复制代码
step2:闭包实现数据私有化
需要私有化数据,那么就使用闭包,代码实现如下:
function container(){
const value = 'xxx';
return function (fn) {
fn(value)
}
}复制代码
step3:对数据进行访问控制
私有化数据之后,外部就不能对数据进行读写了。我们在外部需要对数据的读操作以及初始化写操作,实现代码如下:
function container( value ){// 作为外部函数参数,实现外部对数据的初始化写操作
const getValue = () => { return value
} const map = (fn) => {
fn(value)
} return {
getValue,// 暴露一个取数据的函数,实现外部对数据的读操作
map
}
}复制代码
step4:使用class实现
按照面向对象的思维,我们把value数据视为对象属性,map函数视为对象方法,使用ES6的class语法实现,就能得到如下代码:
class Container { constructor(value){ this._value = value
} map(fn){ this._value = fn(_value)
}
}复制代码
2.规范、增强函子
为了更符合规范,更好的使用,接下来对上面这个函子进行规范化和增强:
Pointed函子
- Pointed 函子是实现了 of 静态方法的函子。
- of 方法是为了避免使用 new 来创建对象,更深层的含义是 of 方法用来把值放到上下文Context(把值放到容器中,使用 map 来处理值)
class Container { static of (value) { return new Container(value)
} constructor(value){ this._value = value
} map(fn){ this._value = fn(_value)
}
}// 测试const container = Container.of(2)console.log(container.map(x => x+2))console.log(container.map(x => x-1))复制代码
支持链式调用
- 作用:支持链式调用后,函子就可以用来做容器所管理的那个数据的处理流水线了。
- 实现方式:map方法返回一个新的函子
class Container { static of (value) { return new Container(value)
} constructor(value){ this._value = value
} map(fn){ return Container.of(this._value)
}
}// 测试const container = Container.of(2)
container.map(x => x+2)// => container._value = 4
.map(x => x-1)// => container._value = 3复制代码
3.管理一般数据的函子
函子既然是一个容器,最基本的功能就是管理一个一般数据(原始类型 / 非函数类型对象)了,上面的示例也是一个管理一般数据的函子,下面再说说管理一般数据时,两种对普通函子增强的函子。
MayBe函子
- 优点:可以对外部的空值情况做处理。
- 缺点:函子在链式调用时,我们很难确认是哪一步产生的空值问题。
实现示例
class MayBe{ static of (value) { return new MayBe(value)
} constructor(value){ this._value = value
} map(fn){ // 函子管理的数据出现空值时视为异常出现,不再调用传入的变形关系对数据进行变形而是直接把空值传递下去。return this.isNothing() ? MayBe.of(null) : MayBe.of(fn(this._value)) :
}
isNothing () { return this._value === null || this._value === undefined
}
}// 测试const container = MayBe.of(null)
container.map(x => null)// => null
.map(x => x-1)// => null复制代码
Either函子
- 优点1:map(fn)中的fn如果做了异常处理则会显得不纯,交给Either函子之后,fn就可以编写为纯函数。
- 优点2:在链式调用时,Either函子对这条数据处理流水线做统一的异常处理, 同时由于记录了异常信息,可以找到是哪一步出了问题方便调试解决。
class Stop{ static of (value) { return new Stop(value)
} constructor (value) { this._value = value
}
map (fn) { return this
}
}class GoAhead{ static of (value) { return new GoAhead(value)
} constructor (value) { this._value = value
} map(fn) { return GoAhead.of(fn(this._value))
}
}function Either(data){ try{ return GoAhead.of(data)
}catch(e){ return Stop({error: e.message})
}
}const either = Either(2)
either.map(x => x + 2) // either._value = 4
.map(x => x / 0) // either._value = errorObj
.map(x => x - 1) // either._value = errorObj复制代码
4.管理函数对象的函子
函子作为一个容器可以管理一般数据,也可以管理一个函数对象。
这时候很容易会跑偏,我们可能会想到,通过管理一个函数对象我们就可以实现传入函数运行时的切面aop,此时可以对map(fn)中的这个fn函数对象运行前做前处理和或者后处理,比如验证权限,打印日志等。
但是通常实现这类需求,我们使用函子只会是多此一举,因为我们始终要认清一点,封装成函子的初心就是管理一个数据及其变换关系,在这里我们完全没必要对验证权限或者打印日志的函数进行变换,所以使用函子做函数运行aop的思想是错误的。
我们通常不必要对一个函数做变换,之所以会有管理函数对象的函子,是因为有时我们需要调用一个函数才能获取函子管理的数据,所以才产生了这么一个函子,它表面上看起来是管理一个函数对象,实际上管理的是其运行后的值,在惰性执行时,通常会和map函数传进来的函数一起进行函数组合,如下IO函子:
IO函子
const fp = require('lodash/fp')class IO { static of (x) { return new IO(function () { return x
}
)
}constructor (fn) { this._value = fn
}
map (fn) { return new IO(fp.flowRight(fn, this._value)) // flowRight是lodash提供的函数组合方法
}
}let io = IO.of(process)
io.map(p => p.execPath)console.log(io._value())// 实际运行是io._value() -> fp.flowRight(p => p.execPath, process)()复制代码
如上IO函子,管理的就是fp.flowRight(p => p.execPath, process)()这么一个数据流。它能把process这个函数延期执行,而后再把数据传递给p => p.execPath这个箭头函数处理。至于process延迟执行的好处,1是把不纯的操作交给了调用者来处理(?),2是具备了类似延迟加载的好处(毕竟是IO处理)。
5.管理函子的函子
1.嵌套函子
在使用 IO 函子的时候,如果我们写出如下代码:
const fs = require('fs')const fp = require('lodash/fp')let readFile = function (filename) { return new IO(function() { return fs.readFileSync(filename, 'utf-8')
})
}let print = function(x) { return new IO(function() { console.log(x) return x
})
}let cat = fp.flowRight(print, readFile)let r1 = cat('package.json')let r2 = r1._value()let data= r2._value()console.log(data)复制代码
上述代码分析如下:
- let cat = fp.flowRight(print, readFile):函数组合获得cat。
- let r1 = cat('package.json'):组合函数调用,按照从右到左的顺序,print函数调用返回一个管理readFile函数调用返回一个管理同步读取文件内容的这个函数对象的IO函子的IO函子,r1用伪代码表示即:printIO( readFileIO ( readFile('package.json') ) )。
- let r2 = r1._value():获取printIO管理的_value,也就是函数function() {console.log(x)return x},这里使用了闭包,x指readFile传过来的IO函子,调用后返回x获得其管理的IO函子,r2用伪代码表示即:readFileIO ( readFile('package.json') ) 。
- let data= r2._value():获取readFileIO管理的_value,也就是函数function() {return fs.readFileSync(filename, 'utf-8')},调用后获得后得到文件内容。
缺点
2.把嵌套函子拍平 -> 单子Monad
- Monad 函子是可以变扁的 Pointed 函子,IO(IO(x))
- 一个函子如果具有 join 和 of 两个方法并遵守一些定律就是一个 Monad
const fp = require('lodash/fp')// IO Monadclass IO { static of (x) { return new IO(function () { return x
})
} constructor (fn) { this._value = fn
}
map (fn) { return new IO(fp.flowRight(fn, this._value))
}
join () { return this._value()
}
flatMap (fn) { return this.map(fn).join()
}
}let readFile = function (filename) { return new IO(function() { return fs.readFileSync(filename, 'utf-8')
})
}let print = function(x) { return new IO(function() { console.log(x) return x
})
}let r = readFile('package.json')
.map(fp.toUpper)
.flatMap(print)
.join()复制代码