JavaScript函数式编程(三)

JavaScript函数式编程(一)

JavaScript函数式编程(二)

在第二篇文章里,我们介绍了 Maybe、Either、IO 等几种常见的 Functor,或许很多看完第二篇文章的人都会有疑惑:

『这些东西有什么卵用?』

事实上,如果只是为了学习编写函数式、副作用小的代码的话,看完第一篇文章就足够了。第二篇文章和这里的第三篇着重于的是一些函数式理论的实践,是的,这些很难(但并非不可能)应用到实际的生产中,因为很多轮子都已经造好了并且很好用了。比如现在在前端大规模使用的 Promise 这种异步调用规范,其实就是一种 Monad(等下会讲到);现在日趋成熟的 Redux 作为一种 FLUX 的变种实现,核心理念也是状态机和函数式编程。

一、Monad

关于 Monad 的介绍和教程在网络上已经层出不穷了比如这篇文章

函数编程中functor和monad的形象解释

,很多文章都写得比我下面的更好,所以我在这里只是用一种更简单易懂的方式介绍 Monad,当然简单易懂带来的坏处就是不严谨,所以见谅/w\

如果你对 Promise 这种规范有了解的话,应该记得 Promise 里一个很惊艳的特性:

 1
 2 doSomething()
 3
 4 .then(result => {
 5
 6 // 你可以return一个Promise链!
 7
 8 return fetch(‘url‘).then(result => parseBody(result));
 9
10 })
11
12 .then(result => {
13
14 // 这里的result是上面那个Promise的终值
15
16 })
17
18
19
20 doSomething()
21
22 .then(result => {
23
24 // 也可以直接return一个具体的值!
25
26 return 123;
27
28 })
29
30 .then(result => {
31
32 // result === 123
33
34 })

对于 Promise 的一个回调函数来说,它既可以直接返回一个值,也可以返回一个新的 Promise,但对于他们后续的回调函数来说,这二者都是等价的,这就很巧妙地解决了 nodejs 里被诟病已久的嵌套地狱。

事实上,Promise 就是一种 Monad,是的,可能你天天要写一大堆 Promise,可直到现在才知道天天用的这个东西竟然是个听起来很高大上的函数式概念。

下面我们来实际实现一个 Monad,如果你不想看的话,只要记住 『Promise 就是一种 Monad』 这句话然后直接跳过这一章就好了。

我们来写一个函数 cat,这个函数的作用和 Linux 命令行下的 cat 一样,读取一个文件,然后打出这个文件的内容,这里 IO 的实现请参考上一篇文章:

 1
 2 import fs from ‘fs‘;
 3
 4 import _ from ‘lodash‘;
 5
 6
 7
 8 var map = _.curry((f, x) => x.map(f));
 9
10 var compose = _.flowRight;
11
12
13
14 var readFile = function(filename) {
15
16 return new IO(_ => fs.readFileSync(filename, ‘utf-8‘));
17
18 };
19
20
21
22 var print = function(x) {
23
24 return new IO(_ => {
25
26 console.log(x);
27
28 return x;
29
30 });
31
32 }
33
34
35
36 var cat = compose(map(print), readFile);
37
38
39
40 cat("file")
41
42 //=> IO(IO("file的内容"))

由于这里涉及到两个 IO:读取文件和打印,所以最后结果就是我们得到了两层 IO,想要运行它,只能调用:

cat("file").__value().__value();

//=> 读取文件并打印到控制台

很尴尬对吧,如果我们涉及到 100 个 IO 操作,那么难道要连续写 100 个 __value() 吗?

当然不能这样不优雅,我们来实现一个 join 方法,它的作用就是剥开一层 Functor,把里面的东西暴露给我们:

 1
 2 var join = x => x.join();
 3
 4 IO.prototype.join = function() {
 5
 6 return this.__value ? IO.of(null) : this.__value();
 7
 8 }
 9
10
11
12 // 试试看
13
14 var foo = IO.of(IO.of(‘123‘));
15
16
17
18 foo.join();
19
20 //=> IO(‘123‘)

有了 join 方法之后,就稍微优雅那么一点儿了:

