JS 函数式编程

Love The Way You Lie 2022-12-19 11:48 105阅读 0赞

为什么要学习函数编程以及什么是函数式编程  
函数式编程的特性(纯函数、柯里化、函数组合等)  
函数式编程的应用场景  
函数式编程库 Lodash

## 为什么要学习函数式编程（FB） ##

#### 函数式编程是非常古老的一个概念，早于第一台计算机的诞生，函数式编程的历史。 ####

那我们为什么现在还要学函数式编程？

函数式编程是随着 React 的流行受到越来越多的关注(例如react的函数组件，redux也是基于函数式编程的思想，想要学好react那么久必须学好FP)。  
Vue 3也开始拥抱函数式编程。  
函数式编程可以抛弃 this。  
打包过程中可以更好的利用 tree shaking 过滤无用代码。  
方便测试、方便并行处理。  
有很多库可以帮助我们进行函数式开发：lodash、underscore、ramda。

## 什么是函数式编程 ##

#### 函数式编程(Functional Programming, FP)，FP 是编程范式之一，我们常听说的编程范式还有面向过程编程、面向对象编程。面向对象编程的思维方式：把现实世界中的事物抽象成程序世界中的类和对象，通过封装、继承和多态来演示事物事件的联系函数式编程的思维方式：把现实世界的事物和事物之间的联系抽象到程序世界（对运算过程进行抽象） ####

程序的本质：根据输入通过某种运算获得相应的输出，程序开发过程中会涉及很多有输入和  
输出的函数  
x -> f(联系、映射) -> y，y=f(x)

###### 函数式编程中的函数指的不是程序中的函数(方法)，而是数学中的函数即映射关系，例如：y = sin(x)，x和y的关系 ######

相同的输入始终要得到相同的输出(纯函数)  
函数式编程用来描述数据(函数)之间的映射

// 非函数式
     let num1 = 2 
     let num2 = 3 
     let sum = num1 + num2 
     console.log(sum)
      // 函数式 
      function add (n1, n2) { 
       return n1 + n2
        }
      let sum = add(2, 3) 
      console.log(sum)

## 函数是一等公民 ##

MDN First-class Function  
函数可以存储在变量中  
函数作为参数  
函数作为返回值

在 JavaScript 中函数就是一个普通的对象 (可以通过 new Function() )，我们可以把函数存储到变量/  
数组中，它还可以作为另一个函数的参数和返回值，甚至我们可以在程序运行的时候通过 new Function(‘alert(1)’) 来构造一个新的函数。

// 把函数赋值给变量 
    let fn = function () 
    {  console.log('Hello First-class Function') }
    fn() // 一个示例 
    const BlogController = {  index (posts) {  return Views.index(posts) }, show (post) {  return Views.show(post) }, create (attrs) {  return Db.create(attrs) }, update (post, attrs) {  return Db.update(post, attrs) }, destroy (post) {  return Db.destroy(post) } }
    // 优化
     const BlogController = {  index: Views.index, show: Views.show, create: Db.create, update: Db.update, destroy: Db.destroy}

### 什么是高阶函数 ###

高阶函数 (Higher-order function)  
可以把函数作为参数传递给另一个函数  
可以把函数作为另一个函数的返回结果  
函数作为参数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 2]

### 使用高阶函数的意义 ###

抽象可以帮我们屏蔽细节，只需要关注与我们的目标  
高阶函数是用来抽象通用的问题  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 3]  
常用高阶函数 forEach map filter every some find/findIndex reduce sort

/* 手写常用高阶函数 */
    // let arr = [1, 3, 4, 7, 8]
    // const map = function(arr,fn){ 
    // let result = []
    // for (let item of arr) { 
    // result.push(fn(item))
    // }
    // return result
    // }
    
    // console.log(map(arr,v => v * v));
    
    // let arr = [1, 3, 4, 7, 8]
    // const every = function(arr,fn){ 
    // let result = true
    // for (let item of arr) { 
    // if(!fn(item)){ 
    // result = false
    // break
    // }
    // }
    // return result
    // }
    
    // console.log(every(arr,v => v > 1));
    
    // let arr = [1, 3, 4, 7, 8]
    // const some = function(arr,fn){ 
    // let result = false
    // for (let item of arr) { 
    // if(fn(item)){ 
    // result = true
    // break
    // }
    // }
    // return result
    // }
    
    // console.log(some(arr,v => v > 12));

