学习笔记-函数式编程范式

函数式编程范式

为什么学习函数式编程

• 函数式编程是随着react的流行受到了越来越多的关注
• vue 3也开始拥抱函数式编程
• 函数式编程可以抛弃this
• 打包过程中可以更好的利用tree shaking过滤无用代码
• 方便测试和并行处理

当前也有很多库可以帮助我们进行函数式开发，eg：lodash，underscore，ramda

函数式编程概念

函数式编程（Functional Programming，FP），FP是编程范式之一。
编程范式还有：

• 面向过程编程： 按照步骤，一步一步来实现。
• 面向对象编程：把现实世界中的事物抽象成程序世界中的类和对象，通过封装，继承和多态来演示事物事件的联系
• 函数式编程：把现实世界的事物和事物之间的联系抽象到程序世界。

程序的本质：根据输入，经过运算，获得输出。执行这个过程的就是函数。而函数式编程就是对这个运算过程进行抽象，但是面向对象编程是对事物进行抽象。

函数式编程中的函数指的不是程序中的函数（方法），指的是数学中的函数，就是一个映射关系，eg： y = sin(x)。此时，相同的输入始终要得到相同的输出（纯函数）。

//非函数式
let num1 = 1
let add = num1 + 1

//函数式
function add1(num){
    return num + 1
}
let add = add1(2)

函数是一等公民

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

eg：

//函数表达式就是把函数赋值给变量
let fun = function (){
    console.log('hello')
}

//改造成赋值给变量
const obj = {
    show(params){ return otherObj.show(params) }
}
//修改后
const obj = {
    show: otherObj.show
}

高阶函数（Higher-order function）

高阶函数就是把函数作为参数传递给另一个函数，或者把函数作为另一个函数的返回结果。

// 利用高阶函数-将函数作为参数写一个forEach函数
function forEach(arr, fn) {
  for (let i = 0; i < arr.length; i++) {
    fn(arr[i], i)
  }
}
const arr = [1, 2, 3, 4, 5]
forEach(arr, (item, index) => {
    console.log(item, index)
})

// 利用函数可以作为返回值，实现一个once函数-只执行一次
function once(fn) {
  let mark = false
  return function () {
    if (!mark) {
      mark = true
      fn.apply(this, arguments)
    }
  }
}
let pay = once((money) => {
  console.log(`${money} RMB`)
})
pay(100)
pay(100)
pay(100)
pay(100)

高阶函数的意义：

• 抽象通用的问题
• 屏蔽细节，只关注我们的目标

常用的高阶函数：
forEach, filter, map, every, some...

闭包

在把函数当作返回值返回时，内部函数可以访问外部函数中的变量，就形成了闭包。

function outter() {
 let num = 0
 return function inner() {
   console.log(num++)
 }
}
let o = outter()
o()
o()
o()

以上例子，如果outter内部没有闭包，outter调用完毕后，outter从执行栈上移除，同时它内部的变量num也会从内存中移除，但是内部有了inner引用了变量num，outter从执行栈移除后，num因为还被inner引用，不会被移除，即-堆上的作用域成员因为被外部引用不能释放。

纯函数

纯函数：相同的输入永远会得到相同的输出，而且没有任何可观察的副作用。

lodash是要给纯函数的功能库，提供了对数组，数字，对象，字符串，函数等操作的一些方法。

eg：数组的slice方法是纯函数，splice是不纯的函数。

• slice：返回数组中的指定部分，不会改变原数组。
• splice：对数组进行操作返回该数组，会改变原数组。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
// slice 没有修改原数组，每次返回结果一样，是纯函数
console.log(arr.slice(1, 3))  //[ 2, 3 ]
console.log(arr.slice(1, 3))  //[ 2, 3 ]
console.log(arr.slice(1, 3))  //[ 2, 3 ]
// splice 修改了原数组，每次返回结果不一样，是不纯的函数
console.log(arr.splice(1, 3)) //[ 2, 3, 4 ]
console.log(arr.splice(1, 3)) //[ 5, 6, 7 ]
console.log(arr.splice(1, 3)) //[ 8, 9 ]

