关于JS的Reduce方法你会使用吗?

熊爸爸的科技工坊 2019-11-19 17:49:06

新的JavaScript标准ES2017中添加了一个针对Array类型的新实例方法reduce(),如果你还记得前几年很火热的MapReduce技术的话,或多或少的会有的印象。那么今天来看看这个新函数究竟有多大的魔力,能够帮助你更高效的开发。

Reduce()函数介绍

首先我们来看一下MDN上面对reduce()函数的介绍吧。

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

嗯,没错,很简单的一个描述,是不是看完了之后觉得这个就是一个排序的函数呢?跟sort()有分别呢?如果你这么小瞧他的话就太可惜了,reduce()可以实现以前需要很多代码实现的的功能。

求和

首先我们能够用reduce()来进行求和,别看这个功能很简单,但是如果没有reduce()的话我们码的代码也是不少的。

上面的使用for的就是我们传统的求和方法,逻辑不复杂,就是写的比较多余。而下面的就是用reduce()重新改写的求和方法,是不是快捷了很多呢?

累加对象里面的数值

当我们在处理对象数组的时候,有时候我们需要对其中的一个属性进行求和运算,或者是其他的运算,反正就是需要提取对象数组中某一个属性成为一个新的数组,那么我们可以使用以下的方法来实现。

同样都是对数组中对象的a属性求和,reduce()方法就显得简洁了许多

实现数组flat()

尽管新的ES 2017标准中已经实现了对Array的flat()方法的实现,但是我们依旧可以使用reduce()来快捷的实现flat()方法

实现zipObj()功能

目前的ES 2017还没有原生的zipObj()函数提供,注意了这个zip()功能不是压缩数据的,而是将两个数组合并成一个对象,其中一个数组提供键名(key),一个数组提供键值(value)。我们可以使用reduce()轻松实现。

使用reduce()轻松实现了zipObj()的功能

实现函数编程的pipe()功能

pipe()函数是函数式编程中整合所有函数的管道函数,我们可以用reduce()来轻松的实现这个方法。

是不是很轻松的就实现了pipe()的功能了呢。

reduce()方法的加入为我们操作数组提供了一个非常便利的工具,特别是函数式编程的时候,reduce()方法可以实现许多复杂的计算,特别适合于对象数组的操作。

如果你对JavaScript编程感兴趣,可以关注我哦,还有更多的技巧与大家分享。

0 阅读:231
熊爸爸的科技工坊

熊爸爸的科技工坊

不专业的介绍各种闹稀奇古怪的知识