reduce用法

JS中的reduce（）⽅法使⽤⼩结

⽬录

⼀、语法

⼆、实例

三、其他相关⽅法

过去有很长⼀段时间，我⼀直很难理解reduce()这个⽅法的具体⽤法，平时也很少⽤到它。事实上，如果你能真正了解它的

话，其实在很多地⽅我们都可以⽤得上，那么今天我们就来简单聊聊JS中reduce()的⽤法。

⼀、语法

(function(prev,cur,index,arr){

...

},init);

其中，

arr表⽰原数组；

prev表⽰上⼀次调⽤回调时的返回值，或者初始值init;

cur表⽰当前正在处理的数组元素；

index表⽰当前正在处理的数组元素的索引，若提供init值，则索引为0，否则索引为1；

init表⽰初始值。

看上去是不是感觉很复杂？没关系，只是看起来⽽已，其实常⽤的参数只有两个：prev和cur。接下来我们跟着实例来看看具

体⽤法吧~

⼆、实例

先提供⼀个原始数组：

vararr=[3,9,4,3,6,0,9];

实现以下需求的⽅式有很多，其中就包含使⽤reduce()的求解⽅式，也算是实现起来⽐较简洁的⼀种吧。

1.求数组项之和

varsum=(function(prev,cur){

returnprev+cur;

},0);

由于传⼊了初始值0，所以开始时prev的值为0，cur的值为数组第⼀项3，相加之后返回值为3作为下⼀轮回调的prev值，然后

再继续与下⼀个数组项相加，以此类推，直⾄完成所有数组项的和并返回。

2.求数组项最⼤值

varmax=(function(prev,cur){

(prev,cur);

});

由于未传⼊初始值，所以开始时prev的值为数组第⼀项3，cur的值为数组第⼆项9，取两值最⼤值后继续进⼊下⼀轮回调。

3.数组去重

varnewArr=(function(prev,cur){

f(cur)===-1&&(cur);

returnprev;

},[]);

实现的基本原理如下：

①初始化⼀个空数组

②将需要去重处理的数组中的第1项在初始化数组中查找，如果找不到（空数组中肯定找不到），就将该项添加到初始化数组

中

③将需要去重处理的数组中的第2项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中

④……

⑤将需要去重处理的数组中的第n项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中

⑥将这个初始化数组返回

三、其他相关⽅法

Right()

该⽅法⽤法与reduce()其实是相同的，只是遍历的顺序相反，它是从数组的最后⼀项开始，向前遍历到第⼀项。

h()、map()、every()、some()和filter()

详情请戳→

重点总结：

reduce()是数组的归并⽅法，与forEach()、map()、filter()等迭代⽅法⼀样都会对数组每⼀项进⾏遍历，但是reduce()可同时将

前⾯数组项遍历产⽣的结果与当前遍历项进⾏运算，这⼀点是其他迭代⽅法⽆法企及的

先看w3c语法

(function(total,currentValue,currentIndex,arr),initialValue);

/*

total:必需。初始值,或者计算结束后的返回值。

currentValue：必需。当前元素。

currentIndex：可选。当前元素的索引；

arr：可选。当前元素所属的数组对象。

initialValue:可选。传递给函数的初始值，相当于total的初始值。

*/

常见⽤法

数组求和

constarr=[12,34,23];

constsum=((total,num)=>total+num);

constarr=[12,34,23];

constsum=((total,num)=>total+num,10);//以10为初始值求和

varresult=[

{subject:'math',score:88},

{subject:'chine',score:95},

{subject:'english',score:80}

];

constsum=((accumulator,cur)=>accumulator+,0);

constsum=((accumulator,cur)=>accumulator+,-10);//总分扣除10分

进阶⽤法数组对象中的⽤法

consta=[23,123,342,12];

constmax=(function(pre,cur,inde,arr){returnpre>cur?pre:cur;});//342

constobjArr=[{name:'⽼⼤'},{name:'⽼⼆'},{name:'⽼三'}];

constres=((pre,cur,index,arr)=>{

if(index===0){

;

}

elif(index===(-1)){

returnpre+'和'+;

}

el{

returnpre+'、'+;

}

},'');

求字符串中字母出现的次数

conststr='sfhjasfjgfasjuwqrqadqeiqsajsdaiwqdaklldflas-cmxzmnha';

constres=('').reduce((accumulator,cur)=>{accumulator[cur]?accumulator[cur]++:accumulator[cur]=1;returnaccumulator;},{});

数组转对象

vararr1=[2,3,4,5,6];//每个值的平⽅

varnewarr=((accumulator,cur)=>{(cur*cur);returnaccumulator;},[]);

⾼级⽤法多维的叠加执⾏操作

varstreams=[{name:'技术',id:1},{name:'设计',id:2}];

varobj=((accumulator,cur)=>{accumulator[]=cur;returnaccumulator;},{});

⾼级⽤法

多维的叠加执⾏操作

varresult=[

{subject:'math',score:88},

{subject:'chine',score:95},

{subject:'english',score:80}

];

vardis={

math:0.5,

chine:0.3,

english:0.2

};

varres=((accumulator,cur)=>dis[t]*+accumulator,0);

varprices=[{price:23},{price:45},{price:56}];

varrates={

us:'6.5',

eu:'7.5',

};

varinitialState={usTotal:0,euTotal:0};

varres=((accumulator,cur1)=>(rates).reduce((prev2,cur2)=>{

(accumulator,cur1,prev2,cur2);

accumulator[`${cur2}Total`]+=*rates[cur2];

returnaccumulator;

},{}),initialState);

varmanageReducers=function(){

returnfunction(state,item){

(rates).reduce((nextState,key)=>{

state[`${key}Total`]+=*rates[key];

returnstate;

},{});

}

};

varres1=(manageReducers(),initialState);

扁平⼀个⼆维数组

vararr=[[1,2,8],[3,4,9],[5,6,10]];

varres=((x,y)=>(y),[]);

对象数组去重

consthash={};

chatlists=((obj,next:Object)=>{

consthashId=`${}_${_id}`;

if(!hash[hashId]){

hash[`${}_${_id}`]=true;

(next);

}

returnobj;

},[]);

compo函数

reduxcompo源码实现

functioncompo(...funs){

if(===0){

returnarg=>arg;

}

if(===1){

returnfuns[0];

}

((a,b)=>(...arg)=>a(b(...arg)))

}

到此这篇关于JS中的reduce()⽅法使⽤⼩结的⽂章就介绍到这了,更多相关jsreduce()⽅法内容请搜索以前的⽂章或继续浏览下

⾯的相关⽂章希望⼤家以后多多⽀持！