纯函数的好处：

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

// 自己实现一个类似lodash中的 memoize
function getArea(r) {
  console.log(r)
  return Math.PI * r * r
}
function memoize(f) {
  let cache = {}
  return function () {
    let key = JSON.stringify(arguments)
    cache[key] = cache[key] || f.apply(f, arguments)
    return cache[key]
  }
}
let getAreaWithMemory = memoize(getArea)
console.log(getAreaWithMemory(4)) // 4 50.26548245743669
console.log(getAreaWithMemory(4)) // 50.26548245743669
console.log(getAreaWithMemory(5)) // 5 78.53981633974483

• 可测试
• 并行处理。在多线程环境（eg：Web Worker）下并行操作共享的内存数据很可能出现意外，纯函数不需要访问共享的内存数据，所以在并行环境下可以任意运行纯函数。

纯函数的副作用：

eg:

// 不纯
let mini = 18
function checkAge(age) {
  return age >= mini
}
// 纯的，有硬编码
function checkAge(age) {
  let mini = 18
  return age >= mini
}

如果函数依赖于外部状态，就无法保证输出相同，就会带来副作用，变得不纯。

在函数内部定义一个变量的值，又会出现硬编码。不过这个可以通过柯里化解决。

副作用不可完全禁止，尽可能控制他们在可控范围内发生。

柯里化

使用柯里化可以解决硬编码的问题。

柯里化： 当一个函数有多个参数的时候，先传递一部分参数调用它，这部分参数以后永远不变，然后返回一个新的函数接受剩余的参数，返回结果。
eg：

let checkAge = min => (age => age >= min)
let checkAge18 = checkAge(18)
let checkAge20 = checkAge(20)

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

lodash中的柯里化函数

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

lodash中的curry方法可以将一个多元函数，转换为任意多元函数。

自己实现一个lodash.curry

function curry(fn){
  return function a(...args){
    if(args.length < fn.length){
      return function(){
        return a(...args.concat(Array.from(arguments)))
      }
    }
    return fn(...args)
  }
}
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))

总结

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

函数组合

纯函数和柯里化很容易写出洋葱代码，eg：_.toUpper(_.first(_.reverse(arr)))，而以函数组合的形式 fn = compose(f1, f2, f3) 把中间过程的函数合并成一个函数，看起来更简洁。函数组合默认是从右到左执行，所以执行顺序是 f3, f2, f1。

// 函数组合演示
// 洋葱代码并没有被省略，而是被封装起来了
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([1, 2, 3, 4, 5]))  //5

lodash中的组合函数

• 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']))

自己实现flowRight

function compose(...args) {
  return function (value) {
    return args.reverse().reduce((pre, pro) => {
      return pro(pre)
    }, value)
  }
}

// 改为箭头函数
const compose = (...args) => value => args.reverse().reduce((pre, pro) => pro(pre), value)

const reverse = arr => arr.reverse()
const first = arr => arr[0]
const toUpper = s => s.toUpperCase()
const f = compose(toUpper, first, reverse)
console.log(f(['one', 'two', 'three']))  // THREE

函数组合-结合律

函数组合要满足结合律，即：

let associative = comose(compose(f,g),h) == compose(f,compose(g,h)) //true

函数组合-调试

函数组合的方式，如果最终结果不是预期，很难找出是哪一步出了错，eg：

// NEVER SAY DIE  -->  never-say-die
//将左侧字符串转换成右侧的字符串，要经过分割，变小写，再用-隔开
const log = _.curry((tag, v) => {
  console.log(tag, v)
  return v
})
//为了满足函数组合参数都是一个，将split和join柯里化
// _.toLower()
// _.split()
const split = _.curry((sep, str) => _.split(str, sep))
// _.join()
const join = _.curry((sep, arr) => _.join(arr, sep))

const f = _.flowRight(join('-'), _.toLower, split(' '))
console.log(f('NEVER SAY DIE')) //n-e-v-e-r-,-s-a-y-,-d-i-e

