前言
今日早读文章由酷家乐@Gloria投稿分享。
正文从这开始~~
作为前端工程师,你肯定用过Array.prototype.map方法。
如果你听说过Ramda,它也提供了和Array.prototype.map方法类似的map方法。
但是这个map背后的东西可以让你看到另外一个世界,我相信,如果你不想了解Ramda,也能从这篇文章中有所收获。
下面我们进入到例子。
像下面这样使用这个函数。
R.map(x => x + 1, [1, 2, 3]); // [2, 3, 4]
除了数组外它还可以作用于Object:
R.map(x => x + 1, {a: 1, b: 2, c: 3}); // {a: 2, b: 3, c: 4}
你以为就完了吗?它还能作用于函数:
R.map(x => x + 1, a => a + 1); // a => (a+1)+1
哇,作用于函数真的是没想到,那还能作用于其它奇奇怪怪的东西吗?
当然可以,有很多东西从某种维度上讲都是同一类东西,关键R.map的维度是什么呢?
先别讲什么乱七八糟的,接下来咱们来看一看官方文档上都有哪些描述.
行了,除了2,3能看懂,其它都是啥??!!functor??transfomer??transducer??
我们找到Ramda的源码,看看这个map究竟都有哪些魔法?
隐去了一些不需要了解的逻辑,下面是代码:
var map = _dispatchable(['fantasy-land/map', 'map'], _xmap, function map(fn, functor) {
/*ramda默认处理逻辑*/
switch(Object.prototype.toString.call(functor)) {
case'[object Function]':
returnfunction() {
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的逻辑:
function _dispatchable(methodNames, xf, fn): Function
总体看下来R.map有3种处理策略(按照优先级从上到下):
默认的处理逻辑就不再展开了,比较容易明白,先说说2,1放在后面讲。
进入正题之前,抛开ramda,看一个简单的栗子:
const add = (a, b) => a + b;
[1,2,3,4].reduce(add, 0); // 10
计算出一个数组中所有数字的和。
现在如果要对每个数字+1,再求和:
const add = (a, b) => a + b;
const plusOne = a => a + 1;
[1,2,3,4].map(plusOne).reduce(add, 0); // 14
上面的代码会遍历数组两次,虽然代码写起来省事了,如果数据量比较大,这个做法看起来就有些笨拙了。但是又不能改写add方法,万一别的地方也用到了add。
想办法只遍历一次:结合add和plusOne生成一个新的函数addNPlusOne:
const addNPlusOne = (acc, value) => add(acc, plusOne(value));
[1,2,3,4].reduce(addNPlusOne, 0); // 14
嗯,解决了。但是还不够通用,将add视为reducer,plusOne视为对value的预处理函数fn,通过结合fn和reducer生成一个新的reducer提供给reduce
const makeMapReducer = fn => reducer => (acc, value) => reducer(acc, fn(value));
const addNPlusOne = makeMapReducer(plusOne)(add);
[1,2,3,4].reduce(addNPlusOne); // 14
makeMapReducer(plusOne)就是一个transducer。
在之前的基础上:如果需要先筛选出小于等于2的数值,然后再给每一项+1,最后统计出数组中所有数的和。
需要再添加一个filterTransducer:
const makeFilterReducer = fn => reducer => (acc, value) => fn(value)? reducer(acc, value) : acc;
const filterTransducer = makeFilterReducer(a => a <= 2);
const addNPluslteTwo = filterTransducer(addNPlusOne);
[1,2,3,4].reduce(addNPlusltTwo); // 5
好了,也就是说如果你不使用任何第三方库,这个生成transducer的函数需要你自己去实现。
在Ramda中你可以这样实现上面的栗子:
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
再简化一点:
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的实现,比如map,filter,find等等api。
好了,好像扯远了,我们再回到R.map上,看一看这里的transformer是啥意思。
当你调用R.transduce的时候,它会把第二个参数R.add,转化为一个对象,这个对象上存在方法@@transducer/step,这个方法返回的是R.add(acc, value)。存在方法@@transducer/step的对象就叫做transformer。
其实你可以这样理解:transformer是一个函数的载体,transformer['@@transducer/step']就是这个函数。
好了,如果当R.map的第二个参数是一个transformer的时候:
// _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方法最终效果是下面这样:
XMap.prototype['@@transducer/step'] = function(acc, value) {
return R.add(acc, R.inc(value));
};
这个transformer代表的就是最终的reducer函数的容器
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里出现,有兴趣的同学可以看看:https://video.tudou.com/v/XMjMxNTY2MDgzNg==.html?__fr=oldtd
f
上出现在 methodNames
中的方法f
返回新的 transformer
既然第2点讲完了,开始这篇文章的最后一部分,这一部分与上面讲的transducer没有任何关系,这一部分也是本文想着重介绍的。
var map = _dispatchable(['fantasy-land/map', 'map'],...)
从上面R.map的实现中可以看到,传入_dispatchable的methodsName中,第一个方法名是fantasyland/map。
如果R.map(fn, obj),obj上有fantasyland/map方法,则R.map(fn, obj)等价于 obj['fantasyland/map'](fn)
。
那么methodsName中另一个map和这个fantasyland/map有啥区别?为啥还有这么长的一个名字?
其实fantasyland/map这个名字是有特殊含义的,fantasyland/map没有特定的实现,不过,如果你要实现这么一个方法,你需要遵循fantasyland规范。
所谓的fantasyland规范,其实就是一个文档,这个文档里规定了一些代数结构在javascript里实现的约束
Fantasy Land Specificationaka "Algebraic JavaScript Specification"
如果你在大学有接触过《离散数学》的话,其中的一些概念会在这个规范中有具体的javascript定义,比如:二元关系(等价关系,全序关系),群,半群。当然,除了这3类数据结构,还有范畴以及在基础代数结构上衍生出来的其它结构。
接下去我们会着重看一下与fantasy-land/map相关的定义,不过,在此之前有一些简单的类型签名,需要提前了解一下(下面的类型签名解释,是个人翻译版本,如果你有兴趣,可以直接看github上英文原版的解释):
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个或多个输入类型作为左边的参数。语法:() ->,中的多个类型以“ , ”分隔。一元函数输入参数旁边的括号可以省略,比如: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
先不管下面这部分
Functoru'fantasy-land/map' is equivalent to u (identity)u'fantasy-land/map') is equivalent to u'fantasy-land/map''fantasy-land/map' (composition)
直接看规范中对fantasy-land/map的定义:
fantasy-land/map :: Functor f => f a ~> (a -> b) -> f b
Functor是一个类型类,f 必须满足 Functor, f a 代表了以 f 作为类型构造函数,类型 a 作为构造参数生成的类型,比如 Array String,代表字符串数组,Array 就是 f ,它满足Functor类型类。
如果一个对象,是Functor实例(具体的值)。那么这个对象上需要存在一个名为 fantasy-land/map 的方法,这个方法必须接受一个函数作为参数:
u['fantasy-land/map'](f)
// 举个例子
[1,2,3]['fantasy-land/map'](f)
其实可以类比 Array.prototype.map 方法,只是换了个名字而已。
那么说了这么多,Functor 是个什么东东?除了 Array 以外,还有什么是 Functor ?
其实 Function 也是 Functor ,惊喜吗?
不卖关子了,Functor 的中文名是“函子”,接下来讲讲“函子”。
“函子”是范畴论中的概念,所以,在准备完全理解“函子”之前,你需要明白啥是“范畴”?
其实,在生活中,无处不充斥着范畴,只不过范畴论把这些东西抽象成了数学结构。
范畴此一概念代表着一堆数学实体和存在于这些实体间的关系。--维基百科
范畴的定义其实很简单,就是实体的集合+实体间的关系。
那么什么是“实体”?这取决于你怎么看。
从集合的角度来说,实体是 a set of values ,首先它得是一个集合(set),其次,这个集合是由有好多的值组成(value)。
还是比较抽象,再具体一点,比如:一个类型可被看作为值的集合(a set of values),类型与类型之间的关系就是函数,所以一堆类型+类型之间的函数,就是范畴。
比如有下面这些函数:
fn1 :: Number-> String
const fn1 = (a: number) => `${a}1`;
fn2 :: String-> Boolean
const fn2 = (a: string) => a === '1';
...
这些函数都是定义在Number和String上的映射关系。Number,String和Boolean,以及它们之间的映射关系,构成下面这个范畴
范畴
在范畴论中,图片中的 NUMBER , STRING 和 BOOLEAN 叫做“对象”(Object),fn1 和 fn2 叫做“态射”(Morphism), fn2 * fn1 叫做“态射复合”, NUMBER -> NUMBER 叫做单位态射。
明白什么是范畴之后,接下来说一说我们的主角:函子
先来看看维基上的解释:
在范畴论中,函子是范畴间的一类映射。函子也可以解释为小范畴范畴内的态射。--维基百科
范畴和范畴也会有映射关系,如果把范畴视作一个对象时,函子就是范畴之间的态射。然后组成了一个范畴的范畴。
举个例子:考虑一个基础类型的范畴A,一个数组范畴B。
两个范畴
思考以下几个问题:
之前介绍过 Array 是类型构造函数:
Array<Number>->Array<String>
再回顾一下上文对函子的定义:
在范畴论中,函子是范畴间的一类映射。
上面例子中,范畴A到范畴B的映射其实就是类型构造函数 Array ,所以说, Array 就是函子。
函子
这里省去了对公式上的定义的match,争取大家对这个概念有感性的认识,如果想知道函子严谨的定义,可以看这里
了解了函子的感性定义之后,回到严谨的规范上来。
之前解析 fantasy-land/map 的时候,有个定义一直没有提及,就是 Functor , fantasy-land/map 在文档中的位置其实是Functor的子标题,现在再来回顾一下。
Functor
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即函子):
保持着单位态射(id即单位态射,idX即对象X上的单位态射)
保持着态射的复合
如果实现一个函子,你需要在函子上实现 fantasy-land/map 方法,这个方法的类型签名应该是这样的:
fantasy-land/map :: Functor f => f a ~> (a -> b) -> f b
函子实例调用方法 fantasy-land/map 时,需同时保持单位态射和态射的复合。
这篇文章不知不觉写得有些长了,从Ramda文档->源码->transducer->fantasyland规范->范畴论->函子,算是自己完整的探索过程,希望能够带给你一些不一样的东西。
关于本文作者:@Gloria原文:https://zhuanlan.zhihu.com/p/96059965