js reduce实现map_你不知道的map

最新推荐文章于 2024-01-14 12:14:35 发布
最新推荐文章于 2024-01-14 12:14:35 发布
阅读量212 收藏
点赞数
文章标签： js reduce实现map

7ce8617d0596dd0d5b30a1ca6a91b66c.png

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

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

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

下面我们进入到例子。

简单的使用

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

R

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

R

你以为就完了吗？它还能作用于函数： 

R

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

当然可以，有很多东西从某种维度上讲都是同一类东西，关键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源码

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

var

先说说_dispatchable的逻辑： 

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

总体看下来R.map有3种处理策略（按照优先级从上到下）：

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

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

transduce

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

const

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

现在如果要对每个数字+1，再求和： 

const

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

想办法只遍历一次：结合add和plusOne生成一个新的函数addNPlusOne： 

const

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

const

transducer

makeMapReducer(plusOne)就是一个transducer。

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

需要再添加一个filterTransducer：

const

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

在Ramda中

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

R

再简化一点： 

R

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

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

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

2. 根据最后一个参数 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)其实就是上面我们说的transducer（transducer还能组合起来，不再展开了，有兴趣的同学可以加群讨论）

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

XMap

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

R

总结一下

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

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

这个transducer的概念最早是在Clojure里出现，有兴趣的同学可以看看

'Transducers' by Rich Hickey_土豆视频​video.tudou.com
4e93221d28543ed1b29550163ae21bc2.png

fantasyland/map

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

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

var

从上面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 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举例：

e0b3bfee97e44dffd0a8b879f02f5a5b.png
fantasy-land/map

fantasy-land/map解析

先不管下面这部分

Functor
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的定义： 

fantasy

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

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

u
  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），类型与类型之间的关系就是函数，所以一堆类型+类型之间的函数，就是范畴。

比如有下面这些函数： 

fn1

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

a4bde6e280b37960db512fde8225796a.png
范畴

在范畴论中，图片中的 NUMBER ， STRING 和 BOOLEAN 叫做“对象”（Object），fn1 和 fn2 叫做“态射”（Morphism）， fn2 * fn1 叫做“态射复合”， NUMBER -> NUMBER 叫做单位态射。

明白什么是范畴之后，接下来说一说我们的主角：函子

函子

先来看看维基上的解释：

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

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

举个例子：考虑一个基础类型的范畴A，一个数组范畴B。

59f44d6c8bf9d2f81e31566d3601af1c.png
两个范畴

思考以下几个问题：

  1. Number 和 Array<Number> 之间的关系
  2. String 和 Array<String> 之间的关系
  3. Number 到 String 的态射与 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 就是函子。

bd25a75d905937108a0c8410f0df0b29.png
函子

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

函子的定义​zh.wikipedia.org

回到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即函子）：

1. 保持着单位态射（id即单位态射，idX即对象X上的单位态射）

2. 保持着态射的复合

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

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

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

结尾

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

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

参考文章

JavaScript玩转Clojure大法之Transducer

Wikipedia 范畴论

Wikipedia 函子

