Array.prototype.reduce 实用指南
栏目: JavaScript · 发布时间: 6年前
内容简介:hello~亲爱的看官老爷们大家好~最近因为工(lan)作(ai)繁(fa)忙(zuo),出产的文章多以译文为主,之前翻译了
hello~亲爱的看官老爷们大家好~最近因为工(lan)作(ai)繁(fa)忙(zuo),出产的文章多以译文为主,之前翻译了 《如何在 JavaScript 中更好地使用数组》
一文,发现不少同学对 Array.prototype.reduce
不太熟悉,而我正好在这方面有一点积累,在此分享给大家。
Array.prototype.reduce
算是 JavaScript 数组中比较难用但又特别强大的方法,本文以实用为主,通过例子展示如何使用这个方法,但并不深挖这个方法的本质(深入的话涉及到很多函数式编程相关的知识)~以下是正文。
Array.prototype.reduce
的简单介绍
reduce()
方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其简化为单个值。
上述是MDN对该方法的描述,方法的语法是: arr.reduce(callback[, initialValue])
。 callback
接受四个参数,分别是: accumulator
,累加器累加回调的返回值; currentValue
,数组中正在处理的元素; currentIndex(可选)
,数组中正在处理的当前元素的索引; array(可选)
,调用 reduce()
的数组。 initialValue
为可选参数,作为第一次调用 callback
函数时的第一个参数的值。方法的返回值是函数累计处理的结果。
一股脑介绍完之后,估计不少同学都是比较懵的。其实这个方法并不难理解的,正如它名字所示,抓住它的核心: 聚合
。一般而言,如果需要把数组转换成其他元素,如字符串、数字、对象甚至是一个新数组的时候,若其他数组方法不太适用时,就可以考虑 reduce
方法,不熟悉这个方法的同学,尽管抛开上面的语法, 记住方法的核心是聚合即可。
下文的例子都用到以下数组,假设通过接口获取到如下的数据体:
[{ id: 1, type: 'A', total: 3 }, { id: 2, type: 'B', total: 5 }, { id: 3, type: 'E', total: 7 },...] 复制代码
数据体是按照 id
的升序进行排列, total
与 type
不定~
聚合为数字
根据上述数据体,我们一起来做第一个小需求,统计 total
的总和。如果不用 reduce
,其实也不难:
function sum(arr) { let sum = 0; for (let i = 0, len = arr.length; i < len; i++) { const { total } = arr[i]; sum += total; } return sum; } 复制代码
这个函数可以完成上述需求,但我们精确地维护了数组索引,再精确地处理整个运算过程,是典型的命令式编程。上文提及,只要涉及将数组转换为另外的数据体,就可以使用 reduce
,它可以这样写:
arr.reduce((sum, { total }) => { return sum + total; }, 0) 复制代码
这样就完成了~ sum
是此前累加的结果,它的初始值为 0。每次将此前的累计值加上当前项的 total
为此次回调函数的返回值,作为下次执行时 sum
的实参使用。看起来比较绕,可以参考下面的表格:
轮次 |
sum
|
total
|
返回值 |
---|---|---|---|
1 | 0(初始值) | 3 | 3 |
2 | 3 | 5 | 8 |
3 | 8 | 7 | 15 |
... | ... | ... | ... |
如此是不是清晰了很多?前一次的返回值就是后一次 sum
的值,如此类推,最后累积出总和,将数组聚合成了数字。
聚合为字符串
下一个需求是将数组的每项转换为固定格式的字符串(如第一项转换为 id:1,type:A;
),每项直接以分号作为分隔。一般来说,数组转为字符串, join
方法是不错的选择,但并不适用于需要精确控制或数组的项比较复杂的情况。在本例中, join
方法是达不到我们想要的效果的。
使用 for
循环当然可以解决问题,但 reduce
也许是更好的选择,代码如下:
arr.reduce((str, { id, type }) => { return str + `id:${id},type:${type};`; }, '') 复制代码
有了聚合为数字的例子,这次你能在脑海中模拟出执行的过程么?以下也是前三项的执行过程:
轮次 |
str
|
id
|
type
|
返回值 |
---|---|---|---|---|
1 | ''(初始值) | 1 | 'A' | 'id:1,type:A;' |
2 | 'id:1,type:A;' | 2 | 'B' | 'id:1,type:A;id:2,type:B;' |
3 | 'id:1,type:A;id:2,type:B;' | 3 | 'E' | 'id:1,type:A;id:2,type:B;id:3,type:E;' |
... | ... | ... | ... | ... |
聚合为对象
有了前面的一点基础,可以做复杂一点的聚合了。上面的数据体是比较典型的后端接口返回结果,但对于前端来说,转换成 key
value
的对象形式,更利于进行之后的操作。那我们就以转换为 key
是 id
, value
是其他属性的对象作为目标吧!
function changeToObj(arr) { const res = {}; arr.forEach(({ id, type, total }) => { res[id] = { type, total }; }) return res; } 复制代码
如上所示,这个函数可以很好地完成我们的目标。但略显啰嗦,记住:只要目标是将数组聚合为唯一的元素时,都可以考虑使用 reduce
。这个例子恰好符合:
arr.reduce((res, { id, type, total }) => { res[id] = { type, total }; return res; }, {}) 复制代码
res
是最后返回的对象,通过遍历数组,不断往里面添加新的属性与值,最后达到聚合成对象的目的,代码还是相当简洁有力的。
最后,对于不熟悉这个方法的同学,不妨练习一下,将数据体转换为一个字符串数组,数组每一项为原数组 type
的值。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
罗辑思维:迷茫时代的明白人
罗振宇 / 北京联合出版公司 / 2015-9 / 42
编辑推荐 1、 罗振宇,自媒体视频脱口秀《罗辑思维》主讲人,互联网知识型社群试水者,资深媒体人和传播专家。曾任CCTV《经济与法》《对话》制片人等。2012年底打造知识型视频脱口秀《罗辑思维》。半年内,由一款互联网自媒体视频产品,逐渐延伸成长为全新的互联网社群品牌。 他对商业和互联网的独到见解,影响了互联网一代的知识结构和对互联网的认识:人类正在从工业化时代进入互联网时代。新的时代将彻......一起来看看 《罗辑思维:迷茫时代的明白人》 这本书的介绍吧!