JavaScript 深度剖析 - 函数式编程范式

1.1函数式编程概念

• 函数式编程就是对运算过程进行抽象

注意：

1. 函数式编程的函数指不是程序中的函数(方法)，而是数学中的函数即映射关系
2. 相同的输入始终要有相同的输出(纯函数)
3. 函数式编程用来描述数据(函数)之间的映射

// 非函数式
let num1 = 2 
let num2 = 3 
let sum = num1 + num2 
console.log(sum)

这段代码是非函数式的，我们是通过步骤一步一步实现的，所以它是面向过程的编程方式。

如果使用函数式的思想实现这个功能：首先我们要对运算过程进行抽象，我们要计算两个数的和，我们会抽象一个add的函数，且相同的输入要有相同的输出。

// 函数式 
function add (n1, n2) {  
	return n1 + n2 
} 
let sum = add(2, 3) 
console.log(sum)

函数式编程的好处是我们后续可以无数次地重用，而且在函数式编程过程中，我们抽象出来的函数都是细粒度的函数，我们将来可以把这些函数组合成功能更强大的函数。

函数是一等公民

• 函数是一等公民(First-class Function)
  • 函数可以存储在变量中
  • 函数作为参数
  • 函数作为返回值

在 JavaScript 中函数就是一个普通的对象 ，我们可以把函数存储到变量/数组中，它还可以作为另一个函数的参数和返回值，甚至我们可以在程序运行的时候通过 new Function(‘alert(1)’) 来构造一个新的函数。

• 把函数赋值给变量

// 把函数赋值给变量 
let fn = function () {
	console.log('Hello First-class Function') 
} 
fn()

//一个实例
const BlogController = {
	index(posts) {return Views.index(posts)}
}

上面的案例中我们可以看出：index方法和内部调用的方法有相同的形式(它的参数和返回值是一样的)，我们就可以把Views.index赋值给index。
  注意：我们是要把这个函数的方法赋值给另外一个方法，不是把函数的调用赋值给另一个方法，所以要把方法后的调用去掉。

//可以优化为
const BlogController = {
	index : Views.index
}

• 函数是一等公民是我们后面要学习的高阶函数、柯里化等的基础。

高阶函数

• 高阶函数 (Higher-order function)

  • 可以把函数作为参数传递给另一个函数
  • 可以把函数作为另一个函数的返回结果

• 函数作为参数

//通过仿写forEach和filter来理解 函数作为参数
function forEach (array, fn) {  
	for (let i = 0; i < array.length; i++) {    
		fn(array[i])  
	} 
}
// 测试
let arr = [1, 3, 4, 7, 8]

// forEach(arr, function (item) {
//   console.log(item)
// })

function filter (array, fn) {  
	let results = []  
	for (let i = 0; i < array.length; i++) {    
		if (fn(array[i])) {      
			results.push(array[i])    
		}  
	}  
return results 
}
// 测试
let arr = [1, 3, 4, 7, 8]
let r = filter(arr, function (item) {
  return item % 2 === 0
})

console.log(r)

我们上面写了两个函数，如果函数作为参数，它可以让我们变得更灵活，而且我们在调用的时候不用考虑内部是怎么实现的，这个函数把内部实现的细节帮我们屏蔽了，而且我们函数的名字是有实际意义的，比如forEach，通过名字就知道它是要去遍历；而filter，通过它的名字就知道是要去过滤数据。
  函数作为返回值我们会在下节闭包中详细讲解。

使用高阶函数的意义：

1. 抽象可以帮我们屏蔽细节，只需要关注与我们的目标
2. 高阶函数是用来抽象通用的问题

//不需要考虑函数内部实现的细节 
let array = [1, 2, 3, 4] 
// 面向过程的方式 
for (let i = 0; i < array.length; i++) {  
	console.log(array[i]) 
}
// 高阶函数 
forEach(array, item => {
	console.log(item) 
})

闭包

前一小节中我们通过仿写forEach和filter来简单理解了一下函数作为参数下来我们通过几个函数作为返回值的例子来理解下闭包：
  下面的例子：如果我们在一个函数里面又返回了一个函数，并且在我们访问的这个函数的内部又访问了外部函数中的成员，其实这就是闭包。

// 函数作为返回值 
function makeFn () {  
	let msg = 'Hello function'  
	return function () {  //匿名函数  
		console.log(msg)  
	} 
}
// const fn = makeFn() 
// fn()
makeFn()()

• 闭包(Closure)：函数和其周围的状态(词法环境)的引用捆绑在一起形成闭包
  • 可以在另一个作用域中调用一个函数的内部函数
  • 当我们调用内部函数时可以访问到该函数的作用域中的成员

