前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JavaScript函数式编程之函子

JavaScript函数式编程之函子

作者头像
开水泡饭
发布于 2022-12-26 08:45:13
发布于 2022-12-26 08:45:13
1.2K00
代码可运行
举报
运行总次数:0
代码可运行

函子(Functor)

函子是一个特殊的容器,通过一个普通对象来实现,该对象具有map方法,map方法可以运行一个函数对值进行处理(变形关系),容器包含值和值变形关系(这个变形关系就是函数)。函数式编程中解决副作用的存在

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

根据函子的定义我们创建一个函子

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// functor 函子
class Container {
  constructor (value) {
    // 函子内部保存这个值。下划线是不想外部访问
    this._value = value
  }

  // map 方法接收一个处理值的函数
  map (fn) {
    return new Container(fn(this._value))
  }
}

此时就已经创建了一个函子但是这是面向对象的方式来创建的,换成用函数式编程来写一个函子

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class Container {
  constructor (value) {
    this._value = value
  }

  map (fn) {
    return Container.of(fn(this._value))
  }

  static of (value) {
    return new Container(value)
  }
}

let x = Container.of(5).map(x => x + 1).map(x => x - 1)

但是这个函子还是存在一些问题,比如空值的时候就会报错, 会让我们的函子变的不纯,我们需要去拦截空值错误,我们创建一个方法去判断是否为空值,如果是控制我们直接返回一个空值的函子,如果有值再去处理,这个时候就需要使用MayBe函子

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let x = Container.of(null).map(x => x + 1).map(x => x - 1)

MayBe 函子

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// MayBe 函子
class MayBe {
  constructor (value) {
    this._value = value
  }

  map (fn) {
    return this.isNothing() ? MayBe.of(null) : MayBe.of(fn(this._value))
  }

  isNothing () {
    return this._value === undefined || this._value === null
  }

  static of (value) {
    return new MayBe(value)
  }
}

let x = MayBe.of(null)
  .map(x => x + 1)
  .map(x => x - 1)
console.log(x)

这个时候我们已经能正常执行了,但是现在出现了空值的函子,但是我们不知道那个地方出现了空值,所以我们创建两个函子一个是正常的处理一个是出现错误情况处理,正常的就按照正常的方式创建,错误的是是否我们把map方法改造一下让她不再处理回调函数,直接返回一个空值的MayBe函子,这样就记录下了错误信息Eitcher 函子就是来处理这种情况的

Either函子

Eitcher 类似于 if else 的处理,两者中的任何一个,异常会让函数变的不纯,Eitcher函子可以用来做异常处理

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 因为是二选一,所以定义两个类 Left 和 Right

// 记录错误信息的
class Left {
  constructor (value) {
    this._value = value
  }

  map (fn) {
    return this
  }

  static of (value) {
    return new Left(value)
  }
}

// 正常处理
class Rgiht {
  constructor (value) {
    this._value = value
  }

  map (fn) {
    return Rgiht.of(fn(this._value))
  }

  static of (value) {
    return new Rgiht(value)
  }
}

function parseJson (str) {
  try {
    return Rgiht.of(JSON.parse(str))
  } catch (err) {
    return Left.of({ message: err.message })
  }
}

// 故意传入错误的数据
let r = parseJson('{ name: "2" }')
r.map(x => x.name.toUpperCase())
console.log(r)

IO 函子

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const fp = require('lodash/fp')

// IO 函子
class IO {
  constructor (fn) {
    this._value = fn
  }
  static of (value) {
    return new IO(function () {
      return value
    })
  }
  map (fn) {
    // 把当前的value 和传入的fn 函数组合成一个新的函数
    return new IO(fp.flowRight(fn, this._value))
  }
}

let r = IO.of(process).map(x => x.execPath)

console.log(r)
console.log(r._value())

IO 函子内部帮我们包装了一些函数,当我们传递函数的时候有可能这个函数是一个不纯的操作,不管这个函数纯与不纯,IO这个函子在执行的过程中它返回的这个结果始终是一个纯的操作,我们调用map的时候始终返回的是一个函子,但是IO函子这个_value属性他里面要去合并很多函数,所以他里面可能是不纯的,把这些不纯的操作延迟到了调用的时候,也就是我们通过IO函子控制了副作用的在可控的范围内发生

实现 liunx 下 cat 命令

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const fp = require('lodash/fp')

// IO 函子
class IO {
  constructor (fn) {
    this._value = fn
  }
  static of (value) {
    return new IO(function () {
      return value
    })
  }
  map (fn) {
    // 把当前的value 和传入的fn 函数组合成一个新的函数
    return new IO(fp.flowRight(fn, this._value))
  }
}

let r = IO.of(process).map(x => x.execPath)

function readFile (fileName) {
  return new IO(() => fs.readFileSync(fileName, 'utf-8'))
}

function print (x) {
  return new IO(() => {
    console.log(x)
    return x
  })
}