var cat = compose(join, map(print), readFile);

cat("file").__value();

//=> 读取文件并打印到控制台

join 方法可以把 Functor 拍平(flatten),我们一般把具有这种能力的 Functor 称之为 Monad。

这里只是非常简单地移除了一层 Functor 的包装,但作为优雅的程序员,我们不可能总是在 map 之后手动调用 join 来剥离多余的包装,否则代码会长得像这样:

var doSomething = compose(join, map(f), join, map(g), join, map(h));

所以我们需要一个叫 chain 的方法来实现我们期望的链式调用,它会在调用 map 之后自动调用 join 来去除多余的包装,这也是 Monad 的一大特性:

 1
 2 var chain = _.curry((f, functor) => functor.chain(f));
 3
 4 IO.prototype.chain = function(f) {
 5
 6 return this.map(f).join();
 7
 8 }
 9
10
11
12 // 现在可以这样调用了
13
14 var doSomething = compose(chain(f), chain(g), chain(h));
15
16
17
18 // 当然,也可以这样
19
20 someMonad.chain(f).chain(g).chain(h)
21
22
23
24 // 写成这样是不是很熟悉呢?
25
26 readFile(‘file‘)
27
28 .chain(x => new IO(_ => {
29
30 console.log(x);
31
32 return x;
33
34 }))
35
36 .chain(x => new IO(_ => {
37
38 // 对x做一些事情,然后返回
39
40 }))

哈哈,你可能看出来了,chain 不就类似 Promise 中的 then 吗?是的,它们行为上确实是一致的(then 会稍微多一些逻辑,它会记录嵌套的层数以及区别 Promise 和普通返回值),Promise 也确实是一种函数式的思想。

(我本来想在下面用 Promise 为例写一些例子,但估计能看到这里的人应该都能熟练地写各种 Promise 链了,所以就不写了0w0)

总之就是,Monad 让我们避开了嵌套地狱,可以轻松地进行深度嵌套的函数式编程,比如IO和其它异步任务。

二、函数式编程的应用

好了,关于函数式编程的一些基础理论的介绍就到此为止了,如果想了解更多的话其实建议去学习 Haskell 或者 Lisp 这样比较正统的函数式语言。下面我们来回答一个问题:函数式编程在实际应用中到底有啥用咧?

1、React

React 现在已经随处可见了,要问它为什么流行,可能有人会说它『性能好』、『酷炫』、『第三方组件丰富』、『新颖』等等,但这些都不是最关键的,最关键是 React 给前端开发带来了全新的理念:函数式和状态机。

我们来看看 React 怎么写一个『纯组件』吧:

var Text = props => (

<div style={props.style}>{props.text}</div>

)

咦这不就是纯函数吗?对于任意的 text 输入,都会产生唯一的固定输出,只不过这个输出是一个 virtual DOM 的元素罢了。配合状态机,就大大简化了前端开发的复杂度:

state => virtual DOM => 真实 DOM

在 Redux 中更是可以把核心逻辑抽象成一个纯函数 reducer:

reducer(currentState, action) => newState

关于 React+Redux(或者其它FLUX架构)就不在这里介绍太多了,有兴趣的可以参考相关的教程。

2、Rxjs

Rxjs 从诞生以来一直都不温不火,但它函数响应式编程(Functional Reactive Programming,FRP)的理念非常先进,虽然或许对于大部分应用环境来说,外部输入事件并不是太频繁,并不需要引入一个如此庞大的 FRP 体系,但我们也可以了解一下它有哪些优秀的特性。

在 Rxjs 中,所有的外部输入(用户输入、网络请求等等)都被视作一种 『事件流』:

--- 用户点击了按钮 --> 网络请求成功 --> 用户键盘输入 --> 某个定时事件发生 --> ......

举个最简单的例子,下面这段代码会监听点击事件,每 2 次点击事件产生一次事件响应:

1
2 var clicks = Rx.Observable
3
4 .fromEvent(document, ‘click‘)
5
6 .bufferCount(2)
7
8 .subscribe(x => console.log(x)); // 打印出前2次点击事件

