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

函数式编程范式

为什么学习函数式编程

  • 函数式编程是随着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)
    }
  })

你可能感兴趣的:(学习笔记-函数式编程范式)