在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下最近学习的函数式编程的相关知识，希望对大家有所帮助，文章有点长。每天进步一点点。
what【什么是函数式编程】
函数式编程【Functional programming】缩写【FP】，是一种编程范式，也是一种编程风格。
常见编程范式：【面向过程编程、面向对象编程、函数式编程】
1、大多数初中级前端都是在面向过程编程【按照步骤来实现】
// 面向过程编程
let num1 = 2
let num2 = 3
let sum = num1 + num2
console.log(sum)
2、面向对象编程【把现实中的事物抽象成类和对象，通过封装、继承和多态来演示不同事物之间的联系】
3、函数式编程【把现实世界事物和事物之间的联系抽象到程序世界（是对运算过程进行抽象）】
// 函数式编程
function add(n1, n2) {
return n1 + n2
}
let sum = add(2, 3)
console.log(sum)
补充说明：函数式编程中的函数指的不是程序中的函数Function，而是数学中的函数即映射关系，例如：y=sin(x)，是这种x和y的关系；
why【为什么学习函数式编程】
为什么要学习函数式编程，函数式编程重要吗？
1、React的高阶组件使用了高阶函数【高阶函数就是函数式编程的一个特性】2、Vue3也开始拥抱函数式编程3、函数式编程可以抛弃this4、打包过程中可以更好的利用tree shaking过滤无用代码5、方便测试、方便并行处理
而且有很多库可以帮助我们进行函数式开发：如 lodash、underscore、ramda、folktale等
how【如何学习函数式编程】
基础知识
函数是一等公民（First-class Function）
在JS中，函数就是一个普通的对象，所以我们可以把函数像对象一样存储到变量/数组中，函数还可以作为另外一个函数的参数和返回值，甚至可以在程序运行的时候通过 new Function('alert(1)')来构造一个新的函数
// 把函数赋值给变量
let fn = function () {
console.log('Hello First-class Function')
}
fn()
// 一个示例
const BlogController = {
index (posts) { return Views.index(posts) },
show (post) { return Views.show(post) },
create (attrs) { return Db.create(attrs) },
update (post, attrs) { return Db.update(post, attrs) },
destroy (post) { return Db.destroy(post) }
}
// 优化
const BlogController = {
index: Views.index,
show: Views.show,
create: Db.create,
update: Db.update,
destroy: Db.destroy
}
函数是一等公民是学习高阶函数、柯里化等知识的基础
高阶函数（Higher-order function）
1、可以把函数作为参数传递给另一个函数，可以把函数作为另一个函数的返回结果
// 高阶函数 - 函数作为参数
// forEach
function forEach(array, fn) {
for (let i = 0; i < array.length; i++) {
fn(array[i])
}
}
// const arr = [1, 2, 3, 4, 5]
// forEach(arr, item => console.log(item))
// filter
function filter(array, fn) {
let result = []
for (let i = 0; i < array.length; i++) {
if(fn(array[i])) {
result.push(array[i])
}
}
return result
}
const arr = [1, 2, 3, 4, 5]
const r = filter(arr, item => item > 2)
console.log(r)
// 高阶函数 - 函数作为返回值
function makeFn() {
let msg = 'hello'
return function() {
console.log(msg)
}
}
const helloFun = makeFn()
helloFun()
// once
function once () {
let done = false
return function (money) {
if (!done) {
done = true
console.log(`支付 ${money} 美元`)
}
}
}
let pay = once()
pay(5)
pay(5)
2、使用高阶函数的意义
对运算过程进行抽象可以帮我们屏蔽细节，只需要关注我们的目标
高阶函数是用来抽象通用的问题
// 面向过程的方式
let array = [1, 2, 3, 4]
for (let i = 0; i < array.length; i++) {
console.log(array[i])
}
// 高阶函数
let array = [1, 2, 3, 4]
forEach(array, item => {
console.log(item)
})
3、常用高阶函数
forEach、map、filter、every、some、find/findIndex、reduce、sort......
// map
function map(array, fn) {
for (let value of array) {
fn(value)
}
}
let arr = [1, 2, 3, 4, 5]
map(arr, item => console.log(item))
// every
function every(array, fn) {
let result = true
for (let value of array) {
result = fn(value)
if (!result) {
break
}
}
console.log(result)
}
every(arr, item => item > 1)
// some
function some (array, fn) {
let result = false
for (let value of array) {
result = fn(value)
if (result) {
break
}
}
console.log(result)
}
some(arr, item => item > 4)
闭包（Closure）
1、闭包的概念：函数和其周围的状态(词法环境)的引用捆绑在一起形成闭包【可以在另一个作用域中调用一个函数的内部函数并访问到该函数的作用域中的成员】
代码见上面 【高阶函数 - 函数作为返回值】
2、闭包的本质：函数在执行的时候会放到一个执行栈上当函数执行完毕之后会从执行栈上移除，但是 堆上的作用域成员因为被外部引用不能释放，因此内部函数依然可以访问外部函数的成员
3、闭包案例
<!DOCTYPE html>
<html>
<head>
闭包案例
</head>
<body>
// 生成计算数字的多少次幂的函数
function makePower(power) {
return function(number) {
return Math.pow(number, power)
}
}
const power2 = makePower(2)
const power3 = makePower(3)
console.log(power2(2))
console.log(power2(3))
console.log(power3(2))
</body>
</html>
通过断点调试，可以清楚的看到闭包发生的位置
纯函数
纯函数的概念
1、纯函数：相同的输入永远会得到相同的输出，而且没有任何可观察的副作用
纯函数就类似数学中的函数(用来描述输入和输出之间的关系)，y = f(x)
2、lodash 是一个纯函数的功能库，提供了对数组、数字、对象、字符串、函数等操作的一些方法
数组中的的 slice是纯函数【 返回数组中的指定部分，不会改变原数组】 ，数组的 splice 是不纯的函数【对数组进行操作返回该数组，会改变原数组】
let numbers = [1, 2, 3, 4, 5]
// 纯函数
numbers.slice(0, 3)
// => [1, 2, 3]
numbers.slice(0, 3)
// => [1, 2, 3]
numbers.slice(0, 3)
// => [1, 2, 3]
// 不纯的函数
numbers.splice(0, 3)
// => [1, 2, 3]
numbers.splice(0, 3)
// => [4, 5]
numbers.splice(0, 3)
// => []
lodash常用的方法：first、last、toUpper、reverve、each、includes、find、findIndex等等
使用lodash前需要先初始化一个package.json并安装lodash【npm init -y；npm i lodash】
// lodash 常用方法
// first、last、toUpper、reverve、each、includes、find、findIndex
const _ = require('lodash')
let arr = ['jack', 'jone', 'mack', 'tom']
console.log(_.first(arr))
console.log(_.last(arr))
console.log(_.toUpper(_.first(arr)))
console.log(_.reverse(arr))
let r = _.each(arr, (item, index) => {
console.log(index, item)
})
console.log(r)
3、函数式编程不会保留计算中间的结果，所以变量是不可变的（无状态的）
4、我们可以把一个函数的执行结果交给另一个函数去处理
纯函数的好处
1、可缓存
因为纯函数对相同的输入始终有相同的结果，所以可以把纯函数的结果缓存起来
// lodash的缓存函数 memoize
const _ = require('lodash')
function getArea (r) {
console.log(r)
return Math.PI * r * r
}
// let getAreaWithMemory = _.memoize(getArea)
// console.log(getAreaWithMemory(4))
// console.log(getAreaWithMemory(4))
// console.log(getAreaWithMemory(4))
// 模拟 memoize 函数
function memorize (fn) {
let cache = {}
return function() {
const key = JSON.stringify(arguments)
cache[key] = cache[key] || fn.apply(fn, arguments)
return cache[key]
}
}
let getAreaWithMemory = memorize(getArea)
console.log(getAreaWithMemory(4))
console.log(getAreaWithMemory(4))
console.log(getAreaWithMemory(4))
// 看到输出的4只执行了一次，因为其结果被缓存下来了
2、可测试
纯函数让测试更加的方便
3、并行处理
多线程环境下并行操作共享的内存数据很可能会出现意外情况。纯函数不需要访问共享的内存数据，所以在并行环境下可以任意运行纯函数
虽然JS是单线程，但是ES6以后有一个Web Worker，可以开启一个新线程
副作用
副作用就是让一个函数变得不纯，纯函数根据相同的输入始终返回相同的输出，如果函数依赖于外部的状态就无法保证输出相同，就会带来副作用
// 不纯的函数，因为它依赖于外部的变量
let mini = 18
function checkAge (age) {
return age >= mini
}
副作用的来源：配置文件、数据库、获取用户的输入
所有的外部交互都有可能带来副作用，副作用也使得方法通用性下降不适合扩展和可重用性，同时副作用会给程序中带来安全隐患给程序带来不确定性，但是副作用不可能完全禁止，我们不能禁止用户输入用户名和密码，只能尽可能控制它们在可控范围内发生
柯里化
当函数有多个参数的时候，我们可以对函数进行改造。我们可以调用一个函数，只传递部分的参数（这部分参数以后永远不变），然后让这个函数返回一个新的函数。新的函数传递剩余的参数，并且返回相应的结果。
解决硬编码问题
// 解决了函数不纯的问题，但是出现了硬编码
// function checkAge(age) {
// let min = 18
// return age => age >= min
// }
// 普通的纯函数
// function checkAge(min, age) {
// return age >= min
// }
// console.log(checkAge(18, 19))
// console.log(checkAge(18, 20))
// console.log(checkAge(20, 22))
// 这个地方的min参数可能会经常使用，避免重复
// 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(19))
console.log(checkAge18(20))
console.log(checkAge20(12))
Lodash中的柯里化
1、_.curry(func)
功能：创建一个函数，该函数接收一个或多个 func的参数，如果 func 所需要的参数都被提供则执行 func 并返回执行的结果。否则继续返回该函数并等待接收剩余的参数
参数：需要柯里化的函数
返回值：柯里化后的函数
const _ = require('lodash')
// 参数只有一个的是一元函数，参数有两个的是二元函数
// 柯里化可以把一个多元函数转化成为一元函数
function getSum(a, b, c) {
return a + b + c
}
// 定义一个柯里化函数
const curried = _.curry(getSum)
// 如果输入了全部参数则立即返回结果
console.log(curried(1, 2, 3))
// 如果输入了部分参数，此时会先返回当前函数，并且等待接收剩余参数
console.log(curried(1)(2, 3))
console.log(curried(1, 2)(3))
柯里化案例
判断字符串中有没有空白字符，或者提取字符串中所有空白字符，可以使用字符串的match方法:''.match(/\s+/g)
但是我们要是写一个数组的去处空白字符的方法，上面的代码就无法重用。那我们如何用函数式方法去写
function match(reg, str) {
return str.match(reg)
}
reg的表达式是重复的，上面的函数如何柯里化，思路是这样的：
//柯里化处理
const _ = require('lodash')
//利用lodash的curry函数，第一个参数是匹配规则，第二个参数是字符串，生成一个match函数
const match = _.curry(function(reg, str) {
return str.match(reg)
})
// 根据规则haveSpace是一个匹配空格的函数
const haveSpace = match(/\s+/g)
// 由此可以判断字符串里面有没有空格
console.log(haveSpace("john conoer")) // ['']
// 那如果是数字的话怎么办呢？
// 根据规则haveNumber是一个匹配数字的函数
const haveNumber = match(/\d+/g)
console.log(haveNumber("123abc")) // [123]
// 对于数组怎么匹配元素中有没有空格
const filter = _.curry(function(func, array) {
return array.filter(func)
})
// filter函数，第一个参数传递匹配元素中有没有空格
//第二个参数是指定的数组
console.log(filter(haveSpace, ['john conoer', 'tom'])) // ['john conoer']
// 如果上述写还是比较麻烦，那么可以再封装一个函数出来
// filter可以传一个参数，然后返回一个函数
// 这个findSpace就是匹配数组元素中有没有空格的函数
const findSpace = filter(haveSpace)
console.log(findSpace(['john conoer', 'tom'])) // ['john conoer']
对上面的思路做一个总结，柯里化的好处就是我们可以最大程度的重用我们的函数。
柯里化原理模拟
使用之前做过的例子进行分析
const _ = require('lodash')
function getSum(a, b, c) {
return a + b + c
}
const curried = _.curry(getSum)
console.log(curried(1, 2, 3)) // 6
console.log(curried(1)(2, 3)) // 6
console.log(curried(1, 2)(3)) // 6
实现一个柯里化转换函数要进行分析：
1、入参出参：调用传递一个纯函数的参数，完成之后返回一个柯里化函数
2、入参出参分析：
如果curried调用传递的参数和getSum函数参数个数相同，那么立即执行并返回调用结果
如果curried调用传递的参数是getSum函数的部分参数，那么需要返回一个新的函数，并且等待接收getSum的其他参数
3、重点关注：
获取调用的参数
判断参数个数是否相同
// 模拟柯里化函数
function curry (func) {
// 取名字curriedFn 是为了下面实参和形参个数比较用的
return function curriedFn(...args) {
// 判断实参和形参的个数
if (args.length < func.length) { // 实参小于形参，传递参数不够
return function() {
// 等待传递的参数，如果剩余的参数加上之前的参数等于形参，那么久返回func
// 第一部分参数在args里面，第二部分参数在arguments里面，要将两个合并并且展开传递（使用...）
// concat函数要合并两个数组，arguments为伪数组，需要用Array.from进行转换
return curriedFn(...args.concat(Array.from(arguments)))
}
}
return func(...args)
}
}
const test = curry(getSum)
console.log(test(1, 2, 3)) // 6
console.log(test(1)(2, 3)) // 6
console.log(test(1, 2)(3)) // 6
柯里化总结
柯里化可以给一个函数传递较少的参数得到一个已经记住了某些固定参数的新函数（比如match函数新生成了haveSpace函数，里面使用了闭包，记住了我们传递的正则表达式的参数）
这是一种对函数参数的'缓存'（使用了闭包）
让函数变的更灵活，让函数的粒度更小
可以把多元函数转换成一元函数，可以组合使用函数产生强大的功能
函数组合
背景知识
纯函数和柯里化很容易写出洋葱代码 h(g(f(x)))
//获取数组的最后一个元素再转换成大写字母
//先翻转数据 --> 再取第一个元素 --> 再转换成大写字母
const _ = require('lodash')
_.toUpper(_.first(_.reverse(array)))
函数组合可以让我们把细粒度的函数重新组合成一个新的函数，避免写出洋葱代码
管道
在函数式编程中，函数就是一个管道（pipe）。这头进去一个值，那头就会出来一个新的值，没有其他作用。
中间m、n、等等什么的我们也不关心
fn = compose(f1, f2, f3)
b = fn(a)
函数组合的概念
如果一个函数要经过多个函数处理才能得到最终值，这个时候可以把中间过程的函数合并成一个函数
函数组合默认是从右到左执行
// 函数组合演示
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(['a', 'b', 'c'])) // c
Lodash中的组合函数
【flow()/flowRight()】
lodash 中组合函数 flow() 或者flowRight()，他们都可以组合多个函数。
flow() 是从左到右运行
flowRight() 是从右到左运行，使用的更多一些
// 实例：获取数组的最后一个元素并转化成大写字母
const _ = require('lodash')
const reverse = array => array.reverse()
const first = array => array[0]
const toUpper = value => value.toUpperCase()
const f = _.flowRight(toUpper, first, reverse)
console.log(f(['a', 'b', 'c']))
函数组合原理模拟
分析上面的例子：
入参不固定，参数都是函数，出参是一个函数，这个函数要有一个初始的参数值
function compont(...args) {
// 返回的函数，有一个传入的初始参数即value
return function(value) {
// ...args是执行的函数的数组，从右向左执行那么数组要进行reverse翻转
// reduce: 对数组中的每一个元素，去执行我们提供的一个函数，并将其汇总成一个结果
// reduce的第一个参数是一个回调函数，第二个参数是acc的初始值，这里是value
// reduce第一个参数【即回调函数】需要两个参数，第一个参数是汇总的一个结果acc，第二个参数是处理汇总结果的函数并返回一个新的值
// fn指的是数组中的每一个元素（即函数），fn来处理参数acc，处理完成之后，下一个数组元素处理的是上一个数组的结果acc
return args.reverse().reduce(function(acc, fn) {
return fn(acc)
}, value)
}
}
const test = compont(toUpper, first, reverse)
console.log(test(['a', 'b', 'c']))
// es6的写法
const compont = (...args) => value => args.revese().reduce((acc, fn) => fn(acc), value)
函数组合满足结合律
下面三个情况结果一样，我们既可以把 g 和 h 组合，还可以把 f 和 g 组合。
// 结合律（associativity）
let f = compose(f, g, h)
let associative = compose(compose(f, g), h) == compose(f, compose(g, h))
// true
用之前的例子详细分析：
const _ = require('lodash')
// 方式一
const f = _.flowRight(_.toUpper, _.first, _.reverse)
// 方式二
const f = _.flowRight(_.flowRight(_.toUpper, _.first), _.reverse)
// 方式三
const f = _.flowRight(_.toUpper, _.flowRight(_.first, _.reverse))
// 无论上面那种写法，下面都输出THREE这个相同的结果
console.log(f(['one', 'two', 'three'])) // THREE
函数组合的调试
如果我们运行的结果和我们的预期不一致，我们怎么调试呢？我们怎么能知道中间运行的结果呢？
下面这个输入NEVER SAY DIE要对应输出nerver-say-die
注意：每次把自己加的参数写前面，传入的值写后面
// 输入`NEVER SAY DIE`要对应输出nerver-say-die
const _ = require('lodash')
// 我们需要对中间值进行打印，并且知道其位置，用柯里化输出一下
const log = _.curry((tag, value) => {
console.log(tag, value)
return value
})
// 修改方式，利用数组的map方法，遍历数组的每个元素让其变成小写
// 这里的map需要两个参数，第一个是数组，第二个是回调函数，需要柯里化
const map = _.curry((fn, array) => {
return _.map(array, fn)
})
// 这里split函数需要传入两个参数，且我们最后调用的时候要传入字符串，所以字符串要在第二个位置传入，这里我们需要自己封装一个split函数
const split = _.curry((sep, str) => _.split(str, sep))
// 大写变小写，用到toLower()，因为这个函数只有一个参数，所以可以在函数组合中直接使用
// 这里join方法也需要两个参数，第一个参数是数组，第二个参数是分隔符，数组也是最后的时候才传递，也需要交换
const join = _.curry((sep, array) => _.join(array, sep))
// 从右往左在每个函数后面加一个log，并且传入tag的值，就可以知道每次结果输出的是什么
const f = _.flowRight(join('-'), log('toLower'), map(_.toLower), log('split'), split(' '))
console.log(f('NEVER SAY DIE'))
FP模块
函数组合的时候用到很多的函数需要柯里化处理，我们每次都处理那些函数有些麻烦，所以lodash中有一个FP模块
lodash中的fp模块提供了实用的对函数式编程友好的方法
提供了不可变auto-curried iteratee-first data-last（函数在先，数据之后）的方法
// lodash 模块
const _ = require('lodash')
// 数据置先，函数置后
_.map(['a', 'b', 'c'], _.toUpper)
// => ['A', 'B', 'C']
_.map(['a', 'b', 'c'])
// => ['a', 'b', 'c']
// 数据置先，规则置后
_.split('Hello World', ' ')
//BUT
// 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')
FP模块对于组合函数的友好
// 使用函数组合调试的例子 输入`NEVER SAY DIE`要对应输出nerver-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-map方法的小问题
const _ = require('lodash')
const fp = require('lodash/fp')
console.log(_.map(['23', '8', '10'], parseInt))
// [ 23, NaN, 2 ]
_.map(['23', '8', '10'], function(...args){
console.log(...args)
})
// _.map后面的回调函数接受有三个参数，第一个参数是遍历的数组，第二个参数是key/index，第三个参数是对应函数
// 23 0 [ '23', '8', '10' ]
// 8 1 [ '23', '8', '10' ]
// 10 2 [ '23', '8', '10' ]
// parseInt第二个参数表示进制，0默认就是10进制，1不存在，2表示2进制，所以输出是那个样子
//parseInt('23', 0, array)
//parseInt('8', 1, array)
//parseInt('10', 2, array)
// 要解决的话需要重新封装一个parseInt方法
// 而使用fp模块的map方法不存在下面的问题
console.log(fp.map(parseInt, ['23', '8', '10']))
// [ 23, 8, 10 ]
Point Free
Point Free 是一种编程风格，具体的实现是函数的组合
我们可以把数据处理的过程定义成与数据无关的合成运算，不需要用到代表数据的那个参数，只要把简单的运算步骤合成到一起，在使用这种模式之前我们需要定义一些辅助的基本运算函数
不需要指明处理的数据
只需要合成运算过程
需要定义一些辅助的基本运算函数
// Hello World => hello_world
// 思路： 先将字母转换成小写，然后将空格替换成下划线，如果空格比较多，要替换成一个
const fp = require('lodash/fp')
// replace方法接收三个参数
// 第一个是正则匹配pattern，第二个是匹配后替换的数据，第三个是要传的字符串
// 所以这里需要传两个参数
const f = fp.flowRight(fp.replace(/\s+/g, '_'), fp.toLower)
console.log(f('Hello World'))
Pointfree案例
//world wild web -->W. W. W
//思路：
//把一个字符串中的首字母提取并转换成大写，使用. 作为分隔符
const fp = require('lodash/fp')
// const f = fp.flowRight(fp.join('. '), fp.map(fp.first), fp.map(fp.toUpper), fp.split(' '))
// console.log(f('world wild web'))
// 上面的代码进行了两次的遍历，性能较低
// 优化
const firstLetterToupper = fp.flowRight(fp.first, fp.toUpper)
const f = fp.flowRight(fp.join('. '), fp.map(firstLetterToupper), fp.split(' '))
console.log(f('world wild web'))
Functor
why【为什么要学函子】
函子(representative functor)是范畴论里的概念，指从任意范畴到集合范畴的一种特殊函子。我们没有办法避免副作用，但是我们尽可能的将副作用控制在可控的范围内，我们可以通过函子去处理副作用，我们也可以通过函子去处理异常，异步操作等。
what【什么是Functor】
首先要理解容器：容器是包含值和值的变形关系(这个变形关系就是函数)
函子是一个特殊的容器，通过一个普通的对象来实现，该对象具有 map 方法，map方法可以运行一个函数对值进行处理(变形关系)
理解Functor
class Container {
constructor(value) {
// 这个函子的值是保存在内部的，不对外公布
// _下划线的成员都是私有成员，外部无法访问，值是初始化的传的参数
this._value =value
}
//有一个对外的方法map，接收一个函数（纯函数），来处理这个值
map(fn) {
// 返回一个新的函子，把fn处理的值返回给函子，由新的函子来保存
return new Container(fn(this._value))
}
}
// 创建一个函子的对象
const r = new Container(2).map(item => item * item ).map(item => item + 2)
console.log(r) // Container { _value: 6 } 返回了一个container函子对象，值不对外公布
上面还是面向对象的编程思想，要修改成函数式编程的思想，需要避免使用new
class Container {
//使用类的静态方法，of替代了new Container的作用
static of (value) {
return new Container(value)
}
constructor(value) {
this._value = value
}
map(fn) {
// of替代了new Container
return Container.of(fn(this._value))
}
}
// 创建一个函子的对象
const r = new Container(2).map(item => item * item ).map(item => item + 2)
console.log(r)
函子总结
1、函数式编程的运算不直接操作值，而是由函子完成
2、函子就是一个实现了 map 契约的对象
3、我们可以把函子想象成一个盒子，这个盒子里封装了一个值
4、想要处理盒子中的值，我们需要给盒子的 map 方法传递一个处理值的函数（纯函数），由这个函数来对值进行处理
5、最终 map 方法返回一个包含新值的盒子（函子）
各种函子
存在的问题：如果value是null undefined，怎么办？
Container.of(null)
.map(x=>x.toUpper) // 报错，使得函数不纯
下面介绍几种函子，处理不同的问题
MayBe函子
MayBe 函子的作用就是可以对外部的空值情况做处理（控制副作用在允许的范围）
class MayBe {
static of (value) {
return new MayBe(value)
}
constructor(value) {
this._value = value
}
map(fn) {
// 判断一下value的值是不是null和undefined，如果是就返回一个value为null的函子，如果不是就执行函数
return this.isNothing() ? MayBe.of(null) : MayBe.of(fn(this._value))
}
// 定义一个判断是不是null或者undefined的函数，返回true/false
isNothing() {
return this._value === null || this._value === undefined
}
}
console.log(new MayBe(null).map(item => item * item ).map(item => item + 2)) // MayBe { _value: null }
console.log(new MayBe(4).map(item => item * item ).map(item => item + 2)) // MayBe { _value: 18 }
但是这里有一个问题就是，如果map中间有好几步，最后返回是null，并不知道是哪一个步骤返回的。解决这个问题，需要看下一个函子。
Either函子
1、Either 两者中的任何一个，类似于 if...else...的处理
2、当出现问题的时候，Either函子会给出提示的有效信息
3、异常会让函数变的不纯，Either 函子可以用来做异常处理
// 因为是二选一，所以要定义left和right两个函子
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 new Right(fn(this._value))
}
}
console.log(Left.of(10).map(item => item + 2)) // Left { _value: 10 }
console.log(Right.of(10).map(item => item + 2)) // Right { _value: 12 }
// 为什么结果会不一样？因为Left返回的是当前对象，并没有使用fn函数
// 那么这里如何处理异常呢？
// 我们定义一个字符串转换成对象的函数
function parseJSON(str) {
// return Right.of(JSON.parse(str)) // SyntaxError: Unexpected token a in JSON at position 0
// 对于可能出错的环节使用try-catch
try {
// 正常情况使用Right函子
return Right.of(JSON.parse(str))
}catch(e) {
// 错误之后使用Left函子，并返回错误信息
return Left.of({ error: e.message })
}
}
let rL = parseJSON('{name: "Tom:"}')
console.log(rL) // Left { _value: { error: 'Unexpected token n in JSON at position 1' } }
let rR = parseJSON('{"name": "Tom"}')
console.log(rR) // Right { _value: { name: 'Tom' } }
console.log(rL.map(item => item.name.toUpperCase())) // Left { _value: { error: 'Unexpected token n in JSON at position 1' } }
console.log(rR.map(item => item.name.toUpperCase())) // Right { _value: 'TOM' }
IO函子
1、IO就是输入输出，IO 函子中的 _value 是一个函数，这里是把函数作为值来处理
2、IO 函子可以把不纯的动作存储到 _value 中，延迟执行这个不纯的操作(惰性执行)，包装当前的操作
3、把不纯的操作交给调用者来处理
// 因为IO函数需要用到组合函数，所以要提前安装lodash
const _ = require('lodash')
class IO {
// of方法快速创建IO，要一个值返回一个函数，将来需要值的时候再调用函数
static of (value) {
return new IO(() => value)
}
// 传入的是一个函数
constructor(fn) {
this._value = fn
}
map(fn) {
// 这里用的是new一个新的构造函数，是为了把当前的_value函数和map传入的fn进行组合成新的函数
return new IO(_.flowRight(fn, this._value))
}
}
// 测试
// node执行环境可以传入一个process对象（进程）
// 调用of的时候把当前取值的过程包装到函数里面，再在需要的时候获取process
// map 需要传入一个函数，函数需要接收一个参数，这个参数就是of中传递的参数process
// 返回一下process中的execPath属性，即当前node进程的执行路径
const 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函子（异步执行）
函子可以控制副作用，还可以处理异步任务，为了避免地狱之门。
异步任务的实现过于复杂，我们使用 folktale 中的 Task 来演示
folktale 一个标准的函数式编程库。和 lodash、ramda 不同的是，他没有提供很多功能函数。只提供了一些函数式处理的操作，例如：compose、curry 等，一些函子 Task、Either、 MayBe 等
1、folktale的安装
npm i folktale
2、folktale中的curry函数
const { compose, curry } = require('folktale/core/lambda')
// curry中的第一个参数是函数有几个参数，为了避免一些错误
const f = curry(2, (x, y) => x + y)
console.log(f(1, 2)) // 3
console.log(f(1)(2)) // 3
3、folktale中的compose函数
const { compose, curry } = require('folktale/core/lambda')
const { toUpper, first } = require('lodash/fp')
// compose 组合函数在lodash里面是flowRight
const r = compose(toUpper, first)
console.log(r(['one', 'two'])) // ONE
4、Task函子异步执行
folktale(2.3.2) 2.x 中的 Task 和 1.0 中的 Task 区别很大，1.0 中的用法更接近我们现在演示的函子
这里以 2.3.2 来演示
const { task } = require('folktale/concurrency/task')
const fs = require('fs')
// 2.0中是一个函数，函数返回一个函子对象
// 1.0中是一个类
//读取文件
function readFile (filename) {
// task传递一个函数，参数是resolver
// resolver里面有两个参数，一个是reject失败的时候执行的，一个是resolve成功的时候执行的
return task(resolver => {
//node中读取文件，第一个参数是路径，第二个是编码，第三个是回调，错误在先
fs.readFile(filename, 'utf-8', (err, data) => {
if(err) resolver.reject(err)
resolver.resolve(data)
})
})
}
// 调用
// readFile调用返回的是Task函子，调用要用run方法
readFile('package.json')
.run()
// 现在没有对resolve进行处理，可以使用task的listen去监听获取的结果
// listen传一个对象，onRejected是监听错误结果，onResolved是监听正确结果
.listen({
onRejected: (err) => {
console.log(err)
},
onResolved: (value) => {
console.log(value)
}
})
// 以下为输出内容
/** {
"name": "Functor",
"version": "1.0.0",
"description": "",
"main": "either.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"folktale": "^2.3.2",
"lodash": "^4.17.20"
}
}
*/
5、案例
在package.json文件中提取一下version字段
const { task } = require('folktale/concurrency/task')
const fs = require('fs')
const { split, find } = require('lodash/fp')
// 2.0中是一个函数，函数返回一个函子对象
// 1.0中是一个类
//读取文件
function readFile (filename) {
// task传递一个函数，参数是resolver
// resolver里面有两个参数，一个是reject失败的时候执行的，一个是resolve成功的时候执行的
return task(resolver => {
//node中读取文件，第一个参数是路径，第二个是编码，第三个是回调，错误在先
fs.readFile(filename, 'utf-8', (err, data) => {
if(err) resolver.reject(err)
resolver.resolve(data)
})
})
}
//演示一下调用
// readFile调用返回的是Task函子，调用要用run方法
readFile('package.json')
//在run之前调用map方法，在map方法中会处理的拿到文件返回结果
// 在使用函子的时候就没有必要想实现机制
.map(split('\n'))
.map(find(x => x.includes('version')))
.run()
// 现在没有对resolve进行处理，可以使用task的listen去监听获取的结果
// listen传一个对象，onRejected是监听错误结果，onResolved是监听正确结果
.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 {
// Point 函子的作用是把值放到一个新的函子里面返回，返回的函子就是一个上下文
static of (value) {
return new Container(value)
}
constructor(fn) {
this._value = fn
}
map(fn) {
return new Container(fn(this._value))
}
}
// 调用的时候获得一个上下文，之后是在上下文中处理数据
const r = Container.of(2).map(x => x + 5)
console.log(r) // Container { _value: 7 }
Monad函子（单子）
1、IO函子的嵌套问题
用来解决IO函子多层嵌套的一个问题
const fp = require('lodash/fp')
const fs = require('fs')
class IO {
static of (value) {
return new IO(() => value)
}
constructor(fn) {
this._value = fn
}
map(fn) {
return new IO(fp.flowRight(fn, this._value))
}
}
// 读取文件
let readFile = filename => {
return new IO(() => {
// 同步获取文件
return fs.readFileSync(filename, 'utf-8')
})
}
// 打印函数
// x 是上一步的IO函子
let print = x => {
return new IO(() => {
console.log(x)
return x
})
}
// 组合函数，先读文件再打印
let f = fp.flowRight(print, readFile)
// 调用，拿到的结果是嵌套的IO函子 IO(IO(X))
let r = f('package.json')
console.log(r) // IO { _value: [Function (anonymous)] }
console.log(r._value()._value()) // 下面为打印内容
/**
*
{
"name": "moudle1",
"version": "1.0.0",
"description": "",
"main": "1-1-01First-class-Function.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"folktale": "^2.3.2",
"lodash": "^4.17.21"
}
}
*/
上面遇到多个IO函子嵌套的时候，那么_value就会调用很多次，这样的调用体验很不好。所以进行优化。
2、什么是Monad函子
Monad 函子是可以变扁的 Pointed 函子，用来解决IO函子嵌套问题，IO(IO(x))
一个函子如果具有 join 和 of 两个方法并遵守一些定律就是一个 Monad
实现一个Monad函子：【实际开发中不会这么难，主要是知道monad的实现】
const fp = require('lodash/fp')
const fs = require('fs')
class IO {
static of (value) {
return new IO(() => value)
}
constructor(fn) {
this._value = fn
}
map(fn) {
return new IO(fp.flowRight(fn, this._value))
}
join() {
return this._value()
}
// 同时调用map和join方法
flatMap(fn) {
return this.map(fn).join()
}
}
// 读取文件
let readFile = filename => {
return new IO(() => {
return fs.readFileSync(filename, 'utf-8')
})
}
// 打印函数
let print = x => {
return new IO(() => {
console.log(x)
return x
})
}
// 调用
let f = readFile('package.json').flatMap(print).join() // 以下为打印
/**
*
{
"name": "moudle1",
"version": "1.0.0",
"description": "",
"main": "1-1-01First-class-Function.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"folktale": "^2.3.2",
"lodash": "^4.17.21"
}
}
*/
// 执行顺序详解
/**
* readFile读取了文件，然后返回了一个IO函子
* 调用flatMap是用readFile返回的IO函子调用的
* 并且传入了一个print函数参数
* 调用flatMap的时候，内部先调用map，当前的print和this._value进行合并，合并之后返回了一个新的函子
* （this._value就是readFile返回IO函子的函数：
* () => {
return fs.readFileSync(filename, 'utf-8')
}
* ）
* flatMap中的map函数执行完，print函数返回的一个IO函子，里面包裹的还是一个IO函子
* 下面调用join函数，join函数就是调用返回的新函子内部的this._value()函数
* 这个this._value就是之前print和this._value的组合函数，调用之后返回的就是print的返回结果
* 所以flatMap执行完毕之后，返回的就是print函数返回的IO函子
*
*/
r = readFile('package.json')
// 处理数据，直接在读取文件之后，使用map进行处理即可
.map(fp.toUpper)
.flatMap(print)
.join()
// 读完文件之后想要处理数据，怎么办？
// 直接在读取文件之后调用map方法即可
/**
*
{
"NAME": "MOUDLE1",
"VERSION": "1.0.0",
"DESCRIPTION": "",
"MAIN": "1-1-01FIRST-CLASS-FUNCTION.JS",
"SCRIPTS": {
"TEST": "ECHO \"ERROR: NO TEST SPECIFIED\" && EXIT 1"
},
"KEYWORDS": [],
"AUTHOR": "",
"LICENSE": "ISC",
"DEPENDENCIES": {
"FOLKTALE": "^2.3.2",
"LODASH": "^4.17.21"
}
}
*/
3、Monad函子小结
什么是Monad： 具有静态的of方法和join方法的函子
什么时候使用Monad： 当一个函数返回一个函子的时候，我们就要想到monad，monad可以帮我们解决函子嵌套的问题。
当我们想要返回一个函数，这个函数返回一个值，这个时候可以调用map 方法
当我们想要去合并一个函数，但是这个函数返回一个函子，这个时候我们要用flatMap 方法
函数式编程总结
函数式编程-->认识函数式编程
函数式编程-->函数相关复习
函数相关复习-->函数是一等公民
函数相关复习-->高阶函数
函数相关复习-->闭包
函数式编程-->函数式编程基础
函数式编程基础-->lodash
函数式编程基础-->纯函数
函数式编程基础-->柯里化
函数式编程基础-->管道
函数式编程基础-->函数组合
函数式编程-->函子
函子-->Functor
函子-->MayBe
函子-->Either
函子-->IO
函子-->Task
Task-->folktale
函子-->Pointed
函子-->Monad
