详解数组中的reduce方法

Charles 发布于2019-08-23 14:08 / 1315人阅读

摘要：有没有觉得很神奇呀去除数组中重复的元素结果分析这里主要是借助迭代功能实现数组的扩展，判断当前元素是否已经添加到数组中，如果不存在就从尾部添加，这个方法在去重方法中应该算比较简单高效的。

前言

 这几天面试被问到了数组的方法有哪些，回答得简直一塌糊涂，面试官说reduce的功能很强大，于是想对这个方法进行总结，在红宝书中对这个方法的描述并不算多，我也是参考了其他文章才进行总结的，下面就开始吧~

reduce的原理 简介

在红宝书中，将这个方法定义为数组的归并方法，这个方法和迭代方法（map,forEach,filter...）一样，都会对数组进行遍历，reduce与他们不同的是函数的第一个参数得到的是迭代计算后的效果（看不懂没关系，继续往下看就会懂了）

语法

这个方法接收两个参数：

要执行的函数，要执行的函数中也可传入参数，分别为

prev：上次调用函数的返回值

cur：当前元素

index：当前元素索引

arr：被遍历的数组

函数迭代的初始值

举例

没有设置函数的初始迭代值

let arr = [1, 2, 3, 4];
let sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);

运行结果：

分析：
我们可以看到，在这里reduce的作用就是对这个数组进行求和，迭代了3次，函数迭代的初始值是1，也就是默认值（数组的第一项），prev的值是每次计算后的值，现在理解了吧！

设置初始迭代值

let arr = [1, 2, 3, 4];
let sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
},5)
console.log(arr, sum);

运行结果：

分析：
这里我们添加了一个初始的迭代值，也就是让prev从5开始计算，可以看到，这里迭代了4次，结果也加上了初始值。

reduce的应用 初级应用

最常见的应用一般就是求和以及求乘积了，比如说下面的例子：

let arr = [1,2,3,4,5]
console.log(arr.reduce((a,b) => a + b))//15
console.log(arr.reduce((a,b) => a * b))//120

高级应用 计算数组中每个元素出现的次数

let arr = ["name","age","long","short","long","name","name"] 

let arrResult = arr.reduce((pre,cur) =>{
    console.log(pre,cur)
    if(cur in pre){
        pre[cur]++
    }else{
        pre[cur] = 1
    }
    return pre
},{})

console.log(arrResult)//结果：{name: 3, age: 1, long: 2, short: 1}

运行结果：（第一个console.log）

分析：
大概的解释一下，运行过程是这样的：

由于设置了迭代初始值，pre的第一个值是一个空对象，此时cur为name，然后进行判断，发现在pre中没有name属性，所以就将name对应的属性值赋为1；

后面没有重复的是一样的道理，如果碰到重复值，就会将该属性值加1，这样就能计算元素重复的次数了。（有没有觉得很神奇呀~）

去除数组中重复的元素

let arrResult = arr.reduce((pre,cur) =>{
    if(!pre.includes(cur)){
        pre.push(cur)
    }
    return pre;
},[])

console.log(arrResult)//结果：["name", "age", "long", "short"]

分析：
这里主要是借助迭代功能实现数组的扩展，判断当前元素是否已经添加到数组中，如果不存在就从尾部添加，这个方法在去重方法中应该算比较简单高效的。

对对象的属性求和

let person = [
    {
        name: "xiaoming",
        age: 18
    },{
        name: "xiaohong",
        age: 17
    },{
        name: "xiaogang",
        age: 19
    }
]

let result = person.reduce((a,b) =>{
    a = a + b.age;
    return a;
},0)

console.log(result)//结果：54

分析：
这里主要就是利用reduce第一个参数是迭代，可以通过初始化这个参数的数据类型，达到想实现的效果。

总结

使用reduce操作数组时，最重要的就是理解第一个参数是怎么迭代的，可以好好利用初始化这个参数的数据类型来减少很多不必要的代码。上面举的三个高级应用的例子都是利用了这个优点，当然，reduce还有更多的应用，后面碰到还会进行补充的。

如果觉得有用就给个赞吧~

云服务器 GPU云服务器数组方法reduce reduce方法方法参数详解方法签名详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100153.html

JS进阶篇--JS数组reduce()方法详解及高级技巧

摘要：基本概念方法接收一个函数作为累加器，数组中的每个值从左到右开始缩减，最终为一个值。例进阶应用使用方法可以完成多维度的数据叠加。在该函数内部，则执行多维的叠加工作。参考的内建函数数组方法的高级技巧基本概念 reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。 reduce 为数组中的每一个元素依次执行回调函数，不包括...

jerryloveemily 2019-08-21 12:00 评论0 收藏0
javascript reduce详解及应用

摘要：循环数组每一项数组下标当前调用数组本身可选初始值，作为回调函数第一个参数的默认值，也是每次回调的返回值，见代码首页问题转化为数组首页问题转化后效果这个栗子来自配置路由时遇到的，当时也是优化了好几个版本。 reduce callback（一个在数组中每一项上调用的函数，接受四个参数：）previousValue（上一次调用回调函数时的返回值，或者初始值）currentValue（当前正...

Cruise_Chan 2019-08-23 14:17 评论0 收藏0
js的parseInt() map()，reduce()方法详解

摘要：比的函数多一个参数初始值，最终值，因为方法数组每次输入两个元素。 parseInt(string，radius)接收两个参数， string（必选）如果接受的是‘abc’，纯字符串，返回NaN,要是‘123’会转化为123，要是‘abc123’会转化为123，radius（可选）表示的是基数，指定前面的string是一个几进制的数（不是将string转化为多少进制，而是这个string...

zzir 2019-08-21 16:17 评论0 收藏0
Javascript数组详解

摘要：创建数组判断比是否是个数组取数组元素属性返回数组的成员数量。增加数组元素方法在数组的末尾增加一个或多个元素，并返回数组的新长度。表示要移除的数组元素的个数要添加进数组的元素最主要的的用途是向数组的中部插入元素。数组的定义数组是按序号排列的一组值，每个值的位置都有编号（从0开始）。数组本质上是一种特殊的对象。它的键名是按（0，1，2...）排列的一组数字。创建数组： var a...

geekidentity 2019-08-21 14:05 评论0 收藏0
redux middleware 详解

摘要：执行完后，获得数组，，它保存的对象是图中绿色箭头指向的匿名函数，因为闭包，每个匿名函数都可以访问相同的，即。是函数式编程中的组合，将中的所有匿名函数，，组装成一个新的函数，即新的，当新执行时，，从左到右依次执行所以顺序很重要。前言 It provides a third-party extension point between dispatching anaction, and t...

yanwei 2019-08-19 17:39 评论0 收藏0