【干货进阶一】：函数式编程

一：认识函数式编程

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的关系
• 相同的输入始终要得到相同的输出(纯函数)
• 函数式编程用来描述数据(函数)之间的映射

二：函数的相关复习

1.函数是对象

在JavaScript中，函数是对象，简单来说，JavaScript函数可以：

• 存储在变量中
• 作为参数
• 作为返回值

2.高阶函数

如果我们把只能接收原始类型（也叫 值类型 / 基本类型）和一般类型对象（非函数类型）作为参数或者返回值的函数称为普通函数，那么我们就可以把可以接收函数类型对象的函数作为参数或者返回值的函数称之为比普通函数更高阶的高阶函数。高阶函数之高阶也就在于此，“ 普通函数 ”只能把数据作为函数的输入输出，而高阶函数除了可以把数据作为函数的输入输出之外，还可以把处理逻辑（函数）作为函数的输入输出。

原理上也就是因为JavaScript语言拥有头等函数，其函数是一种特殊类型的对象，所以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运行机制，不谈到堆栈的闭包讲解都是扯淡。

对于闭包的灵活运用，个人觉得自己还是有点独到理解的。个人是对应于java中的封装概念来用，在日常开发当中，凡是碰到需要私有和共享变量的时候都会很自然的想到使用闭包解决，具体的代码表现形式通常也就是函数嵌套。

闭包案例：

function makePower (power) {	// 实现对power变量的共享和私有
	return function (x) {
		return Math.pow(x, power)
	}
}
let power2 = makePower(2)
// makePower函数执行完后从调用栈中弹出，但power2指向内部函数，内部函数又指向power变量，这导致了makePower函数在堆中存储变量的对象不能被回收，进而形成了闭包，就是这么简单。
let power3 = makePower(3)

三：函数式编程的基础

1.纯函数

