专栏首页前端自习课【JS】446- 你不知道的 map

【JS】446- 你不知道的 map

前言

今日早读文章由酷家乐@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的维度是什么呢?

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

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

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

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

看看ramda源码

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

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

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

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

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

transduce

进入正题之前,抛开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
transducer

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中

在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是啥意思。

  1. 根据最后一个参数f返回新的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

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

既然第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规范

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

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

Fantasy Land Specificationaka "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个或多个输入类型作为左边的参数。语法:() ->,中的多个类型以“ , ”分隔。一元函数输入参数旁边的括号可以省略,比如: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解析

先不管下面这部分

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

其实可以类比 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。

两个范畴

思考以下几个问题:

  • Number 和 Array 之间的关系
  • String 和 Array 之间的关系
  • Number 到 String 的态射与 Array 到 Array 的态射的关系

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

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

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

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

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

函子

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

回到fantasy-land/map

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

之前解析 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上的单位态射)

保持着态射的复合

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

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

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

函子实例调用方法 fantasy-land/map 时,需同时保持单位态射和态射的复合。

结尾

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

参考文章

  • JavaScript玩转Clojure大法之Transducer
  • Wikipedia 范畴论
  • Wikipedia 函子

关于本文作者:@Gloria原文:https://zhuanlan.zhihu.com/p/96059965

本文分享自微信公众号 - 前端自习课(FE-study),作者:Gloria

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【React】345- React v16.9 新特性[译]

    今天我们发布了 React 16.9。它包含了一些新特性、bug修复以及新的弃用警告,以便与筹备接下来的主要版本。

    pingan8787
  • 【JS】415- JS面向对象之 7 大基本原则

    如果我们在编写程序的时候,一类或者一个方法里面包含了太多方法,对于代码的可读性来说,无非是一场灾难,对于我们来说。所以为了解决这个问题,出现了单一职责。

    pingan8787
  • 【React】393 深入了解React 渲染原理及性能优化

    我比较常用React, 这里就写了一篇 React 基础原理的内容, 面试基本上也就问这些, 分享给大家。

    pingan8787
  • Go 语言基础--map 浅析

    map通常是一种无序键值对的集合,map存在的意义主要是利用map的结构根据key来快速检索数据,在go中也是这样的。 map 也是一种集合,我们可以像遍历数...

    邹志全
  • map 学习(上)——C++中 map 的使用

    map 学习(上)——C++中 map 的使用 欠下数据结构的债,迟早是要还的…… 最近写毕业论文过程中,需要用到哈希表的数据结构,此外空闲时间在刷 Leetc...

    剑影啸清寒
  • 用Python做一个三阶拼图

    今天是年假的最后一天,明天大家就要回到各自的工作岗位上去,公众号从今天开始恢复更新。不知道大家假期过得怎么样,帅张提到假期多关注一些家里的变化,自己也记录了点东...

    不羁的程序员小王
  • 如何用Python做三阶拼图?

    今天是年假的最后一天,明天大家就要回到各自的工作岗位上去,公众号从今天开始恢复更新。不知道大家假期过得怎么样,帅张提到假期多关注一些家里的变化,自己也记录了点东...

    AI科技大本营
  • c++那些事儿12.0 STL--Map

    知识点综述: ---- map:关联容器。 1.0 由key--value组成,通过key,查找value,关键字key唯一。 2....

    东风冷雪
  • python3的一个奇怪设计--map

    这个改动真是太不正常了,ruby、js和lisp都没这么干的。我也没搞懂这样做有什么好处?

    用户2398817
  • Arcgis for JS之地图自适应调整

    概述:本节讲述的内容为当浏览器大小发生变化或者地图展示区域的大小发生变化时,地图的自适应调整。地图的自适应常见于以下几种情况:1、系统中有收缩或者全屏的按钮;2...

    lzugis

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动