W3Cschool上面的解析是依次处理数组的每个成员,最终累计为一个值。
reduce方法接收两个参数,第一个参数是函数,第二个参数是设置初始值和初始类型。
而第一个参数又接收以下四个参数。
1. 累积变量,默认为数组的第一个成员
2. 当前遍历到的值
3. 当前索引
4. 原数组
前两个参数必选,后两个可选。
先看个简单的列子。
计算数组元素相加后的总和。
let arr = [1, 2, 3, 4, 5]
let sum = arr.reduce((prev, cur, index, arr) => {
console.log(prev, cur)
return prev + cur
})
console.log(sum)
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果:15
我们可以看到,数组长度是5,但只遍历了4次。其实数组中的第一项被当做累积变量(prev),然后数组是从第二项开始遍历的。
接下来,看下面一个列子
你在某东购物车数据如下
let cartDatas = [
{
productName: '高级程序设计(第3版)',
type: 'book',
price: 79
}, {
productName: '骆驼男鞋',
type: 'shoes',
price: 299
}, {
productName: '爱科技(AKG)K374U',
type: 'shoes',
price: 249
}
]
该如何计算总金额?用for遍历
let totalPrice = 0
for (let i=0;i< cartDatas.length;i++) {
totalPrice += cartDatas[i].price
}
console.log( totalPrice )
// 结果是 627
如果用reduce怎么解决
let totalPrice = cartDatas.reduce((prev, cur) => {
return prev + cur.price
}, 0)
console.log( totalPrice )
// 结果是 627
这里我们增加了第二个参数,遍历是从数组的第一项开始的,所以这里遍历了3次。
因为第二个参数是累积变量,可以设置一个初始值。
刚好遇到活动,全场满500减25,这个时候,我们只需要把第二个参数的初始值设置为-25。
let totalPrice = cartDatas.reduce((prev, cur) => {
return prev + cur.price
}, -25)
console.log( totalPrice )
// 结果是 602
看,是不是轻易就解决了。
如果我们把这个需求变成另一种,针对每种商品做不同的优惠
let dis = {
book: 10,
shoes: 25
}
let totalPrice = cartDatas.reduce((prev, cur)=> {
return prev + cur.price-(dist[cur.type])
}, 0)
console.log( totalPrice )
// 结果是 567
我们开始说了,第二个参数指定初始值并且同时指定了初始类型。
比如我们要查找一个数组内每个项重复的次数
let arr = ['11', '22', '11', '11', '33', '12', '33']
arr.reduce((prev, cur) => {
return prev[cur] ? prev[cur] ++ : prev[cur] = 1
}, {})
reduce方法是依次处理数组每一项,所以可以借助reduce做很多其他的业务逻辑。
比如,W3Cscholl上面的一个搜索的例子。
// 查找出数组中最长的项
['aaa', 'bb', 'c'].reduce(function (longest, entry) {
return entry.length > longest.length ? entry : longest;
}, '')
// 结果是 'aaa'
最后,这里只探究了目前所遇到的一些用法!
生命不止,学习不息!