(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。

(2): 纯函数优点

由以上纯函数的特征，我们可以很容易的得出使用纯函数的优点：

• 可缓存
• 易测试
• 利于并行处理

可缓存

相同的输入始终得到相同的输出，意味着可以使用 key = input，value = output 的键值对把输出存储起来。

易测试

纯函数的运行不会读写外部数据，不依赖上下文环境，意味着很容易编写单元测试。

利于并行处理

纯函数的运行不会读写外部数据，意味着多线程运行时（ ES6的Web Worker能为JavaScript创造多线程环境）不会互相干扰，有利于程序的并行处理。

2.函数的柯里化

(1): 什么是函数的柯里化？

函数的柯里化是指当一个函数有多个参数的时候先传递一部分参数调用它（这部分参数以后永远不变），然后返回一个新的函数接收剩余的参数。它并不是一个复杂的东西，其实很好理解，直接看下面的需求实现示例吧。

需要柯里化的函数：

function isBigger6(age) {
	return age >= 6
}

function isBigger18(age) {
  return age >= 18
}

function isBigger30(age) {
  return age >= 30
}
// ...需要定义很多甚至无穷多个相似函数，会造成沟通、开发的效率低下，占用过多js内存等等问题
function isBiggerN(age) {	// N is a number
  return age >= N
}

lodash.curry函数柯里化帮助函数

const lodash = require('lodash');

function isBigger(ref, age) {
  return age >= ref
}

// 随时按需创建
const isBigger6 = lodash.curry(isBigger, 6)
const isBigger18 = lodash.curry(isBigger, 18)
const isBigger30 = lodash.curry(isBigger, 30)
const isBiggerN = lodash.curry(isBigger, 30)

柯里化原理：

// ES5 写法
function isBigger(ref) {
  return function (age) {
    return age >= ref
  }
}
// ES6 写法
const isBigger = ref => (age => age >= ref)

由上示例我们可以这样理解，函数的柯里化其实就是利用闭包的原理对原函数进行参数提取，把一个带有多个参数的函数变成一个由参数拆分然后嵌套的嵌套函数，就像番薯（一层皮）变成了洋葱（多层皮）。

(2): 函数柯里化的作用

配置型函数

如上isBigger系列函数示例，如果一组函数中可以抽取出一些具有配置特征的参数，那么我们就可以通过柯里化来抽取封装一个配置型函数，这样不但提高了函数的复用性和灵活性，还节省了运行空间。

函数组合

通过柯里化，可以多元函数（多个参数的函数）柯里化成一元函数，这样可以与其他函数一起组合起来，实现数据的流水线处理，函数组合概念及其案例会在下述的函数组合中给出。

3.函数的组合

(1): 什么是函数的组合？

如果一个数据要经过多个函数处理才能得到最终值，这个时候可以把中间过程的函数合并成一个函数（符合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：函数不组合实现

const reverseResult = reverse(arr)
const firstResult = first(reverseResult)
const toUpperResult = toUpper(firstResult)
console.log(toUpperResult)	// 分步，繁琐但是每步可console
// or
console.log(toUpper(first(reverse(arr))))	// 嵌套，简洁但不易调试

• 实现需求方式2：函数组合实现（lodash）

const lodash = require('lodash')

let last = lodash.flowRight(toUpper, first, reverse)
console.log(last(arr))

• 实现需求方式3：函数组合实现实现（自定义函数组合工具函数）

function compose (f, g, h) {
	return function (arr) {
		return f(g(h(arr))
	}
}
// 从右到左运行
let last = compose(toUpper, first, reverse)
console.log(last(arr))

调试组合函数

由上可知，我们在对一个数据进行流式处理时把中间过程给屏蔽了，所以我们无法console中间过程。这时如果我们调用组合函数出了问题时，函数组合方式就会不易于调试，所以我们需要封装一个trace函数来插入在中间过程来提供这些信息，实现和使用示例如下：

const trace = function(step) {
	return function(data) {
		console.log(`${step} error, data = ${data}`)
	}
}

const last = compose(toUpper, first, trace('reverse之后'), reverse)

(2): 什么时候使用函数的组合？

适用于对一个数据进行流水线式处理，这时我们只需要关注总的运算结果，而不需要关注中间运算结果时。如输入转换前的数据，经过多个转换函数管道后，输出转换后的数据。

4.函数式编程库

(1): lodash

lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。它提供了很多基本函数以及柯里化函数、组合函数等函数，熟练使用lodash库能实现和简化我们的很多日常JavaScript开发逻辑，并且让我们的JavaScript代码整体提升一个层次。

具体使用此处不做赘述，自行查找翻阅文档即可。

(2): folktale

Folktale是一个JavaScript函数式编程的标准库。具体使用此处也不做赘述，自行查找翻阅文档即可。

四：函子

1.认识、理解函子

(1): 认识函子

• 它是一个数据容器对象：管理一个数据并提供一个对数据进行变形的方法（这个变形关系就是函数）
• 它是一个特殊的数据容器对象：该对象具有map方法，map方法可以运行一个函数对值进行转换处理。

(2): 理解函子

个人认为，函子只是一种封装思想，如果我们把它的封装过程给模拟出来，那么就能很自然的理解函子并且触类旁通了。接下来我们以函子初衷，管理一个数据并提供对数据进行变形的方法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.规范、增强函子

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

(1): 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))

(2): 支持链式调用

• 作用：支持链式调用后，函子就可以用来做容器所管理的那个数据的处理流水线了。
• 实现方式：map方法返回一个新的函子

class Container {
	static of (value) {
		return new Container(value)
	}
	constructor(value){
		this._value = value
	}
	map(fn){
		return Container.of(fn(this._value))
	}
}
// 测试
const container = Container.of(2)
container.map(x => x+2)// => container._value = 4
		 .map(x => x-1)// => container._value = 3

3.管理一般数据的函子

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

(1): MayBe函子

• 优点： MayBe函子可以对外部的空值情况做处理。
• 缺点： 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

(2): Either函子

• 优点1：MayBe函子中，如果map函数参数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 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单子后，就没有了上面说的函子嵌套问题导致的取值困难，可以直接拿到最终值。这里的分析没有上一例嵌套时的复杂，就不多做赘述了，如果看官有问题，欢迎评论区提问交流。