​Map, Filter和Reduce－动画版

Map, Filter和Reduce已经存在很长时间了。 它们通常被视为函数式编程风格的一部分。

下面的动画看起来可能有点不自然。但是因为只用了创建的俄罗斯方块网格（在以前的《如何制作俄罗斯方块》教程中）。大家可以也来看看。

我们经常把复杂的概念通过形象化的方式记在脑海中。使用可视化作为学习起点的编程文章并不多见。然而，视觉化在教育中是很重要的一环。编程也一样。

即使在使用map、filter和reduce多年之后，仍然常常问自己:是否创建了原始数组的副本?是否修改了对原始数组的引用?写下这篇教程也是为了给这些问题一个答案。

希望是，一旦它被视觉化，它将更容易被记住。

Array.map-将所有值映射到表达式

Array.map(): 将“数值 + 1” 运用到一个有7个数的集合[1, 2, 3, 4, 5, 6, 7]中

1]表达式：数值+1应用于原始数组中的每个项。

2].map()返回一个数组的修改过的副本，使原始数组保持原样。

3]结果：[2,3,4,5,6,7,8]（创建原始数组的副本。）

Array.filter–保留所有符合条件的内容

注意：动画中有一个小错误。它应该返回[6,7]，而不是[6,7,8]。我马上就改…

1]函数：数值>5应用于原始数组中的每个项。

2].filter()返回数组的修改过的副本-原始副本仍然可用！

3]结果：[6,7,8]（仅限通过条件的值。）

Array.reduce–将所有项目减少到一个值
Reducer的一个常见用法是将购物车中所有商品的价格加起来。

Reduce的独特之处在于它使用了一个累计器。

我们需要为累计器设置起始值。这里我们设置的是0。

1]Reducer函数F将会取值然后累计。

在我们的例子中，.reduce(v, a) 将返回所有值的和。

3]结果：28(原数组中所有数字之和)

结论
当然，这些高阶函数也可以(也应该)用于解决各种各样的问题。

Map, Filter和Reduce也可以用于对象数组。它们不限于仅仅处理数值。

今天的分享就到这里，希望本文能帮助到您！

❤️ 看之后

• 点赞，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -_-）
• 关注公众号「新前端社区」，号享受文章首发体验！每周重点攻克一个前端技术难点。