前言:在介绍之前,先看下reduce的参数,reduce是数组的方法, 里面的参数(回调函数,初始值),
参数: reduce((Accumulator,Current,CurrentIndex,SourceArray)=>{},init)
-
Accumulator:累加器
- Current:数组中的每一项
- CurrentIndex: 当前被执行的数组元素索引
- SourceArray:原数组,也就是调用reduce方法的数组
- init:代表一个初始值
作用:计算数组中的和;
1. 当有初始值的情况
有初始值,他会将初始值赋值给累加器,当前执行的数组元素就会从第一项开始
var arr = [10, 20, 30, 40, 50];
var cc = arr.reduce((add, val) => {
return add + val
}, 10);
console.log(cc);//160
add(累加器的值) val(数值中项的值) retun
10 10 20
20 20 40
40 30 70
70 40 110
110 50 160
核心思路:每次进行累加后就会把值赋值给累加器,注意return的结果。
解析: 第一次进行return ,10(初始值)+10(数组中的第一项),通过reurun返回给add累加器,完成第一次的累加, 这是第一次进行遍历,这时候累加器的值是20,然后通过与数组中的第二项进行相加,20+20 然后通过return 返回给累加器,相当于赋值给累加器,一致这样循环下去。直到数组中的所有项加完为止。
2. 当没有初始值的情况
没有初始值,他会将数组中的第一项赋值给累加器,从数组中的第二项开始加。
var arr = [10, 20, 30, 40, 50];
var cc = arr.reduce((add, val) => {
return add + val
});
console.log(cc); //150
add(累加器的值) val (数值中项的值) retun
10 20 30
30 30 60
60 40 100
100 150 150
解析:可以看出数组中没有初始值,那么把数组中的第一项作为初始值赋值给累加器,从第二项开始进行相加, 通过return第一次返回给累加器的值是: 10(第一项当作累加器的初始值)+20(数组中的第二项)=30, 那么第二次相加,累加器的初始值为30+30数组中的第三型=60(通过return返回给累加器的值),第三次:累加器的值:60 第四项的值:40 return 给累加器的值为:60+40=100,第四次: 累加器的值为:100 第五项的值为50 100+50=150 知道数组的数据遍历完为止。
3.小案例
1.计算商品的价格
var arr = [{
name: '苹果',
price: 5,
},
{
name: '橘子',
price: 3,
},
{
name: '香蕉',
price: 6,
},
{
name: '菠萝',
price: 10,
}
]
实现的代码:
var total = arr.reduce((sum, obj) => {
sum = sum + obj.price
return sum
}, 0)
console.log(total); //24
思路: 先判断数组中有没有初始值, 为0,赋值给累加器为0,obj代表是数组中的每一项,开始第一次的遍历sum(5)=sum(0)+obj.price(5)(数组中的第一项的price值), 然后通过return把5返回给 累加器,结束第一次遍历, 开始第二次的遍历,sum(8)=5+3(数组中的第二项obj.price的值3),然后return给sum 完成第二次的累加,开始第三次遍历,sum(14)=8+6(数组中的第三项obj.price的值6),继续通过return返回给sum,开始第四次遍历sum(14)=14+10(数组中的第三项obj.price的值10)直到数组遍历完,返回的是一个数值。 console.log(total); //24
2.计算商品的总价
var arr = [{
name: '苹果',
total: 5,
price: 12
},
{
name: '橘子',
total: 5,
price: 13
},
{
name: '香蕉',
total: 5,
price: 10
},
{
name: '菠萝',
total: 5,
price: 10
},
]
var cc = arr.reduce((sum, obj) => {
sum = sum + obj.total * obj.price
return sum
}, 0)
console.log(cc);
解析:与上面的区别是把数值中的两项进行相乘,然后进行累加,计算出来的结果是225。