命令式编程和声明式编程

拿泡茶这个事例进行区分命令式编程和声明式编程

  • 命令式编程
    1.烧开水(为第一人称)
    2.拿个茶杯
    3.放茶叶
    4.冲水
  • 声明式编程
    1.给我泡杯茶(为第二人称)
    举个 demo
  1. // 命令式编程
  2. const convert = function(arr) {
  3. const result = []
  4. for (let i = 0; i < arr.length; i++) {
  5. result[i] = arr[i].toLowerCase()
  6. }
  7. return result
  8. }
  9. // 声明式编程
  10. const convert = function(arr) {
  11. return arr.map(r => r.toLowerCase())
  12. }

什么是函数式编程

函数式编程是声明式编程的范式。在函数式编程中数据在由纯函数组成的管道中传递。

函数式编程可以用简单如交换律、结合律、分配律的数学之法来帮我们简化代码的实现。
它具有如下一些特性:

  • 纯粹性: 纯函数不改变除当前作用域以外的值;
  1. // 反面示例
  2. let a = 0
  3. const add = (b) => a = a + b // 两次 add(1) 结果不一致
  4. // 正确示例
  5. const add = (a, b) => a + b
  • 数据不可变性: Immutable
  1. // 反面示例
  2. const arr = [1, 2]
  3. const arrAdd = (value) => {
  4. arr.push(value)
  5. return arr
  6. }
  7. arrAdd(3) // [1, 2, 3]
  8. arrAdd(3) // [1, 2, 3, 3]
  9. // 正面示例
  10. const arr = [1, 2]
  11. const arrAdd = (value) => {
  12. return arr.concat(value)
  13. }
  14. arrAdd(3) // [1, 2, 3]
  15. arrAdd(3) // [1, 2, 3]

在后记 1 中对数组字符串方法是否对原值有影响作了整理

  • 函数柯里化: 将多个入参的函数转化为一个入参的函数;
  1. const add = a => b => c => a + b + c
  2. add(1)(2)(3)
  • 偏函数: 将多个入参的函数转化成两部分;
  1. const add = a => (b, c) => a + b + c
  2. add(1)(2, 3)
  • 可组合: 函数之间能组合使用
  1. const add = (x) => x + x
  2. const mult = (x) => x * x
  3. const addAndMult = (x) => add(mult(x))

柯里化(curry)

如下是一个加法函数:

  1. var add = (a, b, c) => a + b + c
  2. add(1, 2, 3) // 6

假如有这样一个 curry 函数, 用其包装 add 函数后返回一个新的函数 curryAdd, 我们可以将参数 a、b 进行分开传递进行调用。

  1. var curryAdd = curry(add)
  2. // 以下输出结果都相同
  3. curryAdd(1, 2, 3) // 6
  4. curryAdd(1, 2)(3) // 6
  5. curryAdd(1)(2)(3) // 6
  6. curryAdd(1)(2, 3) // 6

动手实现一个 curry 函数

核心思路: 若传进去的参数个数未达到 curryAdd 的个数,则将参数缓存在闭包变量 lists 中:

  1. function curry(fn, ...args) {
  2. const length = fn.length
  3. let lists = args || []
  4. let listLen
  5. return function (..._args) {
  6. lists = [...lists, ..._args]
  7. listLen = lists.length
  8. if (listLen < length) {
  9. const that = lists
  10. lists = []
  11. return curry(fn, ...that)
  12. } else if (listLen === length) {
  13. const that = lists
  14. lists = []
  15. return fn.apply(this, that)
  16. }
  17. }
  18. }

代码组合(compose)

现在有 toUpperCasereversehead 三个函数, 分别如下:

  1. var toUpperCase = (str) => str.toUpperCase()
  2. var reverse = (arr) => arr.reverse()
  3. var head = (arr) => arr[0]

接着使用它们实现将数组末位元素大写化输出, 可以这样做:

  1. var reverseHeadUpperCase = (arr) => toUpperCase(head(reverse(arr)))
  2. reverseHeadUpperCase(['apple', 'banana', 'peach']) // PEACH

此时在构建 reverseHeadUpperCase 函数的时候, 必须手动声明传入参数 arr, 是否能提供一个 compose 函数让使用者更加友好的使用呢? 类似如下形式:

  1. var reverseHeadUpperCase = compose(toUpperCase, head, reverse)
  2. reverseHeadUpperCase(['apple', 'banana', 'peach']) // PEACH

此外 compose 函数符合结合律, 我们可以这样子使用:

  1. compose(compose(toUpperCase, head), reverse)
  2. compose(toUpperCase, compose(head, reverse))

以上两种写法与 compose(toUpperCase, head, reverse) 的效果完全相同, 都是依次从右到左执行传参中的函数。
此外 composemap 一起使用时也有相关的结合律, 以下两种写法效果相等

  1. compose(map(f), map(g))
  2. map(compose(f, g))

动手实现一个 compose 函数

代码精华集中在一行之内, 其为众多开源库(比如 Redux) 所采用。

  1. var compose = (...args) => (initValue) => args.reduceRight((a, c) => c(a), initValue)

范畴论

范畴论是数学中的一个分支。可以将范畴理解为一个容器, 把原来对值的操作,现转为对容器的操作。如下图:
函数式编程入门 - 图1