根据上面的描述，其实闭包的核心作用就是把makeFn的作用范围延长了，正常情况下，makeFn执行完成之后，msg会被释放掉，但是如果makeFn中返回了一个成员，并且外部对这个成员有引用，那此时，makeFn内部再执行完成过后就不会被释放，因为外部对内部有引用。

接下来我们来写一个once函数，once我们在jQuery中可能见过，Jquery中的once函数是给一个DOM元素去注册事件，这个事件只会执行一次。在lodash其实也有一个once函数，lodash中的once是对一个函数只执行一次，我们来模拟一下once函数：

//我们通过闭包来实现一个只能执行一次的函数
function once (fn) {// 假设这是一个支付的函数
	let done = false  
	return function () {// 在这里我们不确定传参个数 
		if (!done) {      
			done = true // 已经被执行
			//arguments是具有数组某些特性的'类数组'（伪数组)
			//每个函数都有一个Arguments对象实例arguments
			//它引用着函数的实参，可以用数组下标的方式'[]'引用arguments的元素
			return fn.apply(this, arguments)//通过arguments来取实参
		} 
	}
}
let pay = once(function (money) {  
	console.log(`支付：${money} RMB`) 
})

// 只会支付一次 
pay(5) 
pay(5)

支付：5 RMB

以上是我们once函数的实现，通过once函数返回了一个函数。

• 闭包的本质：函数在执行的时候会放到一个执行栈上当函数执行完毕之后会从执行栈上移除，但是堆上的作用域成员因为被外部引用不能释放，因此内部函数依然可以访问外部函数的成员
• 闭包案例

接下来通过案例来体会闭包。假设在一个项目中，经常会求数字的幂，我们可以通过Math.pow去实现，但假设我们经常去求一个数字的二次方、三次方，我们就经常要去重复写，我们可以简化下：

// 生成计算数字的多少次幂的函数 
function makePower (power) {  //power:幂
	return function (x) { 
		return Math.pow(x, power) 
	} 
}
// 求平方
let power2 = makePower(2)
// 求三次方 
let power3 = makePower(3)

1.2纯函数

概念

• 纯函数：相同的输入永远会得到相同的输出，而且没有任何可观察的副作用
  • 纯函数就类似数学中的函数(用来描述输入和输出之间的关系)，y = f(x)
    
  • 例如：数组方法slice splice
    • slice 不会改变原数组 就是一个纯函数
    • splice 会改变原数组 就是一个不纯的函数

let array = [1, 2, 3, 4, 5]
// 纯函数
console.log(array.slice(0, 3))
console.log(array)
console.log(array.slice(0, 3))      

// 不纯的函数
console.log(array.splice(0, 3))
console.log(array)  
console.log(array.splice(0, 3))
console.log(array)

[ 1, 2, 3 ]
[ 1, 2, 3, 4, 5 ]
[ 1, 2, 3 ]

[ 1, 2, 3 ]
[ 4, 5 ]
[ 4, 5 ]
[]

// 自己写一个求和的纯函数
function getSum (n1, n2) {
  return n1 + n2
}
console.log(getSum(1, 2)) // 3
console.log(getSum(1, 2)) // 3

3
3

• 函数式编程不会保留计算中间的结果，所以变量是不可变的（无状态的）
• 我们可以把一个函数的执行结果交给另一个函数去处理

函数式编程不会保留计算中间的结果,比如上面的getSum函数：我们在调用getSum这个函数的时候，会给它传递一个参数，并且调用这个函数获取到它执行的结果，而函数内部的变量我们的结果是无法去获取到的 ，所以我们可以认为在函数式编程中，它的变量是不可变的，也就是无状态的。
  另外，我们在基于函数式编程的过程中，我们会经常需要一些细粒度的纯函数，我们要自己去写这些细粒度的纯函数的时候要写非常非常多，就不太方便，但我们不用担心这些细粒度怎么来，因为有很多函数式编程的库，比如说lodash。
  当我们有了这些细粒度的函数之后，后面讲到的函数组合中，我们可以把这些细粒度的函数组合成更能更强大的函数，当我们在调用这些函数的过程中，我们就可以把一个函数的执行结果交给另一个函数继续去处理。

功能库lodash

• 安装

首先初始化package.json

 npm init -y
 npm i lodash

当lodash安装好以后定义一个常量把lodash引用进来

const _ = require('lodash')

引用完lodash以后，我们来演示几个数组的方法，所以先来定义一个数组

const array = ['jack', 'tom', 'lucy', 'kate']

我们来尝试下first和last两个方法：

