函数式编程

作者：酸菜牛肉 文章内容输出来源：拉勾教育大前端高薪训练营课程

函数式编程概念:

函数式编程是一种编程范式；还有面向对象编程，和面向过程编程

• 面向对象编程的思维方式：把现实世界中的事物抽象成程序世界中的类和对象，通过封装、继承和多态来演示事物事件的联系
• 面向对象编程的思维方式：把现实世界的事物和事物之间的联系抽象到程序世界（对运算过程进行抽象）

1. 程序的本质： 根据输入通过某种运算获得相应输出，程序开发过程中会涉及很多有输入和输出的函数
2. x -> f（联系、映射）-> y, y=f(x)
3. 函数式编程中的函数指的不是程序中的函数（方法），而是数学中的函数即映射关系，例如：y = sin(x), x和y的关系
4. 相同的输入始终要得到相同的输出（纯函数）
5. 函数式编程用来描述数据（函数）之间的映射

前置知识:

• 函数是一等公民
• 高阶函数
• 闭包

函数是一等公民

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

//把函数赋值给变量
let fn = function() {
  console.log('hello world')
}
fn()

const BlogController = {
  index(posts){return Views.index(posts) } // 函数的调用相同，可以将后边函数本身赋值给变量，（而不是函数的调用）
}
// 优化
const BlogController = {
  index: Views.index
}

高阶函数

• 可以把函数作为参数传递给两一个函数
• 可以把函数作为另一个函数的返回结果

//函数作为参数
const filter = (array, fn) => {
  let results = []
  for(let i =0; i< array.length; i++){
    if(fn(array[i]){
      results.push(array[i])
    }
  }
  return results
}
let arr = [1, 3, 4, 7, 8]
const a = filter(arr, (item)=>{
   return item % 2 === 0
})

//函数作为函数返回值 
const makeFn = () => {
  let msg = 'hello function'
  return function(){
   console.log(msg);  
 }
}
makeFn()()
//once
const once = (fn) => {
  let done  = false
  return function(){
    if(!done){
      done = true
      return fn.apply(this, arguments)
    }
  }
}

let pay = once(function(money)=>{
  consle.log(`支付：${money}RMB`)
})
pay(5)
pay(5)
pay(5)
pay(5)

使用高阶函数的意义

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

常用高阶函数

• forEach
• map
• filter
• every
• some
• find/findIndex
• reduce
• sort
• ...

const map = (array, fn) => {
    let result = []
    for (let value of array) {
        result.push(fn(value))
    }
    return result
 } 
const every = (array, fn) => {
    let result = true
    for (let value of array) {
        result = fn(value)
        if(!result){
            break
        }
    }
    return result
}

const some = (array, fn) => {
    let result = false
    for (let value of array) {
        result = fn(value)
        if(result){
            break
        }
    }
    return result
}


let arr = [1, 2, 3, 4]
// arr = map(arr, v => v * v)
// a = every(arr, v => v > 0)
b = some(arr, v => v > 3)
console.log(b)

闭包

闭包： 函数和其周围的状态（词法环境）的引用捆绑在一起形成闭包
可以在另一个作用域中调用一个函数的内部函数并访问到该函数的作用域中的成员

//闭包；
//once

function once (fn) {
    let done = false   //此变量的作用范围被延长，用来标记此函数是否被执行
    return function () {
        if(!done){
            done = true
            return fn.apply(this, arguments)
        }
    }
}

let pay = once(function(money){
    console.log(`支付： ${money} RMB`)
})

pay(5)
// pay(5)
// pay(5)

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

纯函数

纯函数的定义是：

• 如果函数的调用参数相同，则永远返回相同的结果，而且没有可观察的副作用
• lodash是一个纯函数的功能库，提供了对数组、数字、对象、字符串、函数等操作的一些方法
• 数组中的slice和splice分别为： 纯函数和不纯函数； slice 返回数组指定部分，不会改变原数组； splice 对数组进行操作返回该数组，会改变原数组
• 函数式编程不会保留计算中间的结果，所以变量是不可变的（无状态的）
• 我们可以把一个函数的执行结果交给两一个函数去处理

lodash

lodash 官网

纯函数的好处

• 可缓存： 因为纯函数对相同的输入始终有相同的结果，所以可以把纯函数的结果缓存起来 （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] = 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))

• 可测试: 纯函数让测试更方便
• 并行处理： 在多线程环境下操作系统共享的内存数据很可能会出现意外情况
• 纯函数不需要访问共享内存数据，所以在并行环境下可以任意运行纯函数（web Worker）

纯函数副作用

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

• 配置文件
• 数据库
• 获取用户的输入
• ......
  所有的外部交互都有可能代理副作用，副作用也使得方法通用性下降不适合扩展和可重用性，同时副作用会给程序中带来安全隐患，给程序带来不确定性，但是副作用不可能完全禁止，尽可能控制他们在可控范围内发生。

柯里化 <Currying>

// 函数的柯里化
// 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))

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

lodash 中柯里化
_.curry(func)

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

const _ = require('lodash')

const getSum = (a, b, c) => a + b + c

const curried = _.curry(getSum)

console.log(curried(1, 2, 4))
console.log(curried(1, 4)(4))
console.log(curried(14)(4)(3))

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

柯里化总结

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

函数组合

• 函数组合（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
// 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, fn) => fn(acc), value)

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

函数的组合满足结合律：

// 函数组合要满足结合律
const _ = require('lodash')

// const f = _.flowRight(_.toUpper, _.first, _.reverse)
// const f = _.flowRight(_.flowRight(_.toUpper, _.first), _.reverse)
const f = _.flowRight(_.toUpper, _.flowRight(_.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-cuuried 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']))

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 函子

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

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

// // 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方法返回包含一个新值的盒子(函子)

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)

Either 函子

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)

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)
    }
  })

// 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 函子

解决函子嵌套问题

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

总结：

总结

文章内容输出来源于：拉勾教育大前端高薪训练营