学习函数式编程就是学习各种函子的过程。
函数式编程中, 函子(Functor) 是实现了 map 函数的容器, 下文中将函子视为范畴,模型可表示如下:

  1. class Functor {
  2. constructor(value) {
  3. this.value = value
  4. }
  5. map(fn) {
  6. return new Functor(fn(this.value))
  7. }
  8. }

但是在函数式编程中, 要避免使用 new 这种面向对象的编程方式, 取而代之对外暴露了一个 of 的接口, 也称为 pointed functor

  1. Functor.of = value => new Functor(value)

Maybe 函子

Maybe 函子是为了解决 this.value 为 null 的情形, 用法如下:

  1. Maybe.of(null).map(r => r.toUpperCase()) // null
  2. Maybe.of('m').map(r => r.toUpperCase()) // Maybe {value: &quot;M&quot;}

实现代码如下:

  1. class Maybe {
  2. constructor(value) {
  3. this.value = value
  4. }
  5. map(fn) {
  6. return this.value ? new Maybe(fn(this.value)) : null
  7. }
  8. }
  9. Maybe.of = value => new Maybe(value)

Either 函子

Either 函子 是为了对应 if...else... 的语法, 即非左即右。因此可以将之拆分为 LeftRight 两个函子, 它们的用法如下:

  1. var left = Left.of(1).map(r => r + 1) // Left {value: 1}
  2. var right = Right.of(1).map(r => r + 1) // Right {value: 2}

Left 函子实现代码如下:

  1. class Left {
  2. constructor(value) {
  3. this.value = value
  4. }
  5. map(fn) {
  6. return this
  7. }
  8. }
  9. Left.of = value => new Left(value)

Right 函子实现代码如下(其实就是上面的 Functor):

  1. class Right {
  2. constructor(value) {
  3. this.value = value
  4. }
  5. map(fn) {
  6. return new Right(fn(this.value))
  7. }
  8. }
  9. Right.of = value => new Right(value)

具体 Either 函数只是对调用 Left 函子Right 函子 作一层筛选, 其接收 fg 两个函数以及一个函子(Left or Right)

  1. var Either = function(f, g, functor) {
  2. switch(functor.constructor.name) {
  3. case 'Left':
  4. return f(functor.value)
  5. case 'Right':
  6. return g(functor.value)
  7. default:
  8. return f(functor.value)
  9. }
  10. }

使用 demo:

  1. Either((v) => console.log('left', v), (v) => console.log('def', v), left) // left 1
  2. Either((v) => (v) => console.log('def', v), console.log('rigth', v), rigth) // rigth 2

Monad 函子

函子会发生嵌套, 比如下面这样:

  1. Functor.of(Functor.of(1)) // Functor { value: Functor { value: 1 } }

Monad 函子 对外暴露了 joinflatmap 接口, 调用者从而可以扁平化嵌套的函子。

  1. class Monad {
  2. constructor(value) {
  3. this.value = value
  4. }
  5. map(fn) {
  6. return new Monad(fn(this.value))
  7. }
  8. join() {
  9. return this.value
  10. }
  11. flatmap(fn) {
  12. return this.map(fn).join()
  13. }
  14. }
  15. Monad.of = value => new Monad(value)

使用方法:

  1. // join
  2. Monad.of(Monad.of(1).join()) // Monad { value: 1 }
  3. Monad.of(Monad.of(1)).join() // Monad { value: 1 }
  4. // flatmap
  5. Monad.of(1).flatmap(r => r + 1) // 2

Monad 函子可以运用在 I/O 这种不纯的操作上将之变为纯函数的操作,目前比较懵懂,日后补充。

后记 1: 数组字符串方法小结(是否对原值有影响)

不会对原数组有影响的方法

slice
  1. var test = [1, 2, 3]
  2. var result = test.slice(0, 1)
  3. console.log(test) // [1, 2, 3]
  4. console.log(result) // [1]

concat
  1. var test = [1, 2, 3]
  2. var result = test.concat(4)
  3. console.log(test) // [1, 2, 3]
  4. console.log(result) // [1, 2, 3, 4]

对原数组有影响的方法

splice(这个需要特别记一下)
  1. var test = [1, 2, 3]
  2. var result = test.splice(0, 1)
  3. console.log(test) // [2, 3]
  4. console.log(result) // [1]

sort
  1. var arr = [2, 1, 3, 4]
  2. arr.sort((r1, r2) => (r1 - r2))
  3. console.log(arr) // [1, 2, 3, 4]

reverse
  1. var test = [1, 2, 3]
  2. var result = test.reverse()
  3. console.log(test) // [3, 2, 1]
  4. console.log(result) // [3, 2, 1]

push/pop/unshift/shift
  1. var test = [1, 2, 3]
  2. var result = test.push(4)
  3. console.log(test) // [1, 2, 3, 4]
  4. console.log(result) // 4

不会对原字符串造成影响的方法

substr/substring/slice
  1. // substr
  2. var test = 'abc'
  3. var result = test.substr(0, 1)
  4. console.log(test) // 'abc'
  5. console.log(result) // a
  6. // substring
  7. var test = 'abc'
  8. var result = test.substring(0, 1)
  9. console.log(test) // 'abc'
  10. console.log(result) // a
  11. // slice
  12. var test = 'abc'
  13. var result = test.slice(0, 1)
  14. console.log(test) // 'abc'
  15. console.log(result) // a

参考