其中 bufferCount 对于事件流的作用是这样的:

是不是很神奇呢?Rxjs 非常适合游戏、编辑器这种外部输入极多的应用,比如有的游戏可能有『搓大招』这个功能,即监听用户一系列连续的键盘、鼠标输入,比如上上下下左右左右BABA,不用事件流的思想的话,实现会非常困难且不优雅,但用 Rxjs 的话,就只是维护一个定长队列的问题而已:

 1
 2 var inputs = [];
 3
 4 var clicks = Rx.Observable
 5
 6 .fromEvent(document, ‘keydown‘)
 7
 8 .scan((acc, cur) => {
 9
10 acc.push(cur.keyCode);
11
12 var start = acc.length - 12 < 0 ? 0 : acc.length - 12;
13
14 return acc.slice(start);
15
16 }, inputs)
17
18 .filter(x => x.join(‘,‘) == [38, 38, 40, 40, 37, 39, 37, 39, 66, 65, 66, 65].join(‘,‘))// 上上下下左右左右BABA,这里用了比较奇技淫巧的数组对比方法
19
20 .subscribe(x => console.log(‘!!!!!!ACE!!!!!!‘));

当然,Rxjs 的作用远不止于此,但可以从这个范例里看出函数响应式编程的一些优良的特性。

三、总结

既然是完结篇,那我们来总结一下这三篇文章究竟讲了些啥?

第一篇文章里,介绍了纯函数、柯里化、Point Free、声明式代码和命令式代码的区别,你可能忘记得差不多了,但只要记住『函数对于外部状态的依赖是造成系统复杂性大大提高的主要原因』以及『让函数尽可能地纯净』就行了。

第二篇文章,或许是最没有也或许是最有干货的一篇,里面介绍了『容器』的概念和 Maybe、Either、IO 这三个强大的 Functor。是的,大多数人或许都没有机会在生产环境中自己去实现这样的玩具级 Functor,但通过了解它们的特性会让你产生对于函数式编程的意识。

软件工程上讲『没有银弹』,函数式编程同样也不是万能的,它与烂大街的 OOP 一样,只是一种编程范式而已。很多实际应用中是很难用函数式去表达的,选择 OOP 亦或是其它编程范式或许会更简单。但我们要注意到函数式编程的核心理念,如果说 OOP 降低复杂度是靠良好的封装、继承、多态以及接口定义的话,那么函数式编程就是通过纯函数以及它们的组合、柯里化、Functor 等技术来降低系统复杂度,而 React、Rxjs、Cycle.js 正是这种理念的代言人,这可能是大势所趋,也或许是昙花一现,但不妨碍我们去多掌握一种编程范式嘛

原文地址:https://www.cnblogs.com/wangking/p/10869776.html

时间: 2024-10-07 16:59:51

JavaScript函数式编程(三)的相关文章

20170917 前端开发周报:JavaScript函数式编程、作用域和闭包

1.用函数式编程对JavaScript进行断舍离 当从业20的JavaScript老司机学会函数式编程时,他扔掉了90%的特性,也不用面向对象了,最后发现了真爱啊!!! https://juejin.im/entry/59b86... 2.JavaScript作用域和闭包 作用域和闭包在JavaScript里非常重要.但是在我最初学习JavaScript的时候,却很难理解.这篇文章会用一些例子帮你理解它们.我们先从作用域开始.作用域 JavaScript的作用域限定了你可以访问哪些变量.有两种作

javaScript函数式编程

第1章 JavaScript函数式编程简介 11.1 JavaScript案例 11.2 开始函数式编程 41.2.1 为什么函数式编程很重要 41.2.2 以函数为抽象单元 71.2.3 封装和隐藏 91.2.4 以函数为行为单位 101.2.5 数据抽象 141.2.6 函数式JavaScript初试 171.2.7 加速 191.3 Underscore示例 221.4 总结 23第2章 一等函数与Applicative编程 242.1 函数是一等公民 242.2 Applicative编

JavaScript函数式编程(1):基本思想