let cat = fp.flowRight(print, readFile)

console.log(cat('package.json')._value()._value())

此时IO函子出现了嵌套的问题,导致调用嵌套函子中的方法就必须要要._value()._value() 这样来执了,嵌套了几层就需要几层调用

Folktale

Folktale 是一个标准的函数式编程库,和lodash不同的是,他没有提供很多功能函数,只提供了一些函数式处理的操作,例如:compose、curry等,一些函子 Task、Either、MayBe等,

Folktale 中的currycompose的简单使用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const { compose, curry } = require('folktale/core/lambda')
const { toUpper, first } = require('lodash/fp')

// 与lodash区别,第一个参数指明后面参数的个数
let f = curry(2, (n1, n2) => n1 + n2)

console.log(f(1, 2))

// compose 就是函数组合 lodash 中的函数组合是 flowRight
let f2 = compose(toUpper, first)

console.log(f2(['one', 'two']))

Folktale 中的 task 函子

函子可以处理异步任务,在异步任务中会通往地狱之门的回调,而使用task 函子可以避免回调的嵌套,详细请看官方文档

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// Task 异步任务
const { task } = require('folktale/concurrency/task')
const { split, find } = require('lodash/fp')
const fs = require('fs')

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

Pointed函子

Pointed函子 是实现了of静态方法, of 方法是为了避免使用new 来创建对象,更深层次含义是of方法把值放到上下文Context(把值放到容器中,使用map 来处理值)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class Container {
  constructor (value) {
    this._value = value
  }
	static of () {
    return new Container(value)
  }
  map (fn) {
    return new Container(fn(this._value))
  }
}

Monad函子

解决函子嵌套的问题,Monad 函子是可以变扁的 Pointed 函子 IO(IO),一个函子如果具有joinof两个方法并遵循一些定律就是一个Monad

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class IO {
  constructor (fn) {
    this._value = fn
  }
  static of (value) {
    return new IO(function () {
      return value
    })
  }
  map (fn) {
    return new IO(fp.flowRight(fn, this._value))
  }

  join () {
    return this._value()
  }

  // 同时调用 join 和 map
  flatMap (fn) {
    return this.map(fn).join()
  }
}

function readFile (fileName) {
  return new IO(() => fs.readFileSync(fileName, 'utf-8'))
}

function print (x) {
  return new IO(() => {
    return x
  })
}

let r = readFile('package.json').flatMap(print).join()

console.log(r)

当我们想要去调用一个方法,这个方法返回一值的时候我们去调用map方法,当我们想要去调用一个方法,这个方法返回一个函子的时候我们去调用flatMap方法

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript——函数式编程Functor(函子)
容器: 包含值和值的变形关系(函数) 函子: 是一个特殊的容器,通过一个普通的对象来实现,该对象具有map方法,map方法可以运行一个函数对值进行处理(变形关系)
思索
2024/08/16
1100
JavaScript——函数式编程Functor(函子)
函数式编程了解一下(下)
一步一步来理解,第一次调用curry函数的时候,返回一个curried函数,待调用状态,当我们传入1的时候,返回的依旧是一个函数,args是利用闭包,记录你传入的参数是否为函数定义时候的参数个数,如果不是,那我接着等待你在传入。因为我们利用args来记录每次传入的值,所以我们每次拿curry函数后的传入的参数就必须使用arguments了,由于它是类数组,我们想拿到参数值,所以这里我们使用slice。最终,我们其实还是调用a+b+c的运算。
Nealyang
2019/09/29
1.1K0
函数式编程了解一下(下)
Js-函数式编程 前言什么是函数式编程为什么Js支持FP纯函数柯里化组合 compose范畴学functorMonadApplicative FunctorFunctor\Monad\Applic
JavaScript是一门多范式语言,即可使用OOP(面向对象),也可以使用FP(函数式),由于笔者最近在学习React相关的技术栈,想进一步深入了解其思想,所以学习了一些FP相关的知识点,本文纯属个人的读书笔记,如果有错误,望轻喷且提点。
菜的黑人牙膏
2019/04/09
1.8K0
Js-函数式编程
		前言什么是函数式编程为什么Js支持FP纯函数柯里化组合 compose范畴学functorMonadApplicative FunctorFunctor\Monad\Applic