### 闭包 ###

闭包 (Closure)：函数和其周围的状态(词法环境)的引用捆绑在一起形成闭包。  
可以在另一个作用域中调用一个函数的内部函数并访问到该函数的作用域中的成员  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 4]

#### 闭包的本质 ####

函数在执行的时候会放到一个执行栈上当函数执行完毕之后会从执行栈上移除，但是堆上的作用域成员因为被外部引用不能释放，因此内部函数依然可以访问外部函数的成员。

#### 闭包案例 ####

// function makePower(power){ 
            // return function(x){ 
            // return Math.pow(x, power)
            // }
            // }
            // let power2 = makePower(2) 
            // let power3 = makePower(3)
            // console.log(power2(4))
            // console.log(power3(4))
    
            function makeSalary(base){ 
                return function(performance){ 
                    return base + performance
                }
            }
            let f = makeSalary(10000)
            console.log(f(2000));

### 纯函数 ###

纯函数：相同的输入永远会得到相同的输出，而且没有任何可观察的副作用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 6]

### lodash ###

// 演示 lodash
    // first / last / toUpper / reverse / each / includes / find / findIndex
    const _ = require('lodash')
    
    const array = ['jack', 'tom', 'lucy', 'kate']
    
    console.log(_.first(array))
    console.log(_.last(array))
    
    console.log(_.toUpper(_.first(array)))
    
    console.log(_.reverse(array))  改变了原有数组 不是纯函数
    
    const r = _.each(array, (item, index) => { 
      console.log(item, index)
    })
    
    console.log(r)
    
    // _.find

### 纯函数的好处 ###

#### 可缓存 ####

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

如果一个函数经常使用，那么我们可以缓存起来，下次获取就很快了 自己模拟一个 memoize 函数

// 记忆函数
    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)
        有就取cache[key]  没有就存进去  这里的aplly只是为了展开类数组
        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))

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 7]

#### 可测试 ####

纯函数让测试更方便

#### 并行处理 ####

在多线程环境下并行操作共享的内存数据很可能会出现意外情况  
纯函数不需要访问共享的内存数据，所以在并行环境下可以任意运行纯函数 (Web Worker ES6后新增，开启新线程)

#### 副作用 ####

纯函数：对于相同的输入永远会得到相同的输出，而且没有任何可观察的副作用（说白了 像第一个函数，依赖外部变量，那么外部变量被改变了，那么输出的结果不是相应的）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 8]  
副作用让一个函数变的不纯(如上例)，纯函数的根据相同的输入返回相同的输出，如果函数依赖于外部  
的状态就无法保证输出相同，就会带来副作用。  
副作用来源：  
配置文件  
数据库  
获取用户的输入  
……  
所有的外部交互都有可能带来副作用，副作用也使得方法通用性下降不适合扩展和可重用性，同时副作  
用会给程序中带来安全隐患给程序带来不确定性，但是副作用不可能完全禁止，尽可能控制它们在可控  
范围内发生。

### 柯里化 (Haskell Brooks Curry) ###

使用柯里化解决上一个案例中硬编码的问题

// 柯里化演示
    // function checkAge (age) { 
    // 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, 24))
    
    
    // 函数的柯里化
    // function checkAge (min) { 
    // return function (age) { 
    // return age >= min
    // }
    // }
    
    // ES6
    let checkAge = min => (age => age >= min)
    
    let checkAge18 = checkAge(18)
    let checkAge20 = checkAge(20)
    
    console.log(checkAge18(20))
    console.log(checkAge18(24))

#### 柯里化 (Currying)： ####

当一个函数有多个参数的时候先传递一部分参数调用它（这部分参数以后永远不变）  
然后返回一个新的函数接收剩余的参数，返回结果

### lodash 中的柯里化函数 ###

\_.curry(func)  
功能：创建一个函数，该函数接收一个或多个 func 的参数，如果 func 所需要的参数都被提供则执行 func 并返回执行的结果。否则继续返回该函数并等待接收剩余的参数。  
参数：需要柯里化的函数。  
返回值：柯里化后的函数。

