不简单的R.map

不简单的R.map

作为前端工程师,你肯定用过Array.prototype.map方法。

如果你听说过Ramda,它也提供了和Array.prototype.map方法类似的map方法。

但是这个map背后的东西可以让你看到另外一个世界,我相信,如果你不想了解Ramda,也能从这篇文章中有所收获。

下面我们进入到例子。

简单的使用

像下面这样使用这个函数。

1
R.map(x => x + 1, [1, 2, 3]); // [2, 3, 4]

除了数组外它还可以作用于Object

1
R.map(x => x + 1, {a: 1, b: 2, c: 3});  // {a: 2, b: 3, c: 4}

你以为就完了吗?它还能作用于函数:

1
R.map(x => x + 1, a => a + 1); // a => (a+1)+1

哇,作用于函数真的是没想到,那还能作用于其它奇奇怪怪的东西吗?

当然可以,有很多东西从某种维度上讲都是同一类东西,关键R.map的维度是什么呢?

先别讲什么乱七八糟的,接下来咱们来看一看官方文档上都有哪些描述.

文档上都说了啥

  1. 接收一个函数和一个 functor, 将该函数应用到 functor 的每个值上,返回一个具有相同形态的 functor。
  2. Ramda 为 Array 和 Object 提供了合适的 map 实现,因此 R.map 适用于 [1, 2, 3] 或 {x: 1, y: 2, z: 3}。
  3. 若第二个参数自身存在 map 方法,则调用自身的 map 方法。
  4. 若在列表位置中给出 transfomer,则用作 transducer 。
  5. 函数也是 functors,map 会将它们组合起来(相当于 R.compose)。

行了,除了2,3能看懂,其它都是啥??!!functor??transfomer??transducer??

我们找到Ramda的源码,看看这个map究竟都有哪些魔法?

看看ramda源码

隐去了一些不需要了解的逻辑,下面是代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var map = _dispatchable(['fantasy-land/map', 'map'], _xmap, function map(fn, functor) {
/*ramda默认处理逻辑*/
switch (Object.prototype.toString.call(functor)) {
case '[object Function]':
return function() {
return fn.call(this, functor.apply(this, arguments));
};
case '[object Object]':
return _reduce(function(acc, key) {
acc[key] = fn(functor[key]);
return acc;
}, {}, keys(functor));
default:
return _map(fn, functor);
}
});

先说说_dispatchable的逻辑:

1
function _dispatchable(methodNames, xf, fn): Function

  1. _dispatchable返回的函数作为R.map的处理过程
  2. 接收 3 个参数:methodNames(方法名数组),xf(transformer),fn(默认的ramda实现)
  3. 如果methodNames中的方法名存在于传进R.map方法的最后一个参数f上,则将该方法作为处理过程
  4. 如果最后一个参数ftransformer,处理结果则是:一个新的transformer
  5. 如果以上3,4说的情况都没有,则使用ramda的默认处理过程(第一个代码块注释处)

总体看下来R.map有3种处理策略(按照优先级从上到下):

  1. 最后一个参数f上出现在methodNames中的方法
  2. 根据最后一个参数f返回新的transformer
  3. ramda默认处理逻辑

默认的处理逻辑就不再展开了,比较容易明白,先说说21放在后面讲。

transduce

进入正题之前,抛开ramda,看一个简单的栗子:

1
2
3
const add = (a, b) => a + b; 

[1,2,3,4].reduce(add, 0); // 10

计算出一个数组中所有数字的和。

现在如果要对每个数字+1,再求和:

1
2
3
4
const add = (a, b) => a + b; 
const plusOne = a => a + 1;

[1,2,3,4].map(plusOne).reduce(add, 0); // 14

上面的代码会遍历数组两次,虽然代码写起来省事了,如果数据量比较大,这个做法看起来就有些笨拙了。但是又不能改写add方法,万一别的地方也用到了add

想办法只遍历一次:结合addplusOne生成一个新的函数addNPlusOne

1
2
3
const addNPlusOne = (acc, value) => add(acc, plusOne(value));

[1,2,3,4].reduce(addNPlusOne, 0); // 14

嗯,解决了。但是还不够通用,将add视为reducerplusOne视为对value的预处理函数fn,通过结合fnreducer生成一个新的reducer提供给reduce

1
2
3
4
const makeMapRecuder = fn => reducer => (acc, value) => reducer(acc, fn(value));
const addNPlusOne = makeMapRecuder(plusOne)(add);

[1,2,3,4].reduce(addNPlusOne); // 14