console.log(_.first(array))
console.log(_.last(array))

jack
kate

• lodash是一个纯函数的功能库 提供了 对数组 数字 字符串 函数 等操作的一些方法，例如：
  • first / last / toUpper / reverse / each / includes / find / findIndex…

优劣

纯函数的好处

• 可缓存
  • 因为纯函数对相同的输入始终有相同的结果，所以可以把纯函数第一次的运行结果缓存起来

那我们为什么要对结果进行缓存？
比如说我们有一个函数执行起来特别耗时，我们需要多次去调用，我们每次去调用这个函数的时候都要去等一段时间才能获取到结果，所以说它对性能是有影响的。
  我们想要提高性能的话，我们可以在这个函数第一次去执行的时候，当它执行完毕的时候，把这个结果去缓存起来，当我们第二次调用这个函数的时候，我们不需要在等待那么长的时间，而是直接从缓存中获取结果从而提高性能。

下面，我们通过计算圆的面积来演示一下带缓存的这个函数：

//lodash中提供了一个带记忆功能的函数叫做memoize
//导入lodash
const _ = require('lodash')
//定义一个纯函数
function getArea (r) {  
	console.log(r) // 演示效果
	return Math.PI * r * r 
}

memoize要接收一个参数，这个参数是一个纯函数
内部会对这个纯函数进行处理，把这个函数的结果进行缓存

let getAreaWithMemory = _.memoize(getArea)
console.log(getAreaWithMemory(4))
console.log(getAreaWithMemory(4))
console.log(getAreaWithMemory(4))

当我们执行完毕之后，我们可以看到它打印了圆的半径，并把圆的面积输出出来了:

4
50.26548245743669
50.26548245743669
50.26548245743669

当我们第二次和第三次再去调用的时候，并没有执行console.log()，证明这个函数只执行了一次，之后再去执行的时候，是直接从缓存中把圆的面积获取到并打印出来的。

这个时候你可能会很好奇：memoize这个函数内部是如何去实现的呢？我们来模拟一下：

// 模拟 memoize 方法的实现

function memoize (f) { //相同的输入始终有相同的输出
  let cache = {} // 用来存储函数执行结果的对象
  return function () {
    let key = JSON.stringify(arguments) //将伪数组转换成字符串 
    console.log(key)
    // 先通过键key在cache中获取看是否有结果
    //有结果直接返回，没有则执行f.apply
    cache[key] = cache[key] || f.apply(f, arguments)
    console.log(cache[key]+"--")
    return cache[key]
  }
}

let getAreaWithMemory = memoize(getArea)
console.log(getAreaWithMemory(4))
console.log(getAreaWithMemory(4))
console.log(getAreaWithMemory(4))

4
50.26548245743669
50.26548245743669
50.26548245743669

• 可测试
  • 纯函数让测试更方便

因为纯函数始终有输入和输出，而单元测试其实就是在断言这个函数的结果，所以所有的纯函数都是可测试的函数

• 并行处理
  • 在多线程环境下并行操作共享的内存数据（比如全局变量）很可能会出现意外情况
  • 纯函数不需要访问共享的内存数据，所以在并行环境下可以任意运行纯函数 (ES6新增Web Worker 可开启新的线程)

纯函数的副作用

• 没有任何可观察的副作用
  • 副作用让一个函数变的不纯，如果函数依赖外部的状态就无法保证输出相同，就会带来副作用

我们通过一段代码来看一下是什么意思：

// 不纯的 
let min = 18 
function checkAge (age) {  
	return age >= min 
}

上面这段代码我们定义了一个checkAge的一个函数，它的作用是判断用户输入的年龄是否大于等于标准值，如果checkAger这个函数是纯函数的话，那么相同的输入应该始终有相同的输出，我们来考虑一下，如果age传入的值是20，那返回值是否永远为true呢？

答案是否定的，因为，当我们这个全局变量min发生变化的时候，我们的返回值就可能发生变化，因此，这个就是一个不纯的函数。

接下来我们把这个不纯的函数改造成一个纯函数：
我们只需要把全局变量min改变成局部变量，此时它就是一个纯的函数了。但是当我们把min拿到函数内部的时候还有一个问题，因为这个变量min的值等于一个具体的数字，其实有硬编码，我们都知道在写程序过程中应该尽量避免硬编码，在下一小节，我们会通过函数的柯里化来解决硬编码的问题。

// 纯的(有硬编码，后续可以通过柯里化解决) 
function checkAge (age) {  
	let min = 18  
	return age >= min
}

副作用让一个函数变的不纯(如上例)，纯函数的根据相同的输入返回相同的输出，如果函数依赖于外部 的状态就无法保证输出相同，就会带来副作用。

