函数式编程


  • 函数式编程概念

函数式编程是编程范式之一

思维方式：把现实世界的事物和事物之间的联系抽象到程序世界（对运算过程进行抽象）

其中的函数指的不是程序中的函数（方法），而是数学中的函数即映射关系

相同的输入始终要得到相同的输出


  • 为什么要学函数式编程

  1. React vue3都越来越多使用函数式编程

  2. 函数式编程可以抛弃this

  3. 打包过程中可以更好的利用tree shaking 过滤无用代码

  4. 方便测试、方便并行利用

  5. lodash、underscore、ramda等库可以进行函数式开发
    ```javascript //非函数式 let num1 = 2 let num2 = 3 let sum = num1 + num2

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

  2. - <br />函数可以存储在变量中<br />
  3. ```javascript
  4. let fn = function() {
  5.     console.log('hello');
  6. }
  7. fn()
  9. //示例
  10. const Controller = {
  11.     index (posts) { return Views.index(posts) }
  12. }
  13. //优化
  14. const Controller = {
  15.     index: Views.index
  16. }

  • 函数可作为参数
    ```javascript function forEach(arr, fun) { for(let i =0; i < arr.length; i++) {
    1.   fun(arr[i])
    } }

let arr = [1,2,3,4] forEach(arr, function(item) { console.log(item) })

  2. - <br />函数作为返回值<br />
  3. ```javascript
  4. function once(fun) {
  5.     let done = false
  6.     return function() {
  7.         if(!done) {
  8.             done = true;
  9.             return fun.apply(this, arguments)
  10.         }
  11.     }
  12. }
  14. let pay = once(function(money) {
  15.     console.log(${money});
  16. })
  17. pay(3)
  18. pay(3)

  • 使用高阶函数的意义
    • 抽象可以帮我们屏蔽细节，只需要关注我们的目标
    • 高阶函数是用来抽象通用的问题，即可复用

  • 常用的高阶函数

forEach map filter every some find/findIndex reduce sort

  • 模拟map
  1. const map = (arr, fun) => {
  2.     let res = [];
  3.     for(let value of arr) {
  4.         res.push(fun(value));
  5.     }
  6.     return res;
  7. }
  9. let arr = [1,2,3,4]
  10. arr = map(arr, v => v*v) 
  11. console.log(arr);

  • 闭包
    • 概念： 函数和其周围的状态(词法环境)的引用捆绑在一起形成闭包
      • 即可以在另一个作用域中调用一个函数的内部函数并访问到该函数的作用域中的成员
  1. function mfn() {
  2.     let msg = 'Hello';
  3.     return function() {
  4.         console.log(msg);
  5.     }
  6. }
  8. const fn = mfn();
  9. fn()
  11. //即在fn的作用域中，调用了mfn函数的内部函数，并访问了msg
  • 本质： 函数在执行的时候，会放到一个执行栈上，当函数执行完毕后会从执行栈上移除，但堆上的作用域成员因为被外部引用不能释放，因此内部函数依然可以访问外部函数成员

  • 闭包示例

这里优化后，求一个数的多少次方，进行了一个封装，传参变为一个

下面在浏览器中调试，可以查看发生闭包的整个流程：

(Call Stack 函数的调用栈,Scope 作用域,Closure 闭包)

函数式编程 - 图1

  1. // Math.pow(4, 2)
  2. // Math.pow(5, 2)
  3. function makePower (power) {
  4.   return function (number) {
  5.     return Math.pow(number, power)
  6.   }
  7. }
  9. // 求平方
  10. let power2 = makePower(2)
  11. let power3 = makePower(3)
  13. console.log(power2(4))
  14. console.log(power3(5))

  • 纯函数： 相同的输入永远会得到相同的输出

举例：

  • slice 纯函数，返回指定部分，不会改变原数组
  • splice 不纯函数，操作数组，改变原数组