1 函数式编程简介 函数式编程是和传统命令式编程区分的一种编程思想,"在函数式编程语言中,函数是第一类的对象,也就是说,函数 不依赖于任何其他的对象而可以独立存在,而在面向对象的语言中,函数 ( 方法 ) 是依附于对象的,属于对象的一部分.这一点决定了函数在函数式语言中的一些特别的性质,比如作为传出 / 传入参数,作为一个普通的变量等.[1]" 函数式编程思想的源头可以追溯到 20 世纪 30 年代,数学家阿隆左 . 丘奇在进行一项关于问题的可计算性的研究,也就是后来的 lambda

在JavaScript函数式编程里使用Map和Reduce方法

所有人都谈论道workflows支持ECMAScript6里出现的令人吃惊的新特性,因此我们很容易忘掉ECMAScript5带给我们一些很棒的工具方法来支持在JavaScript里进行函数编程,这些工具方法我们现在可以使用了.在这些函数方法里主要的是基于JavaScript 数组对象的map()方法和reduce()方法. 如果你如今还没有使用map()和reduce()方法,那么现在是时候开始使用了.如今绝大部分的JavaScript开发平台都与生俱来的支持ECMAScript5.使用Map方

javascript 函数式编程

编程范式 编程范式是一个由思考问题以及实现问题愿景的工具组成的框架.很多现代语言都是聚范式(或者说多重范式): 他们支持很多不同的编程范式,比如面向对象,元程序设计,泛函,面向过程,等等. 函数式编程范式 函数式编程就像一辆氢燃料驱动的汽车——先进的未来派,但是还没有被广泛推广.与命令式编程相反,他由一系列语句组成,这些语句用于更新执行时的全局状态.函数式编程将计算转化作表达式求值.这些表达式全由纯数学函数组成,这些数学函数都是一流的(可以被当做一般值来运用和处理),并且没有副作用. 函数式编程

javascript函数式编程简单介绍

函数式编程在前端已经成为了一个热门的话题,近几年很多的应用程序代码库里大量使用着函数式编程思想.这里对JavaSctipt中的函数式编程做一个简单介绍. 什么是函数式编程 函数式编程是一种编程范式,主要是利用函数把运算过程封装起来,通过组合各种函数来计算结果.函数式编程意味着开发者可以在更短的时间内编写具有更少错误的代码. 函数式编程的简单例子 假设要把一个字符串转换成每个单词首字母大写,可以这样来实现: var string = 'i do like yanggb'; var result =

JavaScript函数式编程(0):函数基础 arguments、this、apply()、call()

1 函数参数 函数的实参和形参个数可以不等,之所以会这样,原因是 ECMAScript 中的参数在内部是用一个数组来表示的.函数接收到的始终都是这个数组,而不关心数组中包含哪些参数(如果有参数的话).如果实参个数大于形参个数,多余的实参不传递值,但是在arguments中可以访问:如果形参个数大于实参,没有传递值的实参将自动被赋予 undefined 值. 2 arguments和this 所有的函数调用都会传递两个隐式参数:arguments和this.实际上,在函数体内可以通过 argume

javaScript函数式编程-包含闭包、链式优化及柯里化

本文着重介绍个人理解的函数式编程. 函数式编程个人理解为:以函数为主要载体的编程方式. 好处: 语义更加清晰 可复用性高 可维护性好 作用域局限.副作用少 基本函数式编程: //实现数组中每个单词首字母大写 //一般写法 const arr = ['apple','orange','pear']; for(const i in arr) { const c = arr[i][0]; arr[i] = c.toUpperCase() + arr[i].slice(1); //slice()从已有的

javascript函数式编程一例分析

js像其他动态语言一样是可以写高阶函数的,所谓高阶函数是可以操作函数的函数.因为在js中函数是一个彻彻底底的对象,属于第一类公民,这提供了函数式编程的先决条件. 下面给出一个例子代码,出自一本js教程,功能是计算数组元素的平均值和标准差,先列出非函数式编程的一种写法: var data = [1,1,3,5,5]; var total = 0; for(var i = 0;i < data.length;i++) total += data[i]; var mean = tatal/data.l