weixin_39926613
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript之map reduce_动力节点Java学院整理
10-19
主要为大家详细介绍了JavaScript之map reduce的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js获取map对象的key和value
qq_48964916的博客
06-04 1万+
js获取map对象的key值
JS 中 reduce()方法及使用详解
前端菜菜DayDayUp的博客
02-01 6万+
JS 中 reduce()方法及使用详解
JS中reduce的用法
热门推荐
fighting ~的博客
10-28 12万+
reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。reduce方法可做的事情特别多，就是循环遍历能做的，reduce都可以做，比如数组求和、数组求积、数组中元素出现的次数、数组去重等等。
在 js 中，reduce() 的详解 以及使用方法
w17624003437的博客
07-18 4万+
1.当reduce（）方法的第二个值为空时，第一次循环方法中的第一个参数（prev）为数组的第一项值，第二个参数（cur）为数组的第二项值，反之，第一次循环方法中的第一个参数（prev）为reduce的第二个参数值，第二个参数（cur）为数值的第一项值。2.reduce（）方法的第一个参数，就是每次遍历都会执行的匿名函数，当前函数的返回值就会传给下一次执行函数的第一个值。也就是prev。...
JS reduce()方法详解
hzxOnlineOk的博客
09-30 2万+
reduce()方法可以搞定的东西，for循环，或者forEach方法有时候也可以搞定，那为啥要用reduce()？这个问题，之前我也想过，要说原因还真找不到，唯一能找到的是：通往成功的道路有很多，但是总有一条路是最捷径的，亦或许reduce()逼格更高... 1、语法 arr.reduce(callback,[initialValue]) reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素.
tags_map_reduce
05-13
标题“tags_map_reduce”指的是一个特定的项目或技术实践，涉及到使用MapReduce处理“tags”相关的数据。MapReduce是一种分布式计算模型，常用于大数据处理，由Google在2004年的论文中提出，主要应用于像Hadoop这样...
js代码-es5 reduce 实现 map
07-16
在提供的 `main.js` 文件中，可能包含了使用 `reduce()` 实现 `map()` 功能的具体示例代码，可以通过查看该文件了解实际的实现方式。而 `README.txt` 文件可能是对这个实现的解释或说明，包括可能的注意事项和使用...
用数组的reduce方法实现map方法
weixin_45740510的博客
04-06 1947
what 首先我们需要理解reduce这个方法的语法： arr.reduce(callback,init) //详细写法 arr.reduce((prev,cur,index,arr)={ ... },[]) * callback （执行数组中每个值的函数，包含四个参数） 1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue）） 2、currentValue （数组中当前被处理的元素） 3、index （当前元素在数组中的索引） 4、ar
js中reduce()函数的用法
m0_56132701的博客
03-03 1万+
reduce()方法对每一个数组的每一个元素按序执行一个由您提供的reduce函数。每一次运行reduce会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为0的开始执行，则需要传递初始值，否则数组的索引为0的值作为初始值initalValue，迭代器从第二个元素开始执行（索引为1而不是0）
javascript中reduce的用法
to_the_Future的博客
06-28 8436
本篇文章主要介绍了JavaScript中reduce方法的常用场景和使用示例，并提供了自己实现reduce方法的代码示例。掌握reduce方法的使用方法，能够提高代码的可读性和扩展性，减少冗余代码量，同时也实现了更好的代码复用。
JS数组函数 reduce() 的用法—包含基础、进阶、高阶用法
青春木鱼的博客
01-14 4776
reduce 方法在数组的每个元素上执行用户提供的回调函数，即“reducer”。它传入对前一个元素进行计算的返回值。结果是单个值。它是在数组的所有元素上运行 reducer 的结果。 它是如何工作的？reducer 函数逐个遍历数组元素。在每一步中，reducer 函数将当前数组值添加到上一步的结果中，直到没有更多元素要添加。
使用reduce实现map
weixin_34174422的博客
02-21 1262
刚刚接触的时候觉得很简单的问题，但真正下手实现的时候，发现牵扯出很多的东西。你真的完全了解Array.prototype.map吗 map相关的概念 遍历数组的每一项，并执行回调函数的操作，返回一个对每一项进行操作后的新数组， arr1.map(function(item,idx,arr){ item //数组的每一项 idx // 当前项的索引 arr // 当前...
用 reduce 实现 map 的功能
最新发布
shrfgbfg的博客
01-14 489
return acc;}, []);测试：});
reduce实现map(js)
小白目的博客
05-21 631
目录 引言 reduce方法 map方法 reduce实现map reduce 实现 map 、filter 引言 js 的数据结构里数组 Array 无疑是最重要的部分之一，包含很多方法属性各有用途，假如用它们互相实现，相信是件很有趣的事儿。用reduce 实现map之前先得了解reduce 和 map 方法。 reduce方法 作用：对数组中的每个元素按序执行传入的回调函数，每一次运行回调会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个...
Currying and Uncurrying Js
weixin_30709061的博客
06-19 207
//反科里化Function.prototype.uncurrying = function() { var _this = this; return function() { return Function.prototype.call.apply(_this, arguments); //_this.call(arguments); //在下面的例子中Array.prototype.pu...
JavaScript中reduce的用法
qq_43205326的博客
11-16 4832
JavaScript之reduce()的用法 文章目录JavaScript之reduce()的用法前言一、首先了解一下什么是reduce二、进阶的用法总结 前言 本篇为文章主要总结了reduce()的用法，可能有一些难理解，可以多看几遍，然后动手实际操作。 一、首先了解一下什么是reduce 1、reduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素。（看不懂，往下看简单的实例） 语法：arr.reduce(callback
JS 中的 reduce：一种函数式编程的艺术
05-10 1435
reduce是JavaScript中一个非常强大的数组方法，它可以用来对数组中的元素进行累计操作，从而得到一个单一的值。reduce的基本用法是接受一个回调函数和一个初始值作为参数，然后遍历数组，将每个元素和累计值传递给回调函数，最后返回最终的累计值。reduce有很多超级实用的使用技巧，本文将介绍其中的10个，供大家参考。
JS中的reduce()函数介绍
潮汐未见潮落的博客
07-27 2万+
JS的reduce讲解
js reduce和map
05-27
JavaScript中的reduce和map都是数组的高阶函数，可以用来对数组进行处理。 map函数会对数组中的每个元素都执行一个回调函数，并返回一个新的数组，新数组的元素是原数组经过回调函数处理后的结果。 reduce函数则...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值