05｜map、reduce和monad如何围绕值进行操作？

石川

你好，我是石川。
上节课里，我们在学习组合和管道的工作机制的时候，第一次认识了 reducer，同时在讲到 transduce 的时候，也接触到了 map、filter 和 reduce 这些概念。那么今天这节课，我们就通过 JS 中数组自带的功能方法，来进一步了解下 transduce 的原理，做到既知其然，又知其所以然。
另外，我们也看看由 map 作为 functor 可以引申出的 monad 的概念，看看它是如何让函数间更好地进行交互的。
数据的核心操作那在正式开始之前，我先来说明下这节课你要关注的重点。课程中，我会先带你通过 JavaScript 本身自带的映射（map）、过滤（filter）和 reduce 方法，来了解下这几种方法对值的核心操作。同时呢，我也给你解答下上节课提出的问题，即如何通过映射和过滤来做到 reduce。作为我们后面讲到 functor 和 monad 的基础。
好，下面我们就从 map 开始讲起。
map 映射和函子我们经常听说，array.map 就是一个函子（functor），那什么是一个函子呢？
实际上，函子是一个带运算工具的数据类型或数据结构值。举个常用的例子，在 JavaScript 中，字符串（string）就是一个数据类型，而数组（array）既是一个数据类型也是一个数据结构，我们可以用字符串来表达一个单词或句子。而如果我们想让下图中的每个字母都变成大写，那么就是一个转换和映射的过程。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

JavaScript中的值操作是函数式编程中的核心概念，本文通过介绍map、reduce和monad的概念，深入探讨了围绕值进行操作的原理和应用。文章首先通过JavaScript中数组自带的map、filter和reduce方法，讲解了这几种方法对值的核心操作，以及如何通过映射和过滤来做到reduce。其次，详细解释了函子（functor）的概念，以及map映射和过滤器（filter）的作用。在讲解reduce时，重点介绍了缩减器（reducer）函数和初始值的作用，以及如何利用映射和过滤的方法来实现reduce。最后，文章引入了单子（monad）的概念，通过array作为functor和chain方法函数的使用，展示了monad的作用。通过具体的JavaScript代码示例，读者可以深入了解map、reduce和monad在函数式编程中的应用。此外，文章还提到了应用函子（applicative）和pointed函子的概念，以及对数组中array.of工厂方法的介绍。总结来说，本文通过深入浅出的方式，帮助读者理解了函数式编程中围绕值进行操作的核心概念，为进一步学习函数式编程打下了基础。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《JavaScript 进阶实战课》，新⼈⾸单¥59

立即购买

登录后留言

全部留言(8)

最新
精选

思文
单子、函子这些感念看完还是有些陌生，有什么办法深入理解下吗，比如需要看那些文章等等
作者回复: Jack Widman写的《Learning Functional Programming》是一本不错的入门读物。
2022-10-26归属地：北京
4
4
Yum.X
function Just(val) { return { map }; function map(fn) { return Just( fn( val ) ); } } var A = Just( 10 ); var B = A.map( v => v * 2 ); // 20 运行了这段代码，这里回的不是20
作者回复: 如果要“打印”结果的话，可以加一个方法： function Just(val) { return { map, log }; function log() { return `Just(${ val })`; } } B.log(); // 20
2022-10-18归属地：北京
3
1
lin
ap 这里我还是不太理解。根据 exp：、、、 const a = Just(1); // Just(1) const b = Just(2); // Just(2) const c = a.map(addFive); // Just(6) c.ap(b); // Error: Just(6(2)) -> 6 is not a function 、、、这里的调用应该会出现问题。
作者回复: 要使用ap的话，monad 中需要持有一个函数，并且这个函数应该要持有并记住 a 的变量。我看不到你的 addFive() 的具体实现，但是通常 a.map() 中应该是一个 curry(func)，例如：a.map(curry(func))。
2022-12-07归属地：海南


朱基
在“reduce 和缩减器”这一节的课程里，突然显示了一代码示例，var getSessionId = partial( prop, "sessId" );…if (orders != null) processOrders( orders ); 它是用来说明上面所说的：“我们没有必要为了几乎没有负面影响的副作用—改变了原数据，而牺牲性能”的吗？
作者回复: 之前有些勘误，已经修改了。
2022-11-10归属地：海南


李滨
array 作为 functor 小节下面的那个例子 : Just return 的map函数的定义不对吧，map应该直接返回 fn(val)吧？
作者回复: 这里没啥问题。映射后，返回之后的也应该是一个Just包装的值。例如： var A = Just( 30 ); var B = A.map( v => v * 2 ); // Just(60)
2022-10-09归属地：北京
2

Nuvole Bianche
function Just(val) { return { map, log }; function map(fn) { return Just(fn(val)); } function log() { return `Just(${val})`; } } var A = Just(10); var B = A.map((v) => v * 2); // 20 console.log(B.log()); // Just(20) console.log(A.log()); // Just(10) 反复看后，注意到这里其实生成了两个闭包，一个是针对A的闭包这时val是10，二针对B的闭包中val存放的是20。作为小白的知道这种写法非常nobility，但现阶段的我完全不知道这种写法的具体使用场景。
2023-01-16归属地：上海

1
海绵薇薇
“而缩减 reduce 除了能独立来实现以外，也可以用映射 map 和过滤 filter 的方法来实现。" 这句话是不是反了🤣，”map和filter除了能独立实现以外，也可以用reduce的方法来实现。“还是我理解的有点问题🤣。
2023-01-12归属地：北京

1
轩爷
function Just(val) { return { map }; function map(fn) { return fn( val ) ; } } var A = Just( 10 ); var B = A.map( v => v * 2 ); // 20 function Just(val) { return { map }; function map(fn) { return Just( fn( val ) ); } } var A = Just( 10 ); var B = A.map( v => v * 2 ); // { map: f}
2023-02-10归属地：北京



收起评论