打印后发现结果和预期不一样，但是不好定位错误位置，我们可以给函数组合的每个函数中间加个log来打印每次结果是否正确。

const log = (v) => {
  console.log(v)
  return v
}
const f = _.flowRight(join('-'), _.toLower, log, split(' ')) //[ 'NEVER', 'SAY', 'DIE' ]
const f = _.flowRight(join('-'), log, _.toLower, split(' ')) //never,say,die

可以看到，在_.toLower后，数组变成了字符串格式，和预期不一样。但是这样打log，如果同时放入多个log，分不清打印的是哪一步，可以通过改造：

// tag 用来标注位置，v是结果，用_.curry柯里化
const log = _.curry((tag, v) => {
  console.log(tag, v)
  return v
})
const f = _.flowRight(join('-'), log('lower 后'), _.toLower, log('split 后'), split(' '))
// split 后 [ 'NEVER', 'SAY', 'DIE' ]
// lower 后 never,say,die

lodash-fp模块

lodash中的fp模块提供了实用的对函数式编程友好的方法，并且函数优先，数据滞后，自动柯里化。

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

将前面的例子做修改

const f = fp.flowRight(fp.join('-'),  fp.split(' '),  fp.toLower)
console.log(f('NEVER SAY DIE'))  // never-say-die

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

首先执行console.log(_.map(['23','8','10'], parseInt)) // [ 23, NaN, 2 ]，想将数组中的字符串转为数字，但是最终拿到的结果和预期不一样，让我们看一下_.map的解释：

image.png

函数接收到的是三个参数，value,index,array，所以此时parseInt是这样执行的：

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

parseInt的第二个参数是几进制，所以此时结果不符合预期。但是看一下fp.map方法：

image.png

可以看到fp.map方法中的函数只接受一个参数,console.log(fp.map(parseInt, ['23', '8', '10'])) //[ 23, 8, 10 ],parseInt接受一个参数，就不会出现刚才的问题。

Point Free

Point Free是一种编程的风格，具体形式就是函数组合。

• 不需要指明处理的数据
• 只需要合成运算规则
• 需要定义一些辅助的基本运算函数
  eg：const f = fp.flowRight(fp.join('-'), fp.split(' '), fp.toLower)
  这个例子中将运算过程合成，没有指明要处理的数据。

// Hello      Word => hello_world
// fp 中的方法都是柯里化的
// fp.replace可以接受3个参数，1 匹配的正则，  2 替换成什么  3 要修改的字符串
// fp.replace是柯里化所以接收两个参数可以返回一个函数，这个函数可以接受一个字符串
const f = fp.flowRight(fp.replace(/\s+/g, '_'), fp.toLower)
console.log(f('Hello      Word')) // hello_word

案例：

// 把一个字符串中的首字母提取，转换成大写，使用. 作为分隔符
// world wild web ==> W. W. W
const f = fp.flowRight(fp.toUpper, fp.join('. '), fp.map(fp.first), fp.split(' '), fp.replace(/\s+/g, ' '))
// const f = fp.flow(fp.replace(/\s+/g, ' '), fp.split(' '), fp.map(fp.first), fp.join('. '), fp.toUpper)
console.log(f('world  wild  web')) // W. W. W

Functor(函子)

• 容器：包含值和值的变形关系（函数）
• 函子：是一个特殊的容器，通过一个普通的对象来实现，该对象具有map方法，map方法可以运行一个函数对值进行处理。

// Functor 函子
class Container {
  constructor(value) {
    // 维护一个不对外公布的静态变量
    this._value = value
  }
  // map方法通过fn处理值，并通过新的函子返回
  map(fn) {
    return new Container(fn(this._value))
  }
}
// map方法返回的是新的函子，所以还可以调用map方法
const lr = new Container(5)
  .map(v => v + 3)
  .map(v => v * 2)

console.log(lr)  // Container { _value: 16 }

上边的new Container可以通过封装：

class Container {
  static of(value) {
    return new Container(value)
  }
  constructor(value) {
    // 维护一个不对外公布的静态变量
    this._value = value
  }
  // map方法通过fn处理值，并通过新的函子返回
  map(fn) {
    return Container.of(fn(this._value))
  }
}
// map方法返回的是新的函子，所以还可以调用map方法
const lr = Container.of(5)
  .map(v => v + 3)
  .map(v => v * 2)

