• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

函数式编程FP 【大前端训练营】

互联网 diligentman 1个月前 (10-26) 21次浏览

文章说明:本文是个人学习拉勾大前端高薪训练营的学习笔记和思考总结,学徒之心,分享之意,如若有误,敬请指正。

一:认识函数式编程

1.什么是函数式编程?

(1):函数式编程是一种编程范式

函数式编程(Functional Programming, FP)是编程范式之一,我们常听说的编程范式还有面向过程编程、面向对象编程。我们在分别使用这三种编程范式进行思考和编码时,思维方式和编码结果都会非常的不同,如下案例:

// 1.面向过程(关注点:step1、step2、...、stepN)
let num1 = 2
let num2 = 3
let sum = num1 + num2
console.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函数,从入门到精通。

这里简单来说闭包的本质:函数在执行的时候会放到一个执行栈上,但奇葩的是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)

// checkAge函数柯里化 
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 实用工具库。提供了封装好的柯里化、组合函数等函数,对一个库此处不多BB,自行搜索查看文档

folktale

Folktale是一个JavaScript函数式编程的标准库。提供了封装好的Task函子等函数,对一个库此处不多BB,自行搜索查看文档

四:函子

1.认识函子

认识函子

  • 它是一个容器:包含值和值的变形关系(这个变形关系就是函数)
  • 它是一个特殊的容器:它通过一个普通的对象来实现,该对象具有map方法,map方法可以运行一个函数对值进行处理。

理解函子

根据上述函子的概念,我们通过以下四个步骤来模拟函子的发展史进而逐步实现一个函子。

step1:需要把变形关系作为参数

在使用函数式编程时,碰到这么一种场景,我们对一个数据会有很多种变形关系,想到要想把这个变形关系作为一个可控制的动态输入项,我们可能会写出这样的代码:

function container( fn ){
   
   
	const value = 'xx';
	return fn(value);
}

step2:抽取value
 function Container( value ){
   
    
	 return function (fn) {
   
   
	 	return fn(value)
	 }
 }

step3:能够读取当前值

加上一个getVlaue函数来获取闭包的值。

 function Container( value ){
   
    
 	const getValue = () => {
   
   
		return value
	}
 	const map = (fn) => {
   
   
		return fn(value)
	}
	return {
   
   
		getValue,
		map
	}
 }

是不是恍然大悟,这就是函子的灵魂。Container的实例,它是一个特殊的容器对象,能够读取值(getValue),能够变形(map)。

step4:使用class封装

既然上面都是对一个数据有不同的行为,那么完全可以使用面向对象思维并使用class封装。

class Container {
   
   
	constructor(value){
   
   
		this._value = value
	}
	map(fn){
   
   
		this._value = fn(_value)
	}
}

这不就来了吗,所谓的函子,难吗?不难!

规范化和增强函子

为了更符合规范,更好的使用,接下来对上面这个函子进行规范化和增强:

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

2.管理一般数据的函子

函子既然是一个容器,最基本的功能就是管理一个一般数据(原始类型 / 非函数类型对象)了,上面的示例也是一个管理一般数据的函子,下面再说说管理一般数据时,两种对普通函子增强的函子。

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

3.管理函数对象的函子

函子作为一个容器可以管理一般数据,也可以管理一个函数对象。

这时候很容易会跑偏,我们可能会想到,通过管理一个函数对象我们就可以实现传入函数运行时的切面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处理)。

4.管理函子的函子

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 Monad
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))
	}
	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()

使用Monad单子后,就没有了上面说的函子嵌套问题导致的取值困难,可以直接拿到最终值。这里的分析没有上一例嵌套时的复杂,就不多做赘述了(写累了),如果看官有问题,欢迎评论区提问交流。


喜欢 (0)