经过节食来解释 JavaScript 的Reduce方法!

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

JavaScript中的reduce方法为您提供了一种简单的方法来获取值数组并将它们组合成一个值，或者根据多个类别对数组求和。

哇，一句话说得太多了，让咱们一步一步来吧！

固然，你可使用 for 循环遍历数组并对每一个值执行特定操做。可是，若是你不使用 filter()、map() 和reduce() 等方法，那么你的代码将变得更加难以阅读。其余开发人员须要完全阅读每一个循环才能理解其目的,并且容易出现更多的 bug，由于你须要建立更多的变量来跟踪单个值。

Filter 方法接受初始数组中的全部元素，而且只容许某些元素进入最终数组

Map 方法在初始数组中的每一个元素上运行一个函数，而后将其存储在最终数组中。

而 reduce 方法将初始数组中的元素组合成最终值或值数组。

我意识到这有点像节食。从很是简单的方法，如计算卡路里，到更复杂的饮食，如 Atkins 减肥法或称体重计(WeightWatchers)，目标是将你一天中可能吃的全部食物提炼成一个(或多个)值，看看你是否在减肥的轨道上。

用 For 循环模拟Reduce

下面是使用for循环快速显示reduce()功能的方法。假设你有一个包含你一天中吃过的5种不一样食物的卡路里计数的数组，你想知道你总共消耗了多少卡路里,代码以下：

这很简单，你建立一个变量来保存最终数量，而后在运行数组时添加它。可是，你仍然须要引入一个新变量，而且循环没有提供关于循环目的的线索。

一个简单的Reduce示例

让咱们学习如何使用reduce()方法实现相同的目标。

reduce() 方法接收一个函数做为累加器，数组中的每一个值（从左到右）开始缩减，最终计算为一个值。对空数组是不会执行回调函数的。

因此 reduce 有一些内存的概念。在遍历数组中的每一项时，sum参数将跟踪值。在前面的例子中，咱们必须在循环范围以外声明一个新变量来“记住”这些值。

这与for()之间的可读性彷佛没有太大区别。可是，当须要遍历数百行代码时，reduce 会让你快速了解代码块的用途。

例2 - 使用对象

到目前为止，咱们只举例一维数组。可是，若是您能够遍历一个都是数字的数组，那么你也能够遍历一个都是对象的数组。让咱们给每一个元素加一个名字，这样咱们就能知道咱们一天到底吃了什么。

你早餐吃了一份牛排，一些水果，而后午饭吃了一些沙拉和薯条，最后晚餐吃了冰淇淋，真是糟糕的一天！

但愿大家能看到整个数组的流动。当咱们研究每一种元素时，总热量的总和（ sum）就表明了一天所消耗的总热量，主要是把这些数值放进一个大桶里——一天的卡路里量。

例3 - 使用多个类别

因此若是这都是关于卡路里的，为何会有这么多不一样的饮食呢? 我不打算深究养分科学，但这里有一个归纳性的总结——对于 “最佳” 减肥方法有不少分歧。有些人鼓励你只计算卡路里，而另外一些人则关注蛋白质、碳水化合物、脂肪和其余任何因素。

让咱们设想一下，你但愿更改代码，以便可以基于任何常见的节食系统评估您的饮食。你须要追踪每种食物的碳水化合物和脂肪，而后你须要在最后统计一下，这样你就能算出你在每一个类别中消耗了多少克，如下咱们的食品（有虚假的养分价值）：

如今，咱们须要运行reduce()方法。可是，它不能在一个值中被跟踪，咱们想保留咱们的类别。所以，咱们的累加器须要是一个与数组具备相同类型的对象。

下面是这个过程的一个GIF图片：

在遍历数组每一个项时，你将更改对象中特定属性的值，若是该对象还没有具备正确名称的属性，则将建立该对象，以下：

咱们使用 bucket 做为对象，根据属性名对值进行分类。咱们使用 += 操做符为来自 foods 数组的对象中的每一个值添加到适当的bucket。请注意保存值的 key 的名字，这里是随意的，这是由于它是可有可无的——咱们只是想要数字，这样咱们就能够分析你一天饮食的成功。

如你所见，在咱们的输出中有一个问题，结果包含一个 name 字段为“steak”，咱们并不想存储该字段。所以，咱们须要指定另外一个参数——初始值。

这个参数在回调以后出现，咱们但愿将 calories、carbs 和 fat 字段初始化为0，以便咱们的 reduce 方法知道这是咱们将用于 bucket 参数的惟一三个键/值对，代码以下：

原文：https://codeburst.io/javascri...

你的点赞是我持续分享好东西的动力，欢迎点赞！

欢迎加入前端你们庭，里面会常常分享一些技术资源。