函数式编程不会保留计算中间的结果，所以变量是不可变的


  • 纯函数好处

    • 可缓存，可提高程序的性能，因为计算是需要花费时间的
      ```javascript // 记忆函数 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 memoize (f) { let cache = {} return function () { let key = JSON.stringify(arguments) //以下判断以arguments参数为键值的，在cache缓存里有没有，有就直接返回缓存，没有就重新计算 cache[key] = cache[key] || f.apply(f, arguments) return cache[key] } }

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

  2.       - 可测试，纯函数始终会有输入和输出
  3.       - 并行处理
  4.          - 在多线程环境下并行操作共享的内存数据可能会出现意外情况
  5.          - 而纯函数不需要访问共享的内存数据，在并行环境下也可以任意运行纯函数
  9. - <br />副作用<br />
  10. ```javascript
  11. //不纯
  12. let mini = 18;
  13. function chechAge(age) {
  14.     return age >= mini
  15. }
  16. //纯  即把mini放进函数里
  • 副作用
    • 不纯函数，依赖于外部的状态，就无法保证输出的相同
  • 来源
    • 配置文件
    • 数据库
    • 获取用户的输入 等

  • 柯里化

当函数有多个参数的时候，对这个函数进行改造，调用一个函数只传递部分的参数，并且让这个函数返回一个新的函数，让新的函数去接收剩余的参数，并且返回相应的结果，这就是函数的柯里化。

  1. // 柯里化演示
  2.   //虽然是纯函数，但里面有硬编码
  3.   // function checkAge (age) {
  4.   //   let min = 18          
  5.   //   return age >= min
  6.   // }
  8.   // 普通的纯函数
  9.   // function checkAge (min, age) {
  10.   //   return age >= min
  11.   // }
  13.   //里面有多个参数，min基准值会重复调用
  14.   // console.log(checkAge(18, 20))
  15.   // console.log(checkAge(18, 24))
  16.   // console.log(checkAge(22, 24))
  19.   // 函数的柯里化
  20.   // function checkAge (min) {
  21.   //   return function (age) {
  22.   //     return age >= min
  23.   //   }
  24.   // }
  26.   // ES6写法
  27.   let checkAge = min => (age => age >= min)
  29.   let checkAge18 = checkAge(18)
  30.   let checkAge20 = checkAge(20)
  32.   console.log(checkAge18(20))
  33.   console.log(checkAge18(24))

  • Lodash中的柯里化方法
    • _.curry(func)
      • func即需要柯里化的函数
      • 返回柯里化后的函数，参数需要跟func函数数量一样
  1. // lodash 中的 curry 基本使用 
  2. const _ = require('lodash')
  4. function getSum (a, b, c) {
  5. return a + b + c
  6. }
  8. const curried = _.curry(getSum)
  10. console.log(curried(1, 2, 3))
  12. console.log(curried(1)(2, 3))
  14. console.log(curried(1, 2)(3))
  16. console.log(curried(1)(2)(3))

  • 柯里化案例
    ```javascript // 柯里化案例 // ‘’.match(/\s+/g)

const _ = require(‘lodash’)

const match = _.curry(function (reg, str) { return str.match(reg) })

const haveSpace = match(/\s+/g)

const filter = _.curry(function (func, array) { return array.filter(func) }) const findSpace = filter(haveSpace)

// console.log(haveSpace(‘helloworld’)) // console.log(haveNumber(‘abc’))

console.log(filter(haveSpace, [‘John Connor’, ‘John_Donne’]))

console.log(findSpace([‘John Connor’, ‘John_Donne’])) //最终优化成，可以判断一个数组的参数，并调用一个函数

  2. - <br />柯里化原理模拟<br />
  3. ```javascript
  4.     //函数形式写完
  5.     function getSum (a, b, c) {
  6.         return a + b + c
  7.     }
  9.     const curried = curry(getSum)
  11.     //如何调用函数
  12.     console.log(curried(1, 2, 3))
  13.     console.log(curried(1)(2, 3))
  14.     console.log(curried(1, 2)(3))
  16.     function curry (func) {
  17.         return function curriedFn(...args) {
  18.             // 判断实参和形参的个数
  19.             if (args.length < func.length) {
  20.                 // 如果只传部分函数，就返回一个函数
  21.                 //把之前的参数跟剩余的参数合并到一起，调用原来那个参数
  22.                 return function () {
  23.                     return curriedFn(...args.concat(Array.from(arguments)))
  24.                 }
  25.             }
  26.             //如果实形数量相同，直接调用原柯里化的函数，并把参数都传进去
  27.             return func(...args)
  28.         }
  29.     }

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


  • 函数组合

    • 洋葱代码： .toUpper(.first(_.reverse(array)));
    • 函数组合(compose): 如果一个函数要经过多个函数处理才能得到最终值，就可以把中间过程的函数合并成一个函数
    • 函数组合默认是从右到左执行

    • 函数组合满足结合律，先合哪执行，结果一样

      1. fn = compose(f1, f2, f3)
      2. b = fn(a);
      • 示例
  1.     // 函数组合演示
  2.     function compose (f, g) {
  3.         return function (value) {
  4.             return f(g(value))         
  5.         }
  6.     }
  8.     function reverse (array) {
  9.         return array.reverse()
  10.     }
  12.     function first (array) {
  13.         return array[0]
  14.     }
  16.     const last = compose(first, reverse)
  18.     console.log(last([1, 2, 3, 4]))

  • Lodash中的组合函数
    • flow() 从左至右运行
    • flowRight() 从右至左运行，使用更多
  1.     // lodash 中的函数组合的方法 _.flowRight()
  2.     const _ = require('lodash')
  4.     const reverse = arr => arr.reverse()
  5.     const first = arr => arr[0]
  6.     const toUpper = s => s.toUpperCase()
  8.     const f = _.flowRight(toUpper, first, reverse)
  9.     console.log(f(['one', 'two', 'three']))

  • 组合函数原理模拟
    ```javascript // 模拟 lodash 中的 flowRight

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

  1. //参数多少个不确定，所以用 ...args

// function compose (…args) { //_.flowRight需要返回一个函数，并需要对一个参数做处理，所以返回一个函数并传进去参数value // return function (value) { //.reduce()对数组中的每一个元素，去执行我们提供的一个函数 // return args.reverse().reduce(function (acc, fn) { //acc，是累计的结果，然后累计的结果每次执行fn函数 // return fn(acc) //acc，初始值是value // }, value) // } // }

const compose = (…args) => value => args.reverse().reduce((acc, fn) => fn(acc), value)

const f = compose(toUpper, first, reverse) console.log(f([‘one’, ‘two’, ‘three’]))

  2. - <br />函数式编程里面，会经常使用箭头函数，因为会使代码更简洁
  3. - <br />函数组合调试<br />
  4. ```javascript
  5.     //辅助调试函数
  6.     const trace = _.curry((tag, v) => {
  7.         console.log(tag, v)
  8.         return v
  9.     })
  11.     const f = _.flowRight(join('-'), trace('map 之后'), map(_.toLower), trace('split 之后'), split(' '))

  • Lodash-fp

