函数式编程

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

函数式编程概念:

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

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

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,185评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,445评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,684评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,564评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,681评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,874评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,025评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,761评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,217评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,351评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,988评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2赞 349