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

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。smy1.com请注意保存值的 key 的名字,这里是随意的,这是因为它是无关紧要的——我们只是想要数字,这样我们就可以分析你一天饮食的成功。

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

这个参数在回调之后出现,我们希望将 calories、carbs 和 fat 字段初始化为0,以便我们的 reduce 方法知道这是我们将用于 bucket 参数的唯一三个键/值对,代码如下:

原文地址:https://www.cnblogs.com/xinshijue6080/p/10119631.html

时间: 2024-11-05 12:07:11

通过节食来解释 JavaScript 的Reduce方法!的相关文章

JavaScript - reduce方法 (Array)

JavaScript - reduce方法 (Array) 解释:reduce() 方法接收一个函数作为累加器(accumulator),数组 中的每个值(从左到右)开始合并,最终为一个值. 语法:arr.reduce(callback,[initialValue]) 参数: callback:执行数组中每个值的函数,包含四个参数 previousValue:上一次调用回调返回的值,或者是提供的初始值(initialValue) currentValue:数组中当前被处理的元素 index:当前

reduce 方法 (Array) (JavaScript)

对数组中的所有元素调用指定的回调函数.该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供. 语法 array1.reduce(callbackfn[, initialValue]) 参数 参数 定义 array1 必需.一个数组对象. callbackfn 必需.一个接受最多四个参数的函数.对于数组中的每个元素,reduce 方法都会调用 callbackfn 函数一次. initialValue 可选.如果指定 initialValue,则它将用作初始值来启动累积.

在JavaScript函数式编程里使用Map和Reduce方法

所有人都谈论道workflows支持ECMAScript6里出现的令人吃惊的新特性,因此我们很容易忘掉ECMAScript5带给我们一些很棒的工具方法来支持在JavaScript里进行函数编程,这些工具方法我们现在可以使用了.在这些函数方法里主要的是基于JavaScript 数组对象的map()方法和reduce()方法. 如果你如今还没有使用map()和reduce()方法,那么现在是时候开始使用了.如今绝大部分的JavaScript开发平台都与生俱来的支持ECMAScript5.使用Map方

关于 JavaScript 中的 reduce() 方法

一.什么是 reduce() ? reduce() 方法对数组中的每个元素执行一个升序执行的 reducer 函数,并将结果汇总为单个返回值 const array1 = [1, 2, 3, 4]; const reducer = (accumulator, currentValue) => accumulator + currentValue; // 1 + 2 + 3 + 4 console.log(array1.reduce(reducer)); // 输出: 10 // 5 + 1 +

从Java开发者的视角解释JavaScript

我们无法在一篇博文里解释JavaScript的所有细节.如果你正或多或少地涉及了web应用程序开发,那么,我们的Java工具和技术范围报告揭示了,大多数(71%)Java开发者被归到了这一类,只是你对JavaScript遇到了阻碍. 毫无疑问,你已经知道了Java和JavaScript,不管它们有着多么类似的命名,彼此没有共享太多共通之处.Java的静态类型.符合直接规律的简单语法和冗长,与JavaScript的动态.缺乏一致性原则和怪异,有着巨大的不同. 然而,JavaScript是web的编

JavaScript 数组遍历方法的对比

前言 JavaScript 发展至今已经发展出多种数组的循环遍历的方法,不同的遍历方法运行起来那个比较快,不同循环方法使用在那些场景,下面将进行比较: 各种数组遍历的方法 for 语句 代码: var arr = [1,2,4,6] for(var i = 0, len = arr.length; i < len; i++){ console.log(arr[i]) } 复制代码 这是标准for循环的写法也是最传统的语句,字符串也支持,定义一个变量i作为索引,以跟踪访问的位置,len是数组的长度

es 5 数组reduce方法记忆

reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值. 概念:对数组中的所有元素调用指定的回调函数.该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供. 语法: array1.reduce(callbackfn[, initialValue]) 参数: 参数 定义 array1 必需.一个数组对象. callbackfn 必需.一个接受最多四个参数的函数.对于数组中的每个元素,reduce 方法都会调

【转】深入学习JavaScript: apply call方法 详解(转)

Js apply方法详解 原文:http://blog.csdn.net/myhahaxiao/article/details/6952321 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享..  如有什么不对的或者说法不明确的地方希望读者多多提一些意见,以便共同提高.. 主要我是要解决一下几个问题: 1.        apply和cal

深入了解javascript的sort方法

在javascript中,数组对象有一个有趣的方法 sort,它接收一个类型为函数的参数作为排序的依据.这意味着开发者只需要关注如何比较两个值的大小,而不用管"排序"这件事内部是如何实现的.不过了解一下sort的内部实现也不是一件坏事,何不深入了解一下呢? 算法课上,我们会接触很多种排序算法,什么冒泡排序.选择排序.快速排序.堆排序等等.那么javascript的 sort方法采用哪种排序算法呢?要搞清楚这个问题,呃,直接看v8源代码好了.v8中对 Array.sort的实现是采用ja