transducer

makeMapRecuder(plusOne)就是一个transducer。

在之前的基础上:如果需要先筛选出小于等于2的数值,然后再给每一项+1,最后统计出数组中所有数的和。

需要再添加一个filterTransducer

1
2
3
4
5
const makeFilterReducer = fn => reducer => (acc, value) => fn(value)? reducer(acc, value) : acc;
const filterTransducer = makeFilterReducer(a => a <= 2);
const addNPlusltTwo = filterTransducer(addNPlusOne);

[1,2,3,4].reduce(addNPlusltTwo); // 5

好了,也就是说如果你不使用任何第三方库,这个生成transducer的函数需要你自己去实现。

在Ramda中

在Ramda中你可以这样实现上面的栗子:

1
2
3
4
5
R.transduce(R.map(a => a+1), (acc, value) => acc + value, 0, [1,2,3,4]);  // 14
R.transduce(R.pipe(
R.map(a => a+1),
R.filter(a => a <= 2),
), (acc, value) => acc+value, 0, [1,2,3,4]); // 5

再简化一点:

1
2
3
4
5
R.transduce(R.map(R.inc), R.add, 0, [1,2,3,4]); // 14
R.transduce(R.pipe(
R.map(R.inc),
R.filter(R.gte(2)),
), R.add, 0, [1,2,3,4]); // 5

之前的例子,我们自己实现了transducer

而对于ramda来说,很多作用于数组的api都会有默认的生成transducer的实现,比如mapfilterfind等等api。

好了,好像扯远了,我们再回到R.map上,看一看这里的transformer是啥意思。

  1. 根据最后一个参数f返回新的transformer
回到开始的话题

当你调用R.transduce的时候,它会把第二个参数R.add,转化为一个对象,这个对象上存在方法@@transducer/step,这个方法返回的是R.add(acc, value)。存在方法@@transducer/step的对象就叫做transformer

其实你可以这样理解:transformer是一个函数的载体,transformer['@@transducer/step']就是这个函数。

好了,如果当R.map的第二个参数是一个transformer的时候:

1
2
3
4
// _xwrap是ramda内部函数,用于将函数转为transformer
R.map(R.inc)(_xwrap(R.add))
// 跟下面是等价的
R.map(R.inc, _xwrap(R.add))

R.map(R.inc)其实就是上面我们说的transducer(transducer还能组合起来,不再展开了,有兴趣的同学可以加群讨论)

transducer+transformer = transformer,所以上面两行代码返回的结果依然是一个transformer,这个transformer@@transducer/step方法最终效果是下面这样:

1
2
3
XMap.prototype['@@transducer/step'] = function(acc, value) {
return R.add(acc, R.inc(value));
};

这个transformer代表的就是最终的reducer函数的容器,

1
2
3
4
R.transduce(R.map(R.inc), R.add, 0, [1,2,3,4]);
// 与下面是等价的
const xf = R.map(R.inc)(_xwrap(R.add));
R.reduce(xf['@@transducer/step'], 0, [1,2,3,4]);

总结一下

为了减少遍历次数,用transduce替代reduce,把之前reduce过程的前置操作比如map,filter,find等操作在一次遍历中完成。

为了实现这个transduce,以及在其上map,filter,find这种操作的可组合性,引入了transducer+transformer的概念。

这个transducer的概念最早是在Clojure里出现,有兴趣的同学可以看看Clojure作者的演讲

fantasyland/map

  1. 最后一个参数f上出现在methodNames中的方法
  2. 根据最后一个参数f返回新的transformer
  3. ramda默认处理逻辑

既然第2点讲完了,开始这篇文章的最后一部分,这一部分与上面讲的transducer没有任何关系,这一部分也是本文想着重介绍的。

1
var map = _dispatchable(['fantasy-land/map', 'map'],...)

从上面R.map的实现中可以看到,传入_dispatchablemethodsName中,第一个方法名是fantasyland/map

如果R.map(fn, obj)obj上有fantasyland/map方法,则R.map(fn, obj)等价于obj['fantasyland/map'](fn)

那么methodsName中另一个map和这个fantasyland/map有啥区别?为啥还有这么长的一个名字?

fantasyland规范

其实fantasyland/map这个名字是有特殊含义的,fantasyland/map没有特定的实现,不过,如果你要实现这么一个方法,你需要遵循fantasyland规范。

所谓的fantasyland规范,其实就是一个文档,这个文档里规定了一些代数结构在javascript里实现的约束

Fantasy Land Specification
aka “Algebraic JavaScript Specification”