当一个函数有三个参数时叫三元函数 只有一个就是一元函数

// lodash 中的 curry 基本使用 
    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))

##### 案例 #####

// 柯里化案例
    // 判断是否有空白字符
    // ''.match(/\s+/g)
    // ''.match(/\d+/g)
    
    const _ = require('lodash')
    
    const match = _.curry(function (reg, str) { 
      return str.match(reg)
    })
    
    const haveSpace = match(/\s+/g)
    const haveNumber = match(/\d+/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']))

##### 模拟 \_.curry() 的实现 #####

// 模拟实现 lodash 中的 curry 方法
    
    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 (func) { 
      return function curriedFn(...args) { 
        // 判断实参和形参的个数 TODO
        if (args.length < func.length) { 
          return function () { 
            return curriedFn(...args.concat(Array.from(arguments)))
          }
        }
        return func(...args)
      }
    }

#### 柯里化总结 ####

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

### 函数组合 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 9]

### 管道 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 10]

### 函数组合 ###

函数组合 (compose)：如果一个函数要经过多个函数处理才能得到最终值，这个时候可以把中间  
过程的函数合并成一个函数  
函数就像是数据的管道，函数组合就是把这些管道连接起来，让数据穿过多个管道形成最终  
结果  
函数组合默认是从右到左执行

// 函数组合演示
    function compose (f, g) { 
      return function (value) { 
        return f(g(value))         
      }
    }
    
    function reverse (array) { 
      return array.reverse()
    }
    
    function first (array) { 
      return array[0]
    }
    
    const last = compose(first, reverse)
    
    console.log(last([1, 2, 3, 4]))

### lodash 中的组合函数 ###

lodash 中组合函数 flow() 或者 flowRight()，他们都可以组合多个函数  
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']))

#### 模拟实现 lodash 的 flowRight 方法 ####

// 模拟 lodash 中的 flowRight
    
    const reverse = arr => arr.reverse()
    const first = arr => arr[0]
    const toUpper = s => s.toUpperCase()
    
    
    // function compose (...args) { 
    // return function (value) { reduce让数组里的每一个执行我们定义的函数 依次累计 acc结果 fn（数组里的函数）处理每次的结果
    // return args.reverse().reduce(function (acc, fn) { 
    // return fn(acc)
    // }, value) value 初始值 acc初始值必须定义
    // }
    // }
    
    const compose = (...args) => value => args.reverse().reduce((acc, fn) => fn(acc), value)
    
    const f = compose(toUpper, first, reverse)
    console.log(f(['one', 'two', 'three']))

函数的组合要满足结合律 (associativity)：  
我们既可以把 g 和 h 组合，还可以把 f 和 g 组合，结果都是一样的

// function compose (f,g){ 
    // return function(value){ 
    // return f(g(value))
    // }
    // }
    // function reverse(array){ 
    // return array.reverse()
    // }
    // function first (array) { 
    // return array[0]
    // }
    // const last = compose(first, reverse)
    // console.log(last([1, 2, 3, 4]))
    // lodash 中的函数组合的方法 _.flowRight()
    const {  values, overArgs } = require('lodash')
    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', 'thre2e']))
    
    // function compose(...args){ 
    // return function(value){ 
    // return args.reverse().reduce(function(acc,fn){ 
    // return fn(acc)
    // },value)
    // }
    // }
    const compose = (...args) => (value)=> args.reverse().reduce((acc,f) => f(acc),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']))

### 调试 ###

// 函数组合 调试 
    // NEVER SAY DIE --> never-say-die
    
    const _ = require('lodash')
    
    // const log = v => { 
    // console.log(v)
    // return v
    // }
    
    const trace = _.curry((tag, v) => { 
      console.log(tag, v)
      return v
    })
    
    // _.split()
    const split = _.curry((sep, str) => _.split(str, sep))
    
    // _.toLower()
    const join = _.curry((sep, array) => _.join(array, sep))
    
    const map = _.curry((fn, array) => _.map(array, fn))
    
    const f = _.flowRight(join('-'), trace('map 之后'), map(_.toLower), trace('split 之后'), split(' '))
    
    console.log(f('NEVER SAY DIE'))

### lodash/fp ###

lodash 的 fp 模块提供了实用的对函数式编程友好的方法  
提供了不可变 auto-curried iteratee-first data-last 的方法

// lodash 的 fp 模块
    // NEVER SAY DIE --> never-say-die
    const fp = require('lodash/fp')
    
    const f = fp.flowRight(fp.join('-'), fp.map(fp.toLower), fp.split(' '))
    
    console.log(f('NEVER SAY DIE'))

// 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)
    
    
    const fp = require('lodash/fp')
    
    console.log(fp.map(parseInt, ['23', '8', '10']))

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 11]

### Point Free ###

Point Free：我们可以把数据处理的过程定义成与数据无关的合成运算，不需要用到代表数据的那个参数，只要把简单的运算步骤合成到一起，在使用这种模式之前我们需要定义一些辅助的基本运算函数。

不需要指明处理的数据。  
只需要合成运算过程。  
需要定义一些辅助的基本运算函数。

// point free
    // Hello World => hello_world
    const fp = require('lodash/fp')
    
    const f = fp.flowRight(fp.replace(/\s+/g, '_'), fp.toLower)
    
    console.log(f('Hello World'))

// 把一个字符串中的首字母提取并转换成大写, 使用. 作为分隔符
    // world wild web ==> W. W. W
    const fp = require('lodash/fp')
    
    // const firstLetterToUpper = fp.flowRight(fp.join('. '), fp.map(fp.first), fp.map(fp.toUpper), fp.split(' '))
    const firstLetterToUpper = fp.flowRight(fp.join('. '), fp.map(fp.flowRight(fp.first, fp.toUpper)), fp.split(' '))
    
    console.log(firstLetterToUpper('world wild web'))

### Functor (函子) ###

##### 为什么要学函子 #####

到目前为止已经已经学习了函数式编程的一些基础，但是我们还没有演示在函数式编程中如何把副作用  
控制在可控的范围内、异常处理、异步操作等。

### 什么是 Functor ###

容器：包含值和值的变形关系(这个变形关系就是函数)  
函子：是一个特殊的容器，通过一个普通的对象来实现，该对象具有 map 方法，map 方法可以运  
行一个函数对值进行处理(变形关系)  
![在这里插入图片描述][20201108013349303.png_pic_center]  
明早练习 TODO

// // Functor 函子
    // class Container { 
    // constructor (value) { 
    // this._value = value
    // }
    
    // map (fn) { 
    // return new Container(fn(this._value))
    // }
    // }
    
    // let r = new Container(5)
    // .map(x => x + 1)
    // .map(x => x * x)
    
    // console.log(r)
    
    
    class Container { 
      static of (value) { 
        return new Container(value)
      }
    
      constructor (value) { 
        this._value = value
      }
    
      map (fn) { 
        return Container.of(fn(this._value))
      }
    }
    
    // let r = Container.of(5)
    // .map(x => x + 2)
    // .map(x => x * x)
    
    // console.log(r)
    
    
    // 演示 null undefined 的问题
    Container.of(null)
      .map(x => x.toUpperCase())

#### 总结 ####

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

在 Functor 中如果我们传入 null 或 undefined

// 值如果不小心传入了空值(副作用) 
    // 演示 null undefined 的问题
    Container.of(null)
      .map(x => x.toUpperCase())
     // TypeError: Cannot read property 'toUpperCase' of null

### MayBe 函子 ###

我们在编程的过程中可能会遇到很多错误，需要对这些错误做相应的处理  
MayBe 函子的作用就是可以对外部的空值情况做处理（控制副作用在允许的范围）

// MayBe 函子
    class MayBe { 
      static of (value) { 
        return new MayBe(value)
      }
    
      constructor (value) { 
        this._value = value
      }
    
      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('Hello World')
    // .map(x => x.toUpperCase())
    // console.log(r)
    
    
    // let r = MayBe.of(null)
    // .map(x => x.toUpperCase())
    // console.log(r)
    
    
    let r = MayBe.of('hello world')
              .map(x => x.toUpperCase())
              .map(x => null)
              .map(x => x.split(' '))
    console.log(r)

在 MayBe 函子中，我们很难确认是哪一步产生的空值问题，如下例：

let r = MayBe.of('hello world')
              .map(x => x.toUpperCase())
              .map(x => null)
              .map(x => x.split(' '))
    console.log(r)

### Either 函子 ###

Either 两者中的任何一个，类似于 if…else…的处理  
异常会让函数变的不纯，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))
      }
    }
    
    // let r1 = Right.of(12).map(x => x + 2)
    // let r2 = Left.of(12).map(x => x + 2)
    
    // console.log(r1)
    // console.log(r2)
    
    
    function parseJSON (str) { 
      try { 
        return Right.of(JSON.parse(str))
      } catch (e) { 
        return Left.of({  error: e.message })
      }
    }
    
    // let r = parseJSON('{ name: zs }')
    // console.log(r)
    
    let r = parseJSON('{ "name": "zs" }')
              .map(x => x.name.toUpperCase())
    console.log(r)