fp提供了对我们函数式编程友好的方法，fp模块中提供的方法，都是已经被柯里化的，而且有多个参数的话，都是函数优先，数据置后，而lodash _.里面都是数据优先函数置后

示例

  1.     // 不使用fp
  2.     const split = _.curry((sep, str) => _.split(str, sep))
  4.     const join = _.curry((sep, array) => _.join(array, sep))
  6.     const map = _.curry((fn, array) => _.map(array, fn))
  8.     const f = _.flowRight(join('-'), trace('map 之后'), map(_.toLower), trace('split 之后'), split(' '))
  10.     //使用fp
  11.     const fp = require('lodash/fp')
  13.     const f = fp.flowRight(fp.join('-'), fp.map(fp.toLower), fp.split(' '))


  • Lodash-map方法的小问题
    ```javascript // lodash 和 lodash/fp 模块中 map 方法的区别 // const _ = require(‘lodash’)

    // console.log(_.map([‘23’, ‘8’, ‘10’], parseInt)) // // parseInt(‘23’, 0, array) // // parseInt(‘8’, 1, array) // // parseInt(‘10’, 2, array)

  1. const fp = require('lodash/fp')
  3. console.log(fp.map(parseInt, ['23', '8', '10']))
  2. - <br />Point Free 是一种编程风格
  3.    - 不需要指明处理的数据
  4.    - 只需要合成运算过程
  5.    - 需要定义一些辅助的基本运算函数
  9. ```javascript
  10.     const fp = require('lodash/fp')
  12.     const f = fp.flowRight(fp.replace(/\s+/g, '_'), fp.toLower)
  14.     console.log(f('Hello     World'))

  • Functor 函子
    • 函数式编程的运算不直接操作值，而是由函子完成
    • 函子就是一个实现了map契约的对象
    • 我们可以把函子想象成一个盒子，这个盒子里封装了一个值
    • 想要处理盒子中的值，我们需要给盒子的map方法传递一个处理值的函数（纯函数），由这个函数来对值进行处理
    • 最终map方法返回一个包含新值的盒子（函子）
  1.     // // Functor 函子
  2.     // class Container {
  3.     //   constructor (value) {
  4.     //     this._value = value
  5.     //   }
  7.     //   map (fn) {
  8.     //     return new Container(fn(this._value))
  9.     //   }
  10.     // }
  12.     // let r = new Container(5)
  13.     //   .map(x => x + 1)
  14.     //   .map(x => x * x)
  16.     // console.log(r)
  19.     class Container {
  20.         static of (value) {
  21.             return new Container(value)
  22.         }
  24.         constructor (value) {
  25.             this._value = value
  26.         }
  28.         map (fn) {
  29.             return Container.of(fn(this._value))
  30.         }
  31.     }
  33.     //这里有问题，传值可能为null的风险
  34.      let r = Container.of(5)
  35.                .map(x => x + 2)
  36.                .map(x => x * x)
  38.      console.log(r)

  • MayBe函子