• 副作用的来源（外部交互）

  • 配置文件
  • 数据库
  • 获取用户的输入

• 注意：

1. 所有的外部交互都有可能带来副作用，副作用也使得方法通用性下降、不适合扩展和可重用性，同时副作用会给程序中带来安全隐患，给程序带来不确定性。
2. 但是副作用不可能完全禁止，尽可能控制它们在可控范围内发生。

1.3柯里化(Haskell Brooks Curry)

我们先来通过柯里化来解决上一小节遗留的问题，通过柯里化先来解决硬编码的问题：

// 柯里化演示
function checkAge (age) {
  let min = 18
  return age >= min
}

我们要解决硬编码问题，只需要把min提取到参数的位置就可以解决问题了

// 普通的纯函数
function checkAge (min, age) {
  return age >= min
}

console.log(checkAge(18, 20))
console.log(checkAge(18, 24))
console.log(checkAge(22, 24))

true
true
true

但是我们发现我们经常使用基准值18，我们想要避免18的重复，我们可以先思考一下之前在闭包的案例中我们是如何处理的
  处理结果如下：

// 函数的柯里化
function checkAge (min) {
	return function (age) {
		return age >= min
	}
}
// ES6
let checkAge = min => (age => age >= min)

let checkAge18 = checkAge(18)
let checkAge20 = checkAge(20)

console.log(checkAge18(20))
console.log(checkAge18(24))

true
true

其实以上这种调用函数的形式其实就是函数的柯里化。

概念

• 柯里化 (Currying):
  • 当一个函数有多个参数的时候先传递一部分参数调用它（这部分参数以后永远不变）
  • 然后返回一个新的函数接收剩余的参数，返回结果
• 使用柯里化解决上一个案例中硬编码的问题

lodash 中的柯里化函数

• _.curry(func)
  • 功能：创建一个函数，该函数接收一个或多个 func 的参数，如果 func 所需要的参数都被提 供则执行 func 并返回执行的结果。否则继续返回该函数并等待接收剩余的参数。
  • 参数：需要柯里化的函数
  • 返回值：柯里化后的函数

// lodash 中的 curry 基本使用 
const _ = require('lodash')

function getSum (a, b, c) { // 三元函数
  return a + b + c
}

const curried = _.curry(getSum)

console.log(curried(1, 2, 3))
//如果我们给curried这个函数传递参数的时候，我们传递的是gitSum中的部分参数
//它会返回新一个函数用来等待接收getSum中的剩余参数
console.log(curried(1)(2, 3))
//使用curry这个函数最终的目的是把多元的函数最终转换成一元的函数
console.log(curried(1, 2)(3))

6
6
6

• 模拟 _.curry() 的实现

function curry (func) {
  return function curriedFn(...args) {
    // 判断实参和形参的个数
    if (args.length < func.length) {
      return function () {
        //concat 合并两个数组
        return curriedFn(...args.concat(Array.from(arguments)))
      }
    }
    return func(...args)
  }
}

在我们模拟这个函数的过程中，其实我们就是看着lodash中的curry是如何调用的，我们根据它的调用形式，先把我们这个函数的形式写完，写完之后我们再去分析，它返回的这个函数是如何去调用的，它有两种调用形式：第一种是func这个函数传递的实际参数和curriedFn这个柯里化函数所需要的形式参数的个数相同情况下，我们直接去调用这个函数，所以我们对应的代码就是先去判断实参和形参的个数，如果实际参数小于形式参数的个数，下边要返回一个函数；相反，我们直接去调用我们需要去柯里化的函数，并且把参数给它传递进来

总结

• 柯里化可以让我们给一个函数传递较少的参数得到一个已经记住了某些固定参数的新函数
• 这是一种对函数参数的’缓存’
• 让函数变的更灵活，让函数的粒度更小
• 可以把多元函数转换成一元函数，可以组合使用函数产生强大的功能

1.4函数组合(compose)

• 纯函数和柯里化很容易写出洋葱代码 ‘h(g(f(x)))’
  • 例如我们要获取数组的最后一个元素再转换成大写字母

_.toUpper(_.first(_.reverse(array))) 

• 函数组合可以让我们把细粒度的函数重新组合生成一个新的函数

管道

下面这张图表示程序中使用函数处理数据的过程，给 fn 函数输入参数 a，返回结果 b。可以想想 a 数据 通过一个管道得到了 b 数据

