数组reduce的使用技巧

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'

最后，这里只探究了目前所遇到的一些用法！

生命不止，学习不息！