Either 用来处理异常

function parseJSON (str) { 
      try { 
        return Right.of(JSON.parse(str))
      } catch (e) { 
        return Left.of({  error: e.message })
      }
    }
    
    // let r = parseJSON('{ name: zs }')
    // console.log(r)
    
    let r = parseJSON('{ "name": "zs" }')
              .map(x => x.name.toUpperCase())
    console.log(r)

### IO 函子 ###

IO 函子中的 \_value 是一个函数，这里是把函数作为值来处理  
IO 函子可以把不纯的动作存储到 \_value 中，延迟执行这个不纯的操作(惰性执行)，包装当前的操  
作纯  
把不纯的操作交给调用者来处理

// IO 函子
    const fp = require('lodash/fp')
    
    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))
      }
    }
    
    // 调用
    let r = IO.of(process).map(p => p.execPath)
    // console.log(r)
    console.log(r._value())

### Task 异步执行 ###

异步任务的实现过于复杂，我们使用 folktale 中的 Task 来演示  
folktale 一个标准的函数式编程库  
和 lodash、ramda 不同的是，他没有提供很多功能函数  
只提供了一些函数式处理的操作，例如：compose、curry 等，一些函子 Task、Either、 MayBe 等

// 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(err)
    
          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)
        }
      })

#### Task 异步执行 ####