当 fn 函数比较复杂的时候，我们可以把函数 fn 拆分成多个小函数，此时多了中间运算过程产生的 m 和 n。
  下面这张图中可以想象成把 fn 这个管道拆分成了3个管道 f1, f2, f3，数据 a 通过管道 f3 得到结果 m，m 再通过管道 f2 得到结果 n，n 通过管道 f1 得到最终结果 b

我们使用伪代码来描述一下这张图

fn = compose(f1, f2, f3) 
b = fn(a)

函数组合

• 函数组合 (compose)：如果一个函数要经过多个函数处理才能得到最终值，这个时候可以把中间过程的函数合并成一个函数
  • 函数就像是数据的管道，函数组合就是把这些管道连接起来，让数据穿过多个管道形成最终结果
  • 函数组合默认是从右到左执行

// 函数组合演示
function compose (f, g) {
  return function (value) {
    return f(g(value))         
  }
}
// 求数组的最后一个元素
// 先进行反转
function reverse (array) {
  return array.reverse()
}
// 再获取数组中第一个元素
function first (array) {
  return array[0]
}

const last = compose(first, reverse)

console.log(last([1, 2, 3, 4]))

4

• lodash 中的组合函数
  • lodash 中组合函数 flow() 或者 flowRight()，他们都可以组合多个函数
  • flow() 是从左到右运行
  • flowRight() 是从右到左运行，使用的更多一些

// lodash 中的函数组合的方法 _.flowRight()
const _ = require('lodash')

const reverse = arr => arr.reverse()
const first = arr => arr[0]
const toUpper = s => s.toUpperCase()

const f = _.flowRight(toUpper, first, reverse)
console.log(f(['one', 'two', 'three']))

THREE

• 模拟实现 lodash 的 flowRight 方法

function compose (...args) { // 参数不确定 用剩余参数
  return function (value) {
  	//从后往前调用每一个函数
  	//reduce 对数组中的每一个元素执行一个我们提供的函数 并将其汇总为一个单个的结果
    return args.reverse().reduce(function (acc, fn) { // 汇总的结果 如何处理
      return fn(acc)
    }, value) // acc 初始值
  }
}
// 优化为箭头函数
const compose = (...args) => value => args.reverse().reduce((acc, fn) => fn(acc), value)

• 函数的组合要满足结合律(associativity)：
  • 我们既可以把 g 和 h 组合，还可以把 f 和 g 组合，结果都是一样的

// 结合律（associativity） 
let f = compose(f, g, h) 
let associative = compose(compose(f, g), h) == compose(f, compose(g, h)) 
// true

使用lodash实现前面的案例

const _ = require('lodash')

// const f = _.flowRight(_.toUpper, _.first, _.reverse)
// const f = _.flowRight(_.flowRight(_.toUpper, _.first), _.reverse)
const f = _.flowRight(_.toUpper, _.flowRight(_.first, _.reverse))

console.log(f(['one', 'two', 'three']))

• 函数组合的调试

我们可以通过这种方式，在我们想要查看结果的函数后边通过trace把这个结果打印

const trace = _.curry((tag, v) => { // 打印的结果是在那个函数后面打印的 打印的数据
	console.log(tag, v)
	return v //当前处理的值
})

1.5Lodash中的fp模块

我们在使用函数组合解决问题的时候，会使用到lodash中提供的一些方法，但是如果这些方法有多个参数的时候，我们需要对这些参数进行柯里化的处理，我们需要去重新包装这些方法，例如：

// _.split()
const split = _.curry((sep, str) => _.split(str, sep))

可以看到这样做有些麻烦，因此我们来介绍Lodash中的fp模块来解决这个问题。

• lodash的fp模块提供了实用的对函数式编程友好的方法
• 提供了不可变auto-curried iteratee-first data-last 已经被柯里化的的方法
  • lodash 中的方法：数据优先，函数之后 require(‘lodash’)
  • lodash/fp 中的方法：函数优先，数据之后 require(‘lodash/fp’)

// lodash 模块 
const _ = require('lodash')

_.map(['a', 'b', 'c'], _.toUpper) 
// => ['A', 'B', 'C'] 
_.map(['a', 'b', 'c']) 
// => ['a', 'b', 'c']

_.split('Hello World', ' ')

// 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')

通过以上代码，我们简单了解了lodash/fp模块中提供的这些方法怎么去使用，我们再通过一个对比去更好的理解lodash/fp模块

// NEVER SAY DIE  --> never-say-die
const _ = require('lodash')

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 SAY DIE'))

// lodash 的 fp 模块
// NEVER SAY DIE  --> never-say-die
const fp = require('lodash/fp')

const f = fp.flowRight(fp.join('-'), fp.map(fp.toLower), fp.split(' '))
console.log(f('NEVER SAY DIE'))

