函数式编程范式
函数式编程概念
函数式编程：
函数式编程是随着React的流行受到越来越多的关注
Vue3也开始拥抱函数式编程
可以抛弃this
打包过程中可以利用tree shaking过滤无用代码
方便测试、方便并行处理
帮我进行函数式开发的仓库：lodash underscore ramda
含义：Functional Programming,FP 是编程范式之一。
与面向对象编程（Object-oriented programming）和过程式编程（Procedural programming）并列的编程范式。
思维方式：
把类和对象，通过封装、继承、多态来演示事物事件的联系
函数式编程的函数指的不是程序中的函数（方法），而是数学中的映射关系
相同的输入始终要得到相同的输出
用来描述函数之前的映射
总结：
函数式编程的起源，是一门叫做范畴论（Category Theory）的数学分支。
函数式编程主要基于数学函数和它的思想。
最主要的特征是，函数是第一等公民,是编程式函数的基础。
强调将计算过程分成可以复用的函数，典型的例子就是map和reduce方法组合成MapReduce算法
本质上，函数式编程只是范畴论的运算方法，跟数理逻辑、微积分、行列式是同一类东西，都是数学方法，只是碰巧它能用来写程序。
总之，在函数式编程中，函数就是一个管道（pipe）。这头进去一个值，那头就会出来一个新的值，没有其他作用。
函数是一等公民
高阶函数
闭包
函数可以存储在变量中
函数作为参数
函数作为返回值
在js中函数就是个普通的对象（可以通过new Functioin()），我们可以把函数存储在变量、/数组中
他可以作为另一个函数的参数和返回值，甚至可以在程序运行时通过new Fucntion()创建一个新的函数
总结：
函数与字符串、数组、整型、对象等无区别，是js中的一种引用的数据类型，
可以被命名、赋值、当做参数传值，也可以当做返回值
高阶函数
把函数作为参数传递给另一个函数
把函数作为另一个函数的返回结果
function once(fn){
let done=false;
return function(){
if(!done){
done=true
reurn fn.apply(this,arguments)
}
}
}
let pay = once(function (money) {
console.log(`支付${
money} RMB`)
})
pay(5)
pay(5)
pay(5)
function fn(){
let msg='112'
return function(){
console.log(msg)
}
}
fn()()
总结：
高阶函数可以帮我们屏蔽细节，只需要关注我们的目标
高阶函数是用来抽象通用的问题
闭包
函数和周围的状态（词法环境）的引用捆绑在一起形成闭包
可以在另一个作用域掉用一个函数的内部函数并访问到该函数的作用域中的成员
闭包的本质：函数在执行的时候会放到一个执行栈上当函数执行完毕后会从执行栈移除，
但是堆上的作用域成员因为被外部引用不能被释放，因此内部函数依然可以访问外部函数的成员
function cn(pw){
return fucntion(num){
return Math.powr(num,pw)
}
}
let num2 = cn(2)
num2(3)
纯函数
概念：相同的输入永远会得到相同的输出，而且没有任何可观察的副作用
纯函数就类似数学中的函数（用来描述输入和输出的关系） y=f(x)
lodash 是一个纯函数的功能库，提供了对数组、数字、对象、字符串、函数等操作的一些方法
arr = [1,2,3,4]
arr.slice(0,3) [1,2,3]相同的输入永远会得到相同的输出
arr.slice(0,3) [1,2,3]相同的输入永远会得到相同的输出
arr.slice(0,3) [1,2,3]相同的输入永远会得到相同的输出
总结：
函数式编程不会保留计算的中间结果 所以变量是不可变的
我们可以把函数的执行结果交给另外一个函数去处理
lodash 其实就是一个纯函数
不会改变原数组的值
纯函数的好处
可缓存
纯函数对相同的输入始终有相同的结果，可以把纯函数的数据缓存起来
可测试
可以让测试变得更方便
并行处理
在多线程环境下并行操作共享的内存数据可能会出现意外情况
纯函数不需要访问共享的内存数据，所以在并行环境下，可以任意运行纯函数
纯函数的副作用
副作用让一个函数变得不纯
柯里化
当一个函数有多个参数时，先传递一部分参数调用它（这部分参数以后永远不变）
然后返回一个新的函数接收剩余的参数返回结果
function cn(min){
return function(max) {
return max >= min
}
}
var age = cn(18)
age(25)
lodash中的柯里化方法
_.curry(func)
功能：
创建一个函数，该函数接收一个或多个func的参数，如果func函数都被提供则先执行func并返回执行结果，否则继续返回函数等待接收剩余的参数
参数：需要柯里化的参数
Lodash介绍
Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。
Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。
Lodash 的模块化方法 非常适用于：
1.遍历 array、object 和 string 。
2.对值进行操作和检测 。
3.创建符合功能的函数
Lodash环境搭建
新建一个demo文件夹
安装lodash
npm init -y
初始化一个package.json
npm i lodash
运行
node 20200921-curry.js
演示lodash
//first /last /toUpper/reverse/each/includes/find/findIndex
const _ = require('lodash')
const arr = ['hello', 'world', 'data']
console.log(_.first(arr))
console.log(_.last(arr))
console.log(_.toUpper(arr))
console.log(_.toUpper(_.first(arr)))
console.log(arr.reverse())
console.log(_.reverse(arr))
//第一个参数是数组，第二个是回调函数
const r = _.each(arr, (item, idx) => {
console.log(item, idx)
})
console.log(r)
纯函数的好处
//纯函数的好处
//可缓存，因为纯函数对相同的输入有相同的输出，所以可以把纯函数的结果缓存起来
const _ = require('lodash')
//计算圆的面积,r是半径
function getArea(r) {
console.log(r)
return Math.PI*r*r
}
//执行多次结果人仍然一样
//获取返回结果
// let getAreaWidthData = _.memoize(getArea)
// console.log(getAreaWidthData(3))
// console.log(getAreaWidthData(3))
// console.log(getAreaWidthData(3))
// console.log(getAreaWidthData(3))
//模拟memoize的实现
//需要接收一个参数，参数是一个方法
function memoize (fun) {
//定义一个对象
let cache = {
}
//判断是否
return function () {
let key = JSON.stringify(arguments)
cache[key] = cache[key] || fun.apply(fun,arguments)
return cache[key]
}
}
let getAreaWidthData = memoize(getArea)
console.log(getAreaWidthData(3))
console.log(getAreaWidthData(3))
console.log(getAreaWidthData(3))
//可测试
//可以让测试更方便
//并行处理
//多线程并行操作共享内存可能会出现意外的情况
//纯函数不需要访问共享的内存数据，所以在并行的环境可以任意运行纯函数
//纯函数对于相同的输入永远会得到相同的输出，而且没有可观察的副作用
//如果一个函数依赖于外部的状态无法保证输出相同，就会导致函数的不纯
//类似于外部的全局变量
//配置文件，数据库。获取用户的输入
//所有的外部交互都有可能带来副作用,但是副作用不能完全禁止，尽可能控制在可控范围内
柯里化演示
//柯里化演示
//解决硬编码的问题
// function checkAge () {
// let min = 18
// return age >= min
// }
//普通的纯函数
// function checkAge(min, age) {
// return age >= min
// }
// console.log(checkAge(18, 20))
// console.log(checkAge(18, 24))
// console.log(checkAge(22, 21))
//函数的柯里化， 当函数有多个参数时，可以对这个函数进行改造，可以调用一个函数只传入部分参数，(这部分参数以后永远都不会发生变化)
//并让这个函数返回一个新的函数，新的函数传入剩余的参数，并且返回结果
// function checkAge (min) {
// return function (age) {
// return min >= age
// }
// }
let checkAge = min => (age => min >= age)
let checkAge18 = checkAge(18)
let checkAge20 = checkAge(20)
console.log(checkAge18(20))
console.log(checkAge18(24))
console.log(checkAge20(20))
console.log(checkAge20(24))
lodash中的通用的柯里化方法curry方法
//lodash中的通用的柯里化方法curry方法
// _.curry(fun)
// 功能：创建一个函数，
// 该函数接收一个或者多个fun参数，
// 如果fun所需要的参数都被提供则执行fun并返回执行的结果，
// 否则继续返回该函数并等待接收剩余的参数
// 参数：需要柯里化的函数
// 返回值：柯里化后的函数
//将任意多元函数转换成一元函数
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))
柯里化案例
//柯里化案例
const _ = require('lodash')
//判断字符串是否含有空格
// function match(reg, str) {
// return str.match(reg)
// }
const match = _.curry(function(reg, str) {
return str.match(reg)
})
const hasSpace = match(/\s+/g)
const hasNum = match(/\d+/g)
console.log(hasSpace('hello world'))
console.log(hasNum('123abc'))
console.log(hasNum('abc'))
let arrayData = ['find space', 'find_data']
// const filter = _.curry(function(fun, arr) {
// return arr.filter(fun)
// })
const filter = _.curry((fun, arr) => arr.filter(fun))
const findSpace = filter(hasSpace)
console.log(filter(hasSpace,arrayData))
console.log(findSpace(arrayData))
柯里化原理模拟
//柯里化原理
//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))
function curry(fun) {
//实参
return function curriedFn(...args) {
//判断实参和形参的长度
if(args.length < fun.length) {
return function() {
return curriedFn(...args.concat(Array.from(arguments)))
}
}
return fun(...args)
}
}
lodash柯里化总结
//函数的柯里化可以让我们给一个函数传递较少的参数得到一个已经记住了某些固定参数的新参数
//这是一种对函数的缓存
//让函数变得更灵活，让函数的粒度变得更小
//可以把多元函数变成一元函数，可以组合使用函数产生更大的功能
函数组合
函数的组合可以把细粒度的函数重新组合成一个新的函数
函数组合（compose）
如果一个函数要经过多个函数处理才能得到最终值，这个时候把 中间过程的函数合并成一个函数
函数就像是数据的管道，函数组合就是把管道组合起来，让数据穿过多个管道形成最终的结果
函数组合默认从右向左执行
纯函数和柯里化容易写出洋葱代码，h(g(f(x)))
//举个例子
// const _ = require('lodash')
// let arr = ['a', 'b', 'c']
// let arr1 = _.toUpper(_.first(_.reverse(arr)))
// console.log(arr1)
函数组合演示
//函数组合演示之取数组的最后一个元素
// let arr = [1, 2, 3, 4]
// function compose(f, g) {
// return function(value) {
// return f(g(value))
// }
// }
// function reverse(arr) {
// return arr.reverse()
// }
// function first(arr) {
// return arr[0]
// }
// const last = compose(first, reverse)
// console.log(last(arr))
lodash中的组合函数
lodash中的flow()和flowRight()，他们都可以组合多个函数
flow() 从左向右执行
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)
let arr = ['a', 'b', 'c', 'd']
//你不知道他有几个函数，所以用剩余函数进行处理
function compose(...args) {
return function(val) {
//initVal代表初始值，或者每次计算的返回的值,fn是args数组的里的函数 val初始值
return args.reverse().reduce(function(initVal, fn) {
return fn(initVal)
},val)
}
}
const f = compose(toUpper, first, reverse)
console.log(f(arr))
lodash中的组合函数要满足结合律
//我们既可以把g和h进行组合，还可以把 f和g进行组合，结果都是一样的
//结合律
// let f = compose(a, b, c)
// let acc = compose(compose(a, b), c) == compose(a, compose(b, c))
const _ = require('lodash')
let arr = ['a', 'b', 'c']
// let arr1 = _.flowRight(_.toUpper, _.first, _.reverse)
let arr2 = _.flowRight(_.flowRight(_.toUpper, _.first), _.reverse)
// let arr3 = _.flowRight(_.toUpper, _.flowRight(_.first, _.reverse))
//console.log(arr1(arr))
console.log(arr2(arr))
//console.log(arr3(arr))
lodash中的组合函数调试
//函数组合的调试
var str = 'NERVER SAY DIE'
const _ = require('lodash')
//通过trace进行进程追踪（tag是标记，v是回调成功或者失败后的数据）
const trace = _.curry((tag, v)=>{
console.log(tag,v)
return (tag,v)
})
//spe代表分隔符
const split = _.curry((spe, str) => _.split(str, spe))//split回调参数，第一个str是字符串，第二个spe是分隔符
//_.toLower()
//lodash中 对应的参数 函数和其他数据参数遵循数据优先，函数之后
//方法需要重新柯里化一下，然后通过lodash中的组合函数调用刚才柯里化之后的方法
//之后我们可以使用lodash中的fp模块，对方法进行改进，对数据重新进行处理
const map = _.curry((fn, arr) => _.map(arr, fn))
const join = _.curry((spe, arr) => _.join(arr, spe))
const f = _.flowRight(join('-'), trace('map之后打印的'), map(_.toLower), trace('split之后打印的'), split(' '))
console.log(f(str))
//调试其实就是通过trace查看返回的打印的数据
lodash/fp中的map与lodash的区别
// const _ = require('lodash')
// var arr = ['23', '8', '10']
// var data = _.map(arr, parseInt)
// //parseInt('23', 0, arr) 0代表下标和10进制
// //parseInt('8', 1, arr) 1代表下标和1进制
// //parseInt('10', 2, arr) 2代表下标和2进制
// //需要自己封装parsInt只接受一个参数
// console.log(data)
//接收函数的参数不一致
const fp = require('lodash/fp')
var arr = ['23', '8', '10']
var Aray = fp.map(parseInt, arr)
console.log(Aray)
PointFree
//PointFree
//是一种编程的风格，具体的实现是函数的组合
//我们可以把数据处理的过程定义成和数据无关的运算，不需要用到代表数据的那个参数，只需要把简单的步骤合并到一起
//在使用这种模式之前我们需要定义一些辅助的基本运算函数，实现的方式类似于之前学到的函数组合
//不需要指明处理的数据
//只需要合成运算的过程
//需要定义一些辅助的基本运算函数
const fp = require('lodash/fp')
const _ = require('lodash')
const trace = _.curry(function(tag, v){
console.log(tag, v)
return (tag, v)
})
var str = 'Hello World'
// const f = fp.flowRight(fp.join('-'),trace('split之后') , fp.split(' '), trace('lower之后') , fp.toLower)
// console.log(f(str))
var stred = 'world wild web'
const fed = fp.flowRight(fp.join('. '), fp.map(fp.flowRight(fp.first, fp.toUpper)), fp.split(' '))
const fed1 = fp.flowRight(fp.first, fp.toUpper)
console.log(fed(stred))
console.log(fed1(stred))
Functor函子
//Functor函子
//为什么要学习函数子
//我们虽然学习了一些函数编程的基础，
//但是还没演示在函数式编程中如何把副作用控制在可控范围内、异常处理、异步操作等
//包含值与值得变形关系（变形关系就是函子）
//函子是一个特殊的容器，通过一个普通的对象来实现，该对象具有map方法，map方法可以运行一个函数对值进行处理（变形关系）
// class Container {
// constructor(val) {
// this._val = val;//定义一个内容的变量不被访问到
// }
// map(fn) {
// return new Container(fn(this._val))
// }
// }
// let r = new Container(5)
// .map(x => x+1)//返回一个函子对象,新的函子对象保存新的值
// .map(x => x*x)
// console.log(r)
//调用Container对象总要使用new来创建，有点类似于面向对象语言
class Container {
static of(val){
return new Container(val)
}
constructor(val) {
this._val = val;//定义一个内容的变量不被访问到
}
map(fn) {
return new Container(fn(this._val))
}
}
const r1 = Container.of(5)
.map(x => x+1)
.map(x => x*x)
console.log(r1)
//总结
// 函数式编程不直接操作值，而是由函子组成
// 函子就是实现了map契约 的对象
// 可以把函子想象成一个盒子在这个盒子里封装一个对象、
// 我们要对这个值进行处理，需要个函子里的map方法传递一个处理值得函数（纯函数），由这个值进行处理
// 最终map方法返回一个包含新值的盒子
//如果函数参数传递为null或者undefined则函数直接会报错，就会变得不纯
Maybe函子
//编程内会碰到很多错误，需要对这些错误进行相应的处理
//Maybe函子和 Container函子的区别是可以对空值进行处理（控制副作用在允许的范围内）
class Maybe {
static of (val) {
return new Maybe(val)
}
constructor(val) {
this._value = val
}
map(fn) {
return this.isNothing() ? Maybe.of(null) : Maybe.of(fn(this._value))
}
isNothing() {
return this._value === null || this._value === undefined
}
}
const r1 = Maybe.of('Hello World')
.map(x => x.toUpperCase())
.map(x => null)
.map(x => x.split(' '))
console.log(r1)
Either函子
//Either两者中的一个，类似于if else的感觉
//异常会让函数变得不纯，either函子可以用于异常处理
class Either {
static of (val) {
return new Either(val)
}
constructor(val) {
this._value = val
}
map(fn) {
return this.isNothing() ? Either.of(null) : Either.of(fn(this._value))
}
isNothing() {
return this._value === null || this._value === undefined
}
}
const r1 = Either.of('Hello World')
.map(x => x.toUpperCase())
.map(x => null)
.map(x => x.split(' '))
console.log(r1)
folkTale函子
//folkTale函子避免出现回调的情况
//因为一部函数的实现过于复杂，我们使用folkTale来演示
//folkTale是一个标准的函数式编程库
//和lodash、ramda不同的是他没有提供很多功能函数
//只提供了一些函数式处理的操作，例如compose、curry等，一些函子Task、Either、Maybe等
//npm i folktale
const {
compose, curry} = require('folktale/core/lambda')
const {
toUpper, first} = require('lodash/fp')
let f = curry(2, (x, y)=>{
return x+y
})
console.log(f(1, 2))
console.log(f(1)(2))
let f1 = compose(toUpper, first)
let arr = ['rest', 'last']
const r1 = f1(arr)
console.log(r1)
folkTale-either
class Left {
static of(val) {
return new Left(val)
}
constructor(val){
this._val = val
}
map(fn) {
return this
}
}
class Right {
static of(val) {
return new Right(val)
}
constructor(val){
this._val = val
}
map(fn) {
return Right.of(fn(this._val))
}
}
// const r1 = Left.of(12).map(x => x+1)
// const r2 = Right.of(12).map(x => x+1)
// console.log(r1)
// console.log(r2)
function parseJson(str) {
try {
return Right.of(JSON.parse(str))
} catch(e) {
return Left.of(e.message)
}
}
const obj = {
name:'111'}
const obj1 = '{"name":"111"}'
const r3 = parseJson(obj).map(x => parseInt(x.name))
const r4 = parseJson(obj1).map(x => parseInt(x.name))
console.log(r3)
console.log(r4)
folktale-task
//folktale中的各个版本区别很大，我们用2.3.2来演示
//task处理异步的任务
//示例，读取package.json里的版本
const fs = require('fs')
const {
task } = require('folktale/concurrency/task')//返回的是一个函子对象
const {
Resolver } = require('dns')
const {
split, find} = require('lodash/fp')
function readFile(name) {
return task(reslover => {
fs.readFile(name, 'utf-8', (err, data) => {
if(err) reslover.reject(err)
reslover.resolve(data)
})//读取文件使用的两个参数，一个是文件名，一个是编码格式,还有个回调函数
} )//'接受的参数是固定的就叫resolve
}
readFile('package.json')
.map(split('\n'))
.map(find(x => x.includes('version')))
.run()//执行
.listen({
//监听执行
onRejected: err => {
console.log(err)
},
onResolved: val => {
console.log(val)
}
})
Ponited函子
// Ponited函子是为了实现of静态方法的函子
// of方法是为了避免使用new来创建对象，避免让我们的代码看起来像面向对象
// 更深层次的意义是of方法把值放到上下文Context（把值放入容器，使用map来处理）
使用IO函子的问题
//使用IO函子的问题
const fp = require('lodash/fp')
const fs = require('fs')
class IO {
static of (val) {
return new IO(function(){
return val
})
}
constructor(fn){
this._val = fn
}
map(fn) {
return new IO(fp.flowRight(fn, this._val))
}
}
let readFile = function(fileName) {
return new IO (function(){
return fs.readFileSync(name, 'utf-8')
})
}
let print = function(x) {
//print接收的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)
Monad函子
//Monad函子就是可以变扁的Pointed函子，IO(IO(x)),可以解决嵌套问题
//一个函子如果同时有join和of两个方法并遵守一些定律就是一个Monad
const fp = require('lodash/fp')
const fs = require('fs')
class IO {
static of (val) {
return new IO(function(){
return val
})
}
constructor(fn){
this._val = fn
}
map(fn) {
return new IO(fp.flowRight(fn, this._val))
}
join() {
return this._val()
}
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) {
//print接收的x变成了一个函子
return new IO (function(){
console.log(x)
return x
})
}
let cat = readFile('package.json')
// .map(x=>x.toUpperCase())
.map(fp.toUpper)
.flatMap(print)
.join()
console.log(cat)
//什么时候使用Monad、
//当一个函数返回一个函子，帮我们解决函子嵌套的问题
//当我们想要合并一个函数，这个函数想要返回一个值使用map方法，返回一个函子使用flatmap