JavaScript数组reduce()方法的语法与实例解析

第JavaScript数组reduce()方法的语法与实例解析reduce()方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。

reduce为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用reduce的数组。

Javascript数组方法中，相比map、filter、forEach等常用的迭代方法，reduce常常被我们所忽略，今天一起来探究一下reduce在我们实战开发当中，能有哪些妙用之处，下面从reduce语法开始介绍。

array.reduce(function(prev,cur,index,arr),initialValue)

//简写方便解释

arr.reduce(callback,[initialValue])

参数含义：

callback（执行数组中每个值的函数，包含四个参数）

1、previousValue（上一次调用回调返回的值，或者是提供的初始值（initialValue））

2、currentValue（数组中当前被处理的元素）

3、index（当前元素在数组中的索引）

4、array（调用reduce的数组）

initialValue（作为第一次调用callback的第一个参数。）类似相当于设置初始值

2、实例解析initialValue参数

先看第一个例子：

vararr=[1,2,3,4];

varsum=arr.reduce(function(prev,cur,index,arr){

console.log(prev,cur,index);

returnprev+cur;

console.log(arr,sum);

//打印结果：

//121

//332

//643

//[1,2,3,4]10

这里可以看出，上面的例子index是从1开始的，第一次的prev的值是数组的第一个值。数组长度是4，但是reduce函数循环3次。

再看第二个例子：

vararr=[1,2,3,4];

varsum=arr.reduce(function(prev,cur,index,arr){

console.log(prev,cur,index);

returnprev+cur;

},0)//注意这里设置了初始值

console.log(arr,sum);

//打印结果：

//010

//121

//332

//643

//[1,2,3,4]10

这个例子index是从0开始的，第一次的prev的值是我们设置的初始值0，数组长度是4，reduce函数循环4次。

结论：如果没有提供initialValue，reduce会从索引1的地方开始执行callback方法，跳过第一个索引。如果提供initialValue，从索引0开始。

注意：如果这个数组为空，运用reduce是什么情况？

vararr=[];

varsum=arr.reduce(function(prev,cur,index,arr){

console.log(prev,cur,index);

returnprev+cur;

//报错，"TypeError:Reduceofemptyarraywithnoinitialvalue"

但是要是我们设置了初始值就不会报错，如下：

vararr=[];

varsum=arr.reduce(function(prev,cur,index,arr){

console.log(prev,cur,index);

returnprev+cur;

console.log(arr,sum);//[]0

所以一般来说我们提供初始值通常更安全

3、reduce的简单用法

当然最简单的就是我们常用的数组求和，求乘积了。

vararr=[1,2,3,4];

varsum=arr.reduce((x,y)=x+y)

varmul=arr.reduce((x,y)=x*y)

console.log(sum);//求和，10

console.log(mul);//求乘积，24

4、reduce的高级用法

（1）计算数组中每个元素出现的次数

letnames=['Alice','Bob','Tiff','Bruce','Alice'];

letnameNum=names.reduce((pre,cur)={

if(curinpre){

pre[cur]++

}else{

pre[cur]=1

returnpre

},{})

console.log(nameNum);//{Alice:2,Bob:1,Tiff:1,Bruce:1}

（2）数组去重

letarr=[1,2,3,4,4,1]

letnewArr=arr.reduce((pre,cur)={

if(!pre.includes(cur)){

returnpre.concat(cur)

}else{

returnpre

},[])

console.log(newArr);//[1,2,3,4]

（3）将二维数组转化为一维

letarr=[[0,1],[2,3],[4,5]]

letnewArr=arr.reduce((pre,cur)={

returnpre.concat(cur)

},[])

console.log(newArr);//[0,1,2,3,4,5]

（3）将多维数组转化为一维

letarr=[[0,1],[2,3],[4,[5,6,7]]]

constnewArr=function(arr){

returnarr.reduce((pre,cur)=pre.concat(Array.isArray(cur)newArr(cur):cur),[])

console.log(newArr(arr));//[0,1,2,3,4,5,6,7]

（4）对象里的属性求和

varresult=[

subject:'math',

score:10

subject:'chinese'