通过以上代码，我们不难发现Lodash中的fp模块的好处

• lodash 和 lodash/fp模块 中 map 方法的区别

我们来看一段代码：

const _ = require('lodash')
console.log(_.map(['23', '8', '10'], parseInt))

我们来猜测一下结果

[ 23, NaN, 2 ]

我们可以发现这个结果与我们的预期并不一样，下面我们来分析一下
  当我们调用map这个方法的时候，它需要接收三个参数，分别是value, index|key, collection 我们来逐步分析：

// parseInt('23', 0, array)
// parseInt('8', 1, array)
// parseInt('10', 2, array)

我们可以回想一下parseInt的第二个参数是什么意思，第二个参数其实是把字符串转换成几进制，通过查看文档我们可以知道，其取值范围是2-36。如果我们传0的话，他其实也可以执行，其实他转换的就是十进制数据，会把’23’转化为十进制也就是23，如果我们传入的是1的话，其返回结果是NaN，如果是2的话会把字符串’10’转换成2。
  我们可以手动解决这个问题，但是lodash提供的fp模块就不会出现这样的问题。

const fp = require('lodash/fp')
console.log(fp.map(parseInt, ['23', '8', '10']))

[ 23, 8, 10 ]

1.6Point Free模式

• Point Free：我们可以把数据处理的过程定义成与数据无关的合成运算，不需要用到代表数据的那个参数，只要把简单的运算步骤合成到一起，在使用这种模式之前我们需要定义一些辅助的基本运算函数。
  • 不需要指明处理的数据
  • 只需要合成运算过程
  • 需要定义一些辅助的基本运算函数

// 非 Point Free 模式 
// Hello World  => hello_world 
function f (word) {  
  return word.toLowerCase().replace(/\s+/g, '_'); 
}

// Point Free 
const fp = require('lodash/fp')
const f = fp.flowRight(fp.replace(/\s+/g, '_'), fp.toLower)

console.log(f('Hello World'))

我们来回顾一下函数式编程的核心：把运算过程抽象成函数。而pointFree模式就是把抽象出来的函数合成成新的函数，而这个合成的过程就是一个抽象的过程，在这个过程中，我们依然是不需要关心数据的。

// Hello     World => hello_world
const fp = require('lodash/fp')

const f = fp.flowRight(fp.replace(/\s+/g, '_'), fp.toLower)

console.log(f('Hello     World'))

hello_world

1.7函子

• 为什么要学函子Functor
  到目前为止已经已经学习了函数式编程的一些基础，但是我们还没有演示在函数式编程中如何把副作用 控制在可控的范围内、异常处理、异步操作等
• 什么是 Functor
  • 容器：包含值和值的变形关系(这个变形关系就是函数)
  • 函子：是一个特殊的容器，通过一个普通的对象来实现，该对象具有map方法，map方法可以运行一个函数对值进行处理(变形关系)

Functor函子

// Functor 函子
class Container {
  constructor (value) {
    this._value = value
  }

  map (fn) {
    return new Container(fn(this._value))
  }
}

let r = new Container(5)
  .map(x => x + 1)
  .map(x => x * x)

console.log(r)

Container{ _value: 36 }

我们来考虑一下，我们每次要创建一个函子的时候，我们都要调用new来去处理，有点不方便，因此我们可以把new这个操作来封装一下，怎么来做呢？

class Container {
  static of (value) {
    return new Container(value)
  }

  constructor (value) {
    this._value = value
  }

  map (fn) {
    return Container.of(fn(this._value))
  }
}
// let r = Container.of(5)
//           .map(x => x + 1)
//           .map(x => x * x)

// console.log(r)

我们的函子是一个具有map方法的对象，我们在函子里面要维护一个值，这个值永远不对外公布，就像这个值包裹在一个盒子里面，我们想要对这个值进行处理的话，就需要调用map方法，我们通过mao方法传递一个处理值的函数，map方法执行完毕之后，会返回一个新的函子，所以我们可以通过这种方式不停的去.map，进行链式调用。

• 总结
  • 函数式编程的运算不直接操作值，而是由函子完成
  • 函子就是一个实现了 map 契约的对象
  • 我们可以把函子想象成一个盒子，这个盒子里封装了一个值
  • 想要处理盒子中的值，我们需要给盒子的 map 方法传递一个处理值的函数（纯函数），由这个函数来对值进行处理
  • 最终 map 方法返回一个包含新值的盒子（函子）

如果在 Functor 中如果我们传入 null 或 undefined

// 演示 null undefined 的问题
Container.of(null)
  .map(x => x.toUpperCase())

