JavaScript數(shù)組reduce()方法的語法與實例解析

第JavaScript數(shù)組reduce()方法的語法與實例解析reduce()方法接收一個函數(shù)作為累加器（accumulator），數(shù)組中的每個值（從左到右）開始縮減，最終為一個值。

reduce為數(shù)組中的每一個元素依次執(zhí)行回調(diào)函數(shù)，不包括數(shù)組中被刪除或從未被賦值的元素，接受四個參數(shù)：初始值（或者上一次回調(diào)函數(shù)的返回值），當(dāng)前元素值，當(dāng)前索引，調(diào)用reduce的數(shù)組。

Javascript數(shù)組方法中，相比map、filter、forEach等常用的迭代方法，reduce常常被我們所忽略，今天一起來探究一下reduce在我們實戰(zhàn)開發(fā)當(dāng)中，能有哪些妙用之處，下面從reduce語法開始介紹。

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

//簡寫方便解釋

arr.reduce(callback,[initialValue])

參數(shù)含義：

callback（執(zhí)行數(shù)組中每個值的函數(shù)，包含四個參數(shù)）

1、previousValue（上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue））

2、currentValue（數(shù)組中當(dāng)前被處理的元素）

3、index（當(dāng)前元素在數(shù)組中的索引）

4、array（調(diào)用reduce的數(shù)組）

initialValue（作為第一次調(diào)用callback的第一個參數(shù)。）類似相當(dāng)于設(shè)置初始值

2、實例解析initialValue參數(shù)

先看第一個例子：

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

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

console.log(prev,cur,index);

returnprev+cur;

console.log(arr,sum);

//打印結(jié)果：

//121

//332

//643

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

這里可以看出，上面的例子index是從1開始的，第一次的prev的值是數(shù)組的第一個值。數(shù)組長度是4，但是reduce函數(shù)循環(huán)3次。

再看第二個例子：

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

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

console.log(prev,cur,index);

returnprev+cur;

},0)//注意這里設(shè)置了初始值

console.log(arr,sum);

//打印結(jié)果：

//010

//121

//332

//643

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

這個例子index是從0開始的，第一次的prev的值是我們設(shè)置的初始值0，數(shù)組長度是4，reduce函數(shù)循環(huán)4次。

結(jié)論：如果沒有提供initialValue，reduce會從索引1的地方開始執(zhí)行callback方法，跳過第一個索引。如果提供initialValue，從索引0開始。

注意：如果這個數(shù)組為空，運用reduce是什么情況？

vararr=[];

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

console.log(prev,cur,index);

returnprev+cur;

//報錯，"TypeError:Reduceofemptyarraywithnoinitialvalue"

但是要是我們設(shè)置了初始值就不會報錯，如下：

vararr=[];

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

console.log(prev,cur,index);

returnprev+cur;

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

所以一般來說我們提供初始值通常更安全

3、reduce的簡單用法

當(dāng)然最簡單的就是我們常用的數(shù)組求和，求乘積了。

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）計算數(shù)組中每個元素出現(xiàn)的次數(shù)

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）數(shù)組去重

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）將二維數(shù)組轉(zhuǎn)化為一維

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）將多維數(shù)組轉(zhuǎn)化為一維

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'