folktale(2.3.2) 2.x 中的 Task 和 1.0 中的 Task 区别很大，1.0 中的用法更接近我们现在演示的  
函子  
这里以 2.3.2 来演示

// folktale 中的 compose、curry
    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 f = compose(toUpper, first)
    console.log(f(['one', 'two']))

### Pointed 函子 ###

Pointed 函子是实现了 of 静态方法的函子  
of 方法是为了避免使用 new 来创建对象，更深层的含义是 of 方法用来把值放到上下文  
Context（把值放到容器中，使用 map 来处理值）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 12]

class Container {  static of (value) 
    {  return new Container(value) }…… }
    Contanier.of(2) .map(x => x + 5)

### Monad（单子） ###

在使用 IO 函子的时候，如果我们写出如下代码：

// IO 函子的问题
    const fs = require('fs')
    const fp = require('lodash/fp')
    
    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))
      }
    }
    
    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()._value()
    console.log(r)

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

// IO Monad
    const fs = require('fs')
    const fp = require('lodash/fp')
    
    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()
      }
    }
    
    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(x => x.toUpperCase())
              .map(fp.toUpper)
              .flatMap(print)
              .join()
    
    console.log(r)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/23b531e0194546159fa2a34cce593b3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/a60e16c1e40841bfbcdd8746e473385d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/9d130008f9e94fde98a86ce8da7075e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/d3f69fe71a2f4070a52221fac5da1c9b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/40f8276069474706a455733d2ec6a904.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221120/40017b4e757a4d9dbabeab743f76ebe2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221120/34a67f828e814033b6540ea1789e3463.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221120/5e14047c30b3435f9339b5135b33f5f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221120/56b9b2f2deae4e1cb2df71a04da6e954.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221120/0aef5584f9374b46aa4bb4471284ba00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221120/804c29f01bbe451695f6b1e6a914f6ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221120/e5c048b76e1b4733b8d63d3c0ed93df9.png
[20201108013349303.png_pic_center]: /images/20221120/6a37fe7927424a0a94996525ba3c73a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221120/4956629e61034d1a905f0487043ba231.png