我们运行可以发现，出现了空指异常，这就会让函数变的不纯，下一小节我们会来解决这个问题。

MayBe函子

• 我们在编程的过程中可能会遇到很多错误，需要对这些错误做相应的处理
• MayBe函子的作用就是可以对外部的空值情况做处理
• 对null和undefined做处理,如果为空则返回null的函子

// 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
  }
}

let r = MayBe.of('Hello World')
          .map(x => x.toUpperCase())
console.log(r)

MayBe{ _value: 'HELLO WORLD' }

let r = MayBe.of(null)
          .map(x => x.toUpperCase())
console.log(r)

MayBe{ _value: null }

我们再来看一段执行结果

let r = MayBe.of('hello world')
          .map(x => x.toUpperCase())
          .map(x => null)
          .map(x => x.split(' '))
console.log(r)

MayBe{ _value: null }

我们可以看到，当运行的时候，不会出现异常，但是我们在执行的过程中会出现null，但至于什么位置出现的null，通过这个打印的结果我们是不知道的，所以Mabe函子的问题是，虽然我们可以去处理空指的问题，但是如果我们多次调用map的时候，哪一次出现的控制我们是不知道的。

• 注意：

1. MayBe函子虽然可以去处理空值的问题 但是如果我们多次调用map方法的时候
2. 它哪次出现了空指我们无法确定

Either函子

• Either 意思是两者中的任何一个，类似于if…else…的处理
• 与Mabe函子不同的是，当出现问题的时候，Either函子会给我们有效的提示信息
• 函数出现异常，会让我们的函数变的不纯，Either也可以用来做异常处理

// Either 函子
class Left {
  static of (value) {
    return new Left(value)
  }

  constructor (value) {
    this._value = value
  }

  map (fn) {
    return this
  }
}

class Right {
  static of (value) {
    return new Right(value)
  }

  constructor (value) {
    this._value = value
  }

  map (fn) {
    return Right.of(fn(this._value))
  }
}

let r1 = Right.of(12).map(x => x + 2)
let r2 = Left.of(12).map(x => x + 2)

console.log(r1)
console.log(r2)

Right { _value: 14 }
Left { _value: 12 }   

我们可以看到，代码都是一样的，只不过，一个是使用Right创建的函子，一个是使用Left创建的函子，打印的结果Left打印的值是我们传入的数据，没有做任何的处理，直接返回了这个对象，并没有调用传入的fn，为什么这么做呢？我们可以将Left中嵌入一个错误消息，下面我们来演示一个可能会发生错误的函数：比如我们要把一个JSON形式的字符串转换成一个JSON对象。

function parseJSON (str) {
  try {
    return Right.of(JSON.parse(str))
  } catch (e) {
    return Left.of({ error: e.message })
  }
}

我们先来传入一个非法的JSON对象来试一下：

let r = parseJSON('{ name: zs }')
console.log(r)

Left { _value: { error: 'Unexpected token n in JSON at position 2' } }

此时没有发生异常，我么传入一个正确的json对象并把它转化为大写

let r = parseJSON('{ "name": "zs" }')
          .map(x => x.name.toUpperCase())
console.log(r)

Right { _value: 'ZS' }

IO函子

• IO函子中的_value是一个函数,这里是把函数作为值来处理
• IO函子可以把不纯的动作存储到_value中,延迟执行这个不纯的操作(惰性执行)
• 把不纯的操作交给调用者来处理,最终是要执行的

// IO 函子
const fp = require('lodash/fp')

class IO {
  static of (value) {
    return new IO(function () {
      return value
    })
  }

  constructor (fn) {
    this._value = fn
  }

  map (fn) {
    return new IO(fp.flowRight(fn, this._value))
  }
}

我们使用IO函子的时候先创建了一个IO的类，接下来创建了一个构造函数，构造函数接收一个函数，这跟之前是不一样的，_value里面把函数存储起来，为了创建IO方便有创建了一个静态的of方法，但是这个of方法跟之前写的是不一样的，这个of方法接收的是一个数据，在of里面我们去返回一个IO函子，去调用IO的构造函数，当我们调用IO的构造函数的时候，我们传递的是一个函数，这个函数其实把我们传递过来的值给包裹起来了。
  其实通过of方法我们可以感觉到IO函子最终还是想把一个值给我们返回，只不过IO函子通过一个函数把这个值给我们包裹起来了，IO函子的_value保存的是这个函数，而这个函数返回的是一个值，把求值的过程做了延迟处理，当我们想要这个值的时候在调用IO函子的_value这个函数。
  接下来我们再来看一下map方法，我们把当前的_value和传入的fn组合成了一个新的函数。

