经由过程节食来诠释 JavaScript 的Reduce要领!

《经由过程节食来诠释 JavaScript 的Reduce要领!》

想浏览更多优良文章请猛戳GitHub博客,一年百来篇优良文章等着你!

JavaScript中的reduce要领为您供应了一种简朴的要领来获取值数组并将它们组合成一个值,或许依据多个种别对数组乞降。

哇,一句话说得太多了,让我们一步一步来吧!

固然,你可以运用 for 轮回遍历数组并对每一个值实行特定操纵。然则,假如你不运用 filter()、map() 和reduce() 等要领,那末你的代码将变得越发难以浏览。其他开发人员须要完全浏览每一个轮回才明白其目的,而且轻易涌现更多的 bug,由于你须要建立更多的变量来跟踪单个值。

Filter 要领吸收初始数组中的一切元素,而且只允许某些元素进入终究数组

Map 要领在初始数组中的每一个元素上运转一个函数,然后将其存储在终究数组中。

reduce 要领将初始数组中的元素组合成终究值或值数组。

我意想到这有点像节食。从异常简朴的要领,如盘算卡路里,到更庞杂的饮食,如 Atkins 减肥法或称体重计(WeightWatchers),目的是将你一天中可能吃的一切食物提炼成一个(或多个)值,看看你是不是在减肥的轨道上。

《经由过程节食来诠释 JavaScript 的Reduce要领!》

用 For 轮回模仿Reduce

下面是运用for轮回疾速显现reduce()功用的要领。假定你有一个包括你一天中吃过的5种差别食物的卡路里计数的数组,你想晓得你统共斲丧了若干卡路里,代码以下:

《经由过程节食来诠释 JavaScript 的Reduce要领!》

这很简朴,你建立一个变量来保存终究数目,然后在运转数组时增加它。然则,你依然须要引入一个新变量,而且轮回没有供应关于轮回目的的线索。

一个简朴的Reduce示例

让我们进修怎样运用reduce()要领完成雷同的目的。

reduce() 要领吸收一个函数作为累加器,数组中的每一个值(从左到右)最先缩减,终究盘算为一个值。对空数组是不会实行回调函数的。

《经由过程节食来诠释 JavaScript 的Reduce要领!》

所以 reduce 有一些内存的观点。在遍历数组中的每一项时,sum参数将跟踪值。在前面的例子中,我们必须在轮回局限以外声明一个新变量来“记着”这些值。

《经由过程节食来诠释 JavaScript 的Reduce要领!》

《经由过程节食来诠释 JavaScript 的Reduce要领!》

这与for()之间的可读性好像没有太大区分。然则,当须要遍历数百行代码时,reduce 会让你疾速相识代码块的用处。

例2 – 运用对象

到目前为止,我们只举例一维数组。然则,假如您可以遍历一个都是数字的数组,那末你也可以遍历一个都是对象的数组。让我们给每一个元素加一个名字,如许我们就可以晓得我们一天究竟吃了什么。

《经由过程节食来诠释 JavaScript 的Reduce要领!》

你早饭吃了一份牛排,一些生果,然后午饭吃了一些沙拉和薯条,末了晚饭吃了冰淇淋,真是蹩脚的一天!

愿望你们能看到全部数组的活动。当我们研讨每一种元素时,总热量的总和( sum)就代表了一天所斲丧的总热量,主如果把这些数值放进一个大桶里——一天的卡路里量。

例3 – 运用多个种别

所以假如这都是关于卡路里的,为何会有这么多差别的饮食呢? 我不盘算穷究养分科学,但这里有一个概括性的总结——关于 “最好” 减肥要领有许多不合。有些人勉励你只盘算卡路里,而另一些人则关注蛋白质、碳水化合物、脂肪和其他任何要素。

让我们想象一下,你愿望变动代码,以便可以基于任何罕见的节食体系评价您的饮食。你须要追踪每种食物的碳水化合物和脂肪,然后你须要在末了统计一下,如许你就可以算出你在每一个种别中斲丧了若干克,以下我们的食物(有子虚的养分价值):

《经由过程节食来诠释 JavaScript 的Reduce要领!》

如今,我们须要运转reduce()要领。然则,它不能在一个值中被跟踪,我们想保存我们的种别。因而,我们的累加器须如果一个与数组具有雷同范例的对象。

下面是这个历程的一个GIF图片:

《经由过程节食来诠释 JavaScript 的Reduce要领!》

在遍历数组每一个项时,你将变动对象中特定属性的值,假如该对象还没有具有准确称号的属性,则将建立该对象,以下:

《经由过程节食来诠释 JavaScript 的Reduce要领!》

我们运用 bucket 作为对象,依据属性名对值举行分类。我们运用 += 操纵符为来自 foods 数组的对象中的每一个值增加到恰当的bucket。请注意保存值的 key 的名字,这里是随便的,这是由于它是可有可无的——我们只是想要数字,如许我们就可以够剖析你一天饮食的胜利。

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

这个参数在回调以后涌现,我们愿望将 calories、carbs 和 fat 字段初始化为0,以便我们的 reduce 要领晓得这是我们将用于 bucket 参数的唯一三个键/值对,代码以下:

《经由过程节食来诠释 JavaScript 的Reduce要领!》

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

你的点赞是我延续分享好东西的动力,迎接点赞!

迎接到场前端大家庭,内里会常常分享一些手艺资本。

《经由过程节食来诠释 JavaScript 的Reduce要领!》

    原文作者:前端小智
    原文地址: https://segmentfault.com/a/1190000017374617
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