本文摘取和翻译自Medium文章：Map, Filter and Reduce – Animated。

对于Map、Filter和Reduce，我们经常给出很多复杂通过可视化去记忆它们的思路。没有任何以可视化为作为出发点的撸码教学的文章。然而可视化在教学上是扮演着总要的角色的。这也适用于撸码。

即使是和Map、Filter和Reduce打交道了多年，我仍然常常问自己：这是不是生成了原始数组的副本？是否会关联原数组的变化？我将通过制作本次教程解答这些问题。

我希望一旦通过这种可视化的方式，记忆起来会更加简单。

Array.map – 映射所有元素至一个表达式。

1] 表达式value +1被应用于每一个原始数组的元素中。

2] .map()返回的是一个被修改的的副本，而对原始数组没有任何影响。

3] 结果：[2,3,4,5,6,7,8](一个新的数组被创建)。

Array.filter – 保留所有与条件匹配的元素。

（这里作者说图片有误，待修复，应该只会返回6和7哦😂）

1] 方法value > 5被应用于每一个原始数组的元素中。

2] .filter()返回的是一个被修改的的副本，原始数组仍然可以访问到原始数据。

3] 结果：[6,7](只有会通过符合条件的值)。

Array.reduce – 归约所有的的元素成一个单独的值。

reduce的一个常用的场景是将购物车内的所有物品价格进行累加计算总价。

reduce的特别之处就是它使用了一个累加器（accumulator）。

累加器需要设置一个起始值，在这里是0。

1 ] Reducer（reduce回调） F 接受当前reduce到的value和 目前累加器的值.

2 ] 在这个示例中，reduce(v, a) 返回所有value的总和.

3 ] 结果：28 (原始数组中所有item的总和)

总结

这些高级函数，可以（也应当）用于解决各式各样的不同的问题。

Map，Filter和Reduce也可以用于包含object的数组，不仅仅限于number数组。

最后

这一篇文章其实很简单，但是该作者做的图的确令人耳目一新，所以决定搬运并翻译一下。

文中一些描述可能被我修改了。

原作者在medium上还有很多关于javascript的教程，作者本身就叫做JavaScript Teacher。

原文地址： https://medium.com/@js_tut/map-filter-and-reduce-animated-7fe391a35a47

翻译：Hobairiku me@hobariku.site