如果传入的值为null或者undefined，会报错

所以这个函数变得不纯，这也是副作用

  1. // 演示 null undefined 的问题
  2. Container.of(null)
  3. .map(x => x.toUpperCase())
  1.     // MayBe 函子
  2.     class MayBe {
  3.         //外部要访问MayBe函子的话，需要去new 这个类，为了外部创建MayBe函子的时候更方便一些，我们给他设置一个静态的方法，new的过程就封装到了of方法里面，初始化这个构造函数
  4.         static of (value) {
  5.             return new MayBe(value)
  6.         }
  8.         //初始化一个构造函数，接收一个值，设置一个属性接收这个值，这个value是不希望外部访问的
  9.         constructor (value) {
  10.             this._value = value
  11.         }
  13.         //map方法，接收一个函数，来处理这个值，并返回一个新的函子，返回的结果作为这个函数新的参数,这里如果传起来的值为null，直接返回一个值为null的函子，不应该调用fn，可能会出现危险
  14.         map (fn) {
  15.             return this.isNothing() ? MayBe.of(null) : MayBe.of(fn(this._value))
  16.         }
  18.         isNothing () {
  19.             return this._value === null || this._value === undefined
  20.         }
  21.     }
  23.     // let r = MayBe.of(null)
  24.     //           .map(x => x.toUpperCase())
  25.     // console.log(r)
  26.     //会打印出一个值为null的函子：
  27.     // MayBe { _value: null }
  30.     let r = MayBe.of('hello world')
  31.       .map(x => x.toUpperCase())
  32.       .map(x => null)
  33.       .map(x => x.split(' '))
  34.     console.log(r)
  35.     //MayBe函子的问题是，虽然我们可以控制null的传值，但多次调用map方法的时候，不知道是什么时候传的null
  • MayBe函子的作用就是可以对外部的空值情况做处理（控制副作用在允许的范围内）

  • Either 函子
    • 类似if…else…
    • 异常会让函数变的不纯，Either函子可以用来做异常处理
  1.     // Either 函子
  2.     class Left {
  3.         static of (value) {
  4.             return new Left(value)
  5.         }
  7.         constructor (value) {
  8.             this._value = value
  9.         }
  11.         map (fn) {
  12.             return this
  13.         }
  14.     }
  16.     class Right {
  17.         static of (value) {
  18.             return new Right(value)
  19.         }
  21.         constructor (value) {
  22.             this._value = value
  23.         }
  25.         map (fn) {
  26.             return Right.of(fn(this._value))
  27.         }
  28.     }
  30.     // let r1 = Right.of(12).map(x => x + 2)
  31.     // let r2 = Left.of(12).map(x => x + 2)
  33.     // console.log(r1)
  34.     // console.log(r2)
  37.     function parseJSON (str) {
  38.         try {
  39.             return Right.of(JSON.parse(str))
  40.         } catch (e) {
  41.             return Left.of({ error: e.message })
  42.         }
  43.     }
  45.     //错误会进入Left，显示错误信息
  46.     // let r = parseJSON('{ name: zs }')
  47.     // console.log(r)
  49.     let r = parseJSON('{ "name": "zs" }')
  50.             .map(x => x.name.toUpperCase())
  51.     console.log(r)

  • IO 函子 输入输出
    • IO 函子中的_value是一个函数，这里是把函数作为值来处理
    • IO 函子可以把不纯的动作存储到_value中，延迟执行这个不纯的操作（惰性执行），包装当前的操作
    • 把不纯的操作交给调用者来处理
  1.     // IO 函子
  2.     const fp = require('lodash/fp')
  4.     class IO {
  5.         static of (value) {
  6.             return new IO(function () {
  7.             return value
  8.             })
  9.         }
  11.         constructor (fn) {
  12.             this._value = fn
  13.         }
  15.         map (fn) {
  16.             return new IO(fp.flowRight(fn, this._value))
  17.         }
  18.     }
  20.     // 调用
  21.     let r = IO.of(process).map(p => p.execPath)
  22.     // console.log(r)
  23.     console.log(r._value())

  • Folktale

    • 一个标准的函数式编程库

    • 没有提供很多功能函数

    • 但提供了一些函数式处理的操作，如： compose curry等，一些函子如 Task Either Maybe等

    • 异步任务实现过于复杂，我们使用foletale中的Task来演示
  1.     // folktale 中的 compose、curry
  2.     const { compose, curry } = require('folktale/core/lambda')
  3.     const { toUpper, first } = require('lodash/fp')
  4.     //柯里化，这里多传了一个参数2，意味着传入两个参数
  5.     // let f = curry(2, (x, y) => {
  6.     //   return x + y
  7.     // })
  9.     // console.log(f(1, 2))
  10.     // console.log(f(1)(2))
  12.     //函数组合
  13.     let f = compose(toUpper, first)
  14.     console.log(f(['one', 'two']))


  • Task 函子处理异步任务

    1.   // Task 处理异步任务
    2.   const fs = require('fs')
    3.   const { task } = require('folktale/concurrency/task')
    4.   const { split, find } = require('lodash/fp')
    6.   function readFile (filename) {
    7.       return task(resolver => {
    8.           //filename 文件路径,读取文件
    9.           fs.readFile(filename, 'utf-8', (err, data) => {
    10.           //失败
    11.           if (err) resolver.reject(err)
    12.           //成功
    13.           resolver.resolve(data)
    14.           })
    15.       })
    16.   }
    18.   //当前目录下读书文件
    19.   readFile('package.json')
    20.       //函子都会有map方法，在这里处理我们拿到的结果 
    21.       //package.json里面都是一行一行的，我们把他们以行分隔成数组，然后找到包含'version'的那个元素
    22.       .map(split('\n'))
    23.       .map(find(x => x.includes('version')))
    24.       .run()  //函子提供的run()方法读取文件
    25.       //函子提供的listen()监听的方法
    26.       .listen({   
    27.           //失败
    28.           onRejected: err => {
    29.               console.log(err)
    30.           },
    31.           //成功
    32.           onResolved: value => {
    33.               console.log(value)
    34.           }
    35.   })
    36.   //执行结果
    37.   //"version": "1.0.0",


  • Pointed 函子

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

  • Monad 函子
    • IO函子的问题，调用嵌套函子中的函数的时候不方便
  1. // IO(IO(x))
  2. let r = cat('package.json')._value()._value()
  • Monad 函子是可以变扁的Pointed函子,变扁就是解决嵌套的问题
  • 一个函子如果具有join和of两个方法，并遵守一些定律，就是一个Monad
  1. // IO Monad
  2. const fs = require('fs')
  3. const fp = require('lodash/fp')
  5. class IO {
  6.     static of (value) {
  7.         return new IO(function () {
  8.             return value
  9.         })
  10.     }
  12.     constructor (fn) {
  13.         this._value = fn
  14.     }
  16.     map (fn) {
  17.         return new IO(fp.flowRight(fn, this._value))
  18.     }
  20.     join () {
  21.         return this._value()
  22.     }
  24.     //flatMap的作用就是把map和join一起用，变扁平
  25.     flatMap (fn) {
  26.         return this.map(fn).join()
  27.     }
  28. }
  30. //虽然依赖外部文件，但当前的操作是纯的
  31. let readFile = function (filename) {
  32.     return new IO(function () {
  33.         return fs.readFileSync(filename, 'utf-8')
  34.     })
  35. }
  37. let print = function (x) {
  38.     return new IO(function () {
  39.         console.log(x)
  40.         return x
  41.     })
  42. }
  44. let r = readFile('package.json')
  45.         // .map(x => x.toUpperCase())
  46.         .map(fp.toUpper)
  47.         .flatMap(print)
  48.         .join()
  50. console.log(r)