翻译连载 | 附录 B: 谦虚的 Monad-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-《You-Dont-Know-JS》作者 JavaScript 轻量级函数式编程 附录 B: 谦虚的 Monad
iKcamp
2018/01/04
9920
《JavaScript ES6 函数式编程入门经典》读书笔记
函数式编程是一种范式,我们能够以此创建仅依赖输入就可以完成自身逻辑的函数。这保证了当函数多次调用时仍然返回相同的结果。函数不会改变任何外部环境的变量,这将产生可缓存,可测试的代码库。
kai666666
2020/10/27
2.4K0
函数式编程(FP)
可能大家都听过武侠小说中的内功和招式,商业大佬讲的道与术,一些唱歌选秀评委口中的感情和技巧。
政采云前端团队
2022/03/29
1.7K0
函数式编程(FP)
《The Joy of Javascript》- 2 - Functor/Monad
实现 FP 需要保证一些函数的输入和输出规范化. 以方便 compose 进行链式调用.
szhshp
2022/09/21
2950
深入理解JavaScript函数式编程
什么是函数式编程(Functional Programming, FP):FP 是编程范式之一.(还有面向过程编程、面向对象编程)
用户3045442
2020/07/31
4.4K0
深入理解JavaScript函数式编程
编程范式 —— 函数式编程入门
该系列会有 3 篇文章,分别介绍什么是函数式编程、剖析函数式编程库、以及函数式编程在 React 中的应用,欢迎关注我的 blog
牧云云
2019/03/04
7210
《JavaScript函数式编程指南》读书笔记
老规矩,这篇文章记录书中的重点部分,外加自己的见解,不会对全书进行复述,但记录的绝对是最重要的部分,想要了解跟多内容请看原版图书。
kai666666
2020/10/19
1K0
《JavaScript函数式编程指南》读书笔记
前端工程师的函数式编程
函数式编程 什么是函数式编程 函数式编程是一种编程范式。 面向过程开发 const a = 1 const b = 2 const result = a + b 复制代码 class Calculator { add(a,b) { return a+b } } const c = new Calculator() c.add(1,2) 复制代码 function add(a,b) { return a+b } return a+b 复制代码 面向对象编程 class Calculator
19组清风
2021/11/15
3030
函数式编程了解一下(上)
所以我们说,函数式编程是一种范式,我们能够以此创建仅依赖输入就可以完成自身逻辑的函数。这保证了当函数多次调用时,依然可以返回相同的结果。因此可以产生可缓存的、可测试的代码库
Nealyang
2019/09/29
5290
函数式编程了解一下(上)
【响应式编程的思维艺术】 (3)flatMap背后的代数理论Monad
原文中在http请求拿到获取到数据后,最初使用了forEach实现了手动流程管理,于是原文提出了优化设想,试图探究如何依赖响应式编程的特性将手动的数据加工转换改造为对流的转换,好让最终的消费者能够拿到直接可用的数据,而不是得到一个响应后手动进行很多后处理。在代码层面需要解决的问题就是,如何在不使用手动遍历的前提下将一个有限序列中的数据逐个发给订阅者,而不是一次性将整个数据集发过去。
大史不说话
2018/12/28
6390
【基于 JS 函数式编程-3】柯里化 | 偏函数 | 组合与管道
定义:接受可变数量参数的函数,称为变参函数。 在es5中我们可以通过arguments来捕获调用变参函数的额外参数。 在es6中,我们可以使用扩展运算符:"..."实现变参函数。如:
前端修罗场
2023/10/07
3500
【基于 JS 函数式编程-3】柯里化 | 偏函数 | 组合与管道
【基于 JS 的函数式编程 - 4】函子 | MayBe函子 | Monad函子
定义: 函子是一个普通对象,它实现了map函数,在遍历每个对象值的时候生成一个新对象。即,函子是一个实现了 map 契约的对象!
前端修罗场
2023/10/07
2540
【基于 JS 的函数式编程 - 4】函子 | MayBe函子 | Monad函子
函数式编程入门教程
你可能听说过函数式编程(Functional programming),甚至已经使用了一段时间。 但是,你能说清楚,它到底是什么吗? 网上搜索一下,你会轻松找到好多答案。 与面向对象编程(Object
ruanyf
2018/04/13
1.5K0
函数式编程入门教程
学习函数式编程 Monad
上一篇《轻松玩转函数式编程》中,我们讨论了常用的函数式编程案例,一些同学反馈没有讲到底层概念,想了解一下什么是 Monad?基于这个问题,我们来探究一下。
疯狂的技术宅
2020/11/30
7800
《The Joy of Javascript》- 1 - Object/Function
早先在 Github 看到人提起这本书, 我简单翻了一下目录, 发现有一些内容还挺有意思, 里面有很多近几年的新方法, 正好补充一些之前开发未涉及的部分.
szhshp
2022/09/21
2270
函数式编程与JS异步编程、手写Promise
2. EventLoop是主线程从"任务队列"中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环)。消息队列是一个事件的队列(也可以理解成消息的队列),IO设备完成一项任务,就在"任务队列"中添加一个事件,表示相关的异步任务可以进入"执行栈"了。
deepcc
2021/01/05
1K0
函数式编程与JS异步编程、手写Promise
javascript学习之函数组合
如果一个函数经过多个函数处理才能得到最终值,这个时候可以把中间过程的函数合并成一个函数
开水泡饭
2022/12/26
7870
推荐阅读
相关推荐
JavaScript——函数式编程Functor(函子)
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验