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

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

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

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

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

//簡(jiǎn)寫(xiě)方便解釋

arr.reduce(callback,[initialValue])

參數(shù)含義：

callback（執(zhí)行數(shù)組中每個(gè)值的函數(shù)，包含四個(gè)參數(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的第一個(gè)參數(shù)。）類(lèi)似相當(dāng)于設(shè)置初始值

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

先看第一個(gè)例子：

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開(kāi)始的，第一次的prev的值是數(shù)組的第一個(gè)值。數(shù)組長(zhǎng)度是4，但是reduce函數(shù)循環(huán)3次。

再看第二個(gè)例子：

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

這個(gè)例子index是從0開(kāi)始的，第一次的prev的值是我們?cè)O(shè)置的初始值0，數(shù)組長(zhǎng)度是4，reduce函數(shù)循環(huán)4次。

結(jié)論：如果沒(méi)有提供initialValue，reduce會(huì)從索引1的地方開(kāi)始執(zhí)行callback方法，跳過(guò)第一個(gè)索引。如果提供initialValue，從索引0開(kāi)始。

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

vararr=[];

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

console.log(prev,cur,index);

returnprev+cur;

//報(bào)錯(cuò)，"TypeError:Reduceofemptyarraywithnoinitialvalue"

但是要是我們?cè)O(shè)置了初始值就不會(huì)報(bào)錯(cuò)，如下：

vararr=[];

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

console.log(prev,cur,index);

returnprev+cur;

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

所以一般來(lái)說(shuō)我們提供初始值通常更安全

3、reduce的簡(jiǎn)單用法

當(dāng)然最簡(jiǎn)單的就是我們常用的數(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的高級(jí)用法

（1）計(jì)算數(shù)組中每個(gè)元素出現(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）對(duì)象里的屬性求和

varresult=[

subject:'math',

score:10

subject:'chinese'