// 调用
let r = IO.of(process).map(p => p.execPath)
console.log(r)

IO { _value: [Function (anonymous)] }

console.log(r._value())

C:\Program Files\nodejs\node.exe

Task函子

• 异步执行

函子可以帮我们控制副作用进行异常处理还可以去处理异步任务，因为在异步操作中，会出现通往地狱之门的回调，而是用Task函子可以避免出现回调的嵌套。因为异步的实现过于复杂，我们可以通过Folktale提供的Task进行演示。

• Folktale 一个标准的函数式编程库
  • 和lodash,ramda不同的是，他没有提供很多功能函数
  • 只提供了一些函数式处理的操作，例如：compose, curry等，一些函子Task\ Either\ MayBe等
• 安装Folktale库

npm i folktale

• 导入

const { compose, curry } = require('folktale/core/lambda') //解构方式获取

// folktale 中的 curry
let f = curry(2, (x, y) => {
  return x + y
})

console.log(f(1, 2))
console.log(f(1)(2))

3
3

// folktale 中的 compose 函数组合
const { toUpper, first } = require('lodash/fp')

let f = compose(toUpper, first)
console.log(f(['one', 'two']))

ONE

// Task 处理异步任务
const fs = require('fs') //读取文件
const { task } = require('folktale/concurrency/task') // 自行查看官网
const { split, find } = require('lodash/fp')

function readFile (filename) {
  return task(resolver => {
  // readFile异步
    fs.readFile(filename, 'utf-8', (err, data) => {
      if (err) resolver.reject(err) //错误
	  //正确
      resolver.resolve(data)
    })
  })
}

readFile('package.json')
  .map(split('\n')) //处理拿到的结果 切割获取数组
  .map(find(x => x.includes('version'))) // 寻找数组中每一项 version
  .run() //执行 readFile读取文件 之后执行map
  .listen({ // 监听当前的执行状态
    onRejected: err => { //失败
      console.log(err)
    },
    onResolved: value => { //成功
      console.log(value)
    }
  })

  "version": "1.0.0",

Pointed函子

• Pointed函子是实现了of静态方法的函子
• of方法是为了避免使用new来创建对象，更深层的含义是of方法用来把值放到上下文Context (把值放到容器中，使用map来处理值)

class Container {
	static of (value) {
		return new Container(value)
	}
	......
}

	Contanier.of(2)
		.map(x => x + 5)

Monad(单子)

• Linux中有一个命令cat :读取一个文件的内容并将文件的内容打印下来

// IO 函子的问题
const fs = require('fs')
const fp = require('lodash/fp')

class IO {
  static of (value) {
    return new IO(function () {
      return value
    })
  }

  constructor (fn) {
    this._value = fn
  }

  map (fn) {
    return new IO(fp.flowRight(fn, this._value))
  }
}

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)
// IO(IO(x))
let r = cat('package.json')._value()._value()
console.log(r)

• IO函子模拟cat时发现：我们在调用嵌套函子中的函数的时候非常的不方便，需要两次._value()
• Monad函子是可以变扁的Pointed函子 边扁就是可以解决函子嵌套的意思
• 一个函子如果具有join和of两个方法并遵守一些定律就是一个Monad

//IO Monad
join () {
    return this._value()
}
flatMap (fn) {
    return this.map(fn).join()
  }

我们来改进一下上面的代码

let r = readFile('package.json')
          .flatMap(print)
          .join()

console.log(r)

1.8函数式编程范式总结

• 认识函数式编程
  • 核心：把运算过程抽象成函数 面向函数编程
  • vue react 内部都运用了函数式编程的思想
• 函数相关复习
  • 函数是一等公民
    • 函数也是对象 所以我们可以把函数像值一样去处理
    • 函数也可以作为另一个函数的参数 或者返回值
  • 高阶函数
    • 把函数作为参数 或者返回值 柯里化 函数组合
  • 闭包
    • 无处不在
• 函数式编程基础
  • lodash
    • 一个函数式编程的库 提供了许多方法辅助我们函数式处理
  • 纯函数
    • 给一个函数输入相同的参数 总能得到相同的输出 且没有副作用
  • 柯里化
    • 可以对函数进行降维处理
  • 管道
    • 把一个函数想象成一个处理数据的管道
  • 函数组合
    • 函数组合 把多个一元函数组合成更强大的函数
• 函子
  • 函子就是实现了一个map契约的对象
  • 可以吧函子想象成一个盒子，盒子里封装了一个值
  • 想处理这个值，就必须调用map方法并传入一个纯函数，由这个纯函数来处理值
  • map处理后，返回一个包含新值的新函子