如果你在大学有接触过《离散数学》的话,其中的一些概念会在这个规范中有具体的javascript定义,比如:二元关系(等价关系,全序关系),群,半群。当然,除了这3类数据结构,还有范畴以及在基础代数结构上衍生出来的其它结构。

类型签名

接下去我们会着重看一下与fantasy-land/map相关的定义,不过,在此之前有一些简单的类型签名,需要提前了解一下(下面的类型签名解释,是个人翻译版本,如果你有兴趣,可以直接看github上英文原版的解释):

  • ::“a属于类型b”
    • e :: t可以理解成:“e属于类型t”
    • true :: Boolean-“true属于Boolean类型”
    • 42 :: Integer,Number-“42既属于Integer也属于Number类型”
  • 通过类型构造函数可以构造一个新的类型
    • 类型构造函数接受0个或多个参数
    • Array就是一个类型构造函数,它接受一个类型作为参数
    • Array String是存放着字符串的数组,像这几个数组都是属于Array String[]['foo', 'bar', 'baz']
    • Array(Array String)是存放着数组的数组,存放的数组里面又存放着字符串,像这几个数组都是属于Array(Array String)[][[], []][[], ['foo'], ['bar`, 'baz']]
  • 小写字母是类型变量
    • 类型变量可以代表任何类型,除非用胖箭头(下面有介绍)对它做类型约束
  • ->(箭头)函数的类型构造函数
    • ->是一个中缀类型构造函数,这个类型构造函数接受两个参数,箭头左边的参数是输入类型,右边的参数是输出类型
    • ->可以接受0个或多个输入类型作为左边的参数。语法:(<input-types>) -> <output-type><input-types>中的多个类型以,分隔。一元函数输入参数旁边的括号可以省略,比如:String -> Boolean(String, String) -> Boolean
    • String -> Array String对应一类函数:接受一个String类型的参数,然后返回一个类型为Array String的值
    • String -> Array String -> Array String代表着一类函数:接受一个类型为String的输入,输出一个类型为Array String -> Array String的函数,这个输出的函数接受一个类型为Array String的参数,输出类型为Array String的值
    • (String, Array String) -> Array String代表着一类函数:接受两个参数,第一个是String类型,第二个是Array String类型,输出类型为Array String的值
    • () -> Number代表着一类函数:不接受输入,返回一个类型为Number的值
  • ~>(波浪箭头)方法的类型构造函数
    • 当一个函数是一个对象的属性时,它被叫做这个对象上的“方法”。所有的“方法”都拥有一个隐含的参数类型-所在对象的类型
    • a ~> a -> a代表着一类方法:是类型为a的对象上的方法,且这个方法接受一个类型为a的参数,返回一个类型为a的值
  • =>(胖箭头)胖箭头用来对类型变量做类型约束
    • 比如有这么一个方法a ~> a -> a,在这个方法的类型签名中,a可以代表任何类型。Semigroup a => a ~> a -> a,而这个类型签名中就对类型变量a做了类型约束,使得类型a必须满足类型类Semigroup。当一个类型满足一个类型类的意思是,这个类型实现了所有类型类指定的函数/方法。

就拿这次我们要说的fantasy-land/map举例:
fantasy-land/map

fantasy-land/map解析

先不管下面这部分

Functor

1
2
3
> u['fantasy-land/map'](a => a) is equivalent to u (identity)
> u['fantasy-land/map'](x => f(g(x))) is equivalent to u['fantasy-land/map'](g)['fantasy-land/map'](f) (composition)
>

直接看规范中对fantasy-land/map的定义:

1
fantasy-land/map :: Functor f => f a ~> (a -> b) -> f b

Functor是一个类型类,f必须满足Functorf a代表了以f作为类型构造函数,类型a作为构造参数生成的类型,比如Array String,代表字符串数组,Array就是f,它满足Functor类型类。

如果一个对象,是Functor实例(具体的值)。那么这个对象上需要存在一个名为fantasy-land/map的方法,这个方法必须接受一个函数作为参数:

1
2
3
u['fantasy-land/map'](f)
// 举个例子
[1,2,3]['fantasy-land/map'](f)

  1. f必须是一个函数
    • 如果f不是一个函数,fantasy-land/map的行为是不确定的
    • f可以返回任何类型的值
    • 不应该检测f的返回类型
  2. fantasy-land/map方法,必须返回一个相同的Functor(比如[1,2,3]['fantasy-land/map'](f)必须返回也一个数组:Array <f返回的类型>

其实可以类比Array.prototype.map方法,只是换了个名字而已。

那么说了这么多,Functor是个什么东东?除了Array以外,还有什么是Functor

其实Function也是Functor,惊喜吗?

不卖关子了,Functor的中文名是“函子”,接下来讲讲“函子”。

啥是函子

“函子”是范畴论中的概念,所以,在准备完全理解“函子”之前,你需要明白啥是“范畴”?

范畴

其实,在生活中,无处不充斥着范畴,只不过范畴论把这些东西抽象成了数学结构。

范畴此一概念代表着一堆数学实体和存在于这些实体间的关系。
维基百科

范畴的定义其实很简单,就是实体的集合+实体间的关系。

那么什么是“实体”?这取决于你怎么看。

从集合的角度来说,实体是a set of values,首先它得是一个集合(set),其次,这个集合是由有好多的值组成(value)。

还是比较抽象,再具体一点,比如:一个类型可被看作为值的集合(a set of values),类型与类型之间的关系就是函数,所以一堆类型+类型之间的函数,就是范畴。

比如有下面这些函数:

1
2
3
4
5
6
fn1 :: Number -> String
const fn1 = (a: number) => `${a}1`;

fn2 :: String -> Boolean
const fn2 = (a: string) => a === '1';
...

这些函数都是定义在Number和String上的映射关系。Number,String和Boolean,以及它们之间的映射关系,构成下面这个范畴
范畴

在范畴论中,图片中的NUMBERSTRINGBOOLEAN叫做“对象”(Object),fn1fn2叫做“态射”(Morphism),fn2 * fn1叫做“态射复合”,NUMBER -> NUMBER叫做单位态射。

明白什么是之后,接下来说一说我们的主角:函子

函子

先来看看维基上的解释:

在范畴论中,函子是范畴间的一类映射。函子也可以解释为小范畴范畴内的态射。
–维基百科

范畴和范畴也会有映射关系,如果把范畴视作一个对象时,函子就是范畴之间的态射。然后组成了一个范畴的范畴。

举个例子:考虑一个基础类型的范畴A,一个数组范畴B。
两个范畴

思考以下几个问题:

  1. NumberArray<Number>之间的关系
  2. StringArray<String>之间的关系
  3. NumberString的态射与Array<Number>Array<String>的态射的关系

之前介绍过Array是类型构造函数:

  1. Number传进Array,构造出Array<Number>
  2. String传进Array,构造出Array<String>
  3. 可通过Array上的map方法会保持Number -> String映射到Array<Number> -> Array<String>

再回顾一下上文对函子的定义:

在范畴论中,函子是范畴间的一类映射。

上面例子中,范畴A到范畴B的映射其实就是类型构造函数Array,所以说,Array就是函子。
函子

这里省去了对公式上的定义的match,争取大家对这个概念有感性的认识,如果想知道函子严谨的定义,可以看这里函子的定义

回到fantasy-land/map

了解了函子的感性定义之后,回到严谨的规范上来。

之前解析fantasy-land/map的时候,有个定义一直没有提及,就是Functorfantasy-land/map在文档中的位置其实是Functor的子标题,现在再来回顾一下。

Functor

1
2
3
> 1. u['fantasy-land/map'](a => a) is equivalent to u (identity)
> 2. u['fantasy-land/map'](x => f(g(x))) is equivalent to u['fantasy-land/map'](g)['fantasy-land/map'](f) (composition)
>

通过对比函子的公式定义,解析Functor需满足的条件(F即函子):

  1. 保持着单位态射(id即单位态射,idX即对象X上的单位态射)

    1
    F(id_X) = id_{F(X)}
  2. 保持着态射的复合

    1
    F(g*f) = F(f)*F(g)

总结一下fantasyland规范中对函子的定义

  1. 如果实现一个函子,你需要在函子上实现fantasy-land/map方法,这个方法的类型签名应该是这样的:

    1
    fantasy-land/map :: Functor f => f a ~> (a -> b) -> f b
  2. 函子实例调用方法fantasy-land/map时,需同时保持单位态射和态射的复合。

结尾

这篇文章不知不觉写得有些长了,从Ramda文档->源码->transducer->fantasyland规范->范畴论->函子,算是自己的完整的探索过程,希望能够带给你一些不一样的东西。

如果你对Ramda,函数式编程,甚至是范畴论感兴趣,欢迎加入我们的兴趣群。

参考文章
JavaScript玩转Clojure大法之Transducer
Wikipedia 范畴论
Wikipedia 函子

0%