console.log(lr)  // Container { _value: 16 }

总结：

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

MayBe函子

• 对编程过程中可能遇到的错误做相应的处理
• 对外部的空值情况做处理（控制副作用在允许的范围）

class MayBe {
  static of(value) {
    return new MayBe(value)
  }
  constructor(value) {
    this._value = value
  }
  // 通过 isNothing 判断是否为空值
  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(null)
  .map(x => x.toUpperCase())
console.log(r)  // MayBe { _value: null }

但是，以下这种情况，不会出错，但是什么时候出现null不知道

let r = MayBe.of('hello world')
  .map(x => x.toUpperCase())
  .map(x => null)
  .map(x=> x.toUpperCase())
console.log(r)  // MayBe { _value: null }

可以通过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))
  }
}
function parseJson(str) {
  try {
    return Right.of(JSON.parse(str))
  } catch (e) {
    return Left.of({ error: e.message })
  }
}

let r1 = parseJson('{name:zs}')
console.log(r1)  // Left { _value: { error: 'Unexpected token n in JSON at position 1' } }
let r2 = parseJson('{"name":"zs"}')
  .map(x => x.name.toUpperCase())
console.log(r2) // Right { _value: 'ZS' }

使用Left来处理异常，Right来做正确的操作。

IO函子

• IO是input，output的意思。IO函子中的_value 是一个函数，整理把函数作为值来处理。
• IO函子可以把不纯的动作存储到_value中，延迟执行，包装它的操作是纯的。
• 把不纯的操作交给调用者来处理。

// IO 函子
class IO {
  static of(value) {
    // this._value 就是这里的function
    return new IO(function () {
      return value
    })
  }
  constructor(fn) {
    this._value = fn
  }
  map(fn) {
    return new IO(fp.flowRight(fn, this._value))
  }
}
// process - node 进程
let r = IO.of(process).map(p => p.execPath)
console.log(r) // IO { _value: [Function (anonymous)] }
console.log(r._value())  // D:\node.js\node.exe

IO函子的问题

const fs = require('fs')
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()  // IO { _value: [Function (anonymous)] }
let r = cat('../../../package.json')._value()._value()
console.log(r)

如果出现函子嵌套IO(IO(x))，需要拿多层_value才能拿到值。

Monad函子

• Monad函子是可以变扁的Pointed函子IO(IO(x))
• 一个函子如果具有join和of两个方法并遵守一些定律就是一个Monad

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))
  }
  join() {
    return this._value()
  }
  flatMap(fn) {
    return this.map(fn).join()
  }
}
const fs = require('fs')
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()
console.log(r)

Pointed函子

• Pointed函子是时下你了of静态方法的函子
• of方法是为了避免使用new来创建对象，更深层的含义是of方法用来把值放到上下文Context。

Task函子

Folktale

folktale是一个标准的函数是编程库，但是它和lodash，ramda不同的是，他没有提供很多功能函数，而是提供了一些函数是处理的操作，eg：compose， curry等，一些函子Task，Either，MayBe等。

基本使用：

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)) // 3
console.log(f(1)(2))// 3

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

folktale 2.x 中的Task和 1.0中的Task区别很大，1.0用法接近前边的例子，下边一2.3.2来演示Task的使用：

Folktale中Task函子的使用

// Task 处理异步任务
const fs = require('fs')
const { task } = require('folktale/concurrency/task')
const { split, find } = require('lodash/fp')
function readFile(filename) {
  return task(resolver => 
  {
    fs.readFile(filename, 'utf-8', (err, data) => {
      if (err) resolver.reject(er)
      resolver.resolve(data)
    })
  })
}
readFile('../../../package.json')
  .map(split('\n'))
  .map(find(x => x.includes('version')))
  .run()
  .listen({
    onRejected: err => {
      console.log(err)
    },
    onResolved: value => {
      console.log(value)
    }
  })