数组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'

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

生命不止,学习不息!

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 数组方法 下面开始介绍数组的方法,数组的方法有数组原型方法,也有从object对象继承来的方法,这里我们只介绍数组...
    祈求者阅读 436评论 0 2
  • 转载:在开发中,数组的使用场景非常多,平日中也涉及到很多数组的api/相关操作,一直也没有对这块内容进行一块整理总...
    七色烟火阅读 3,453评论 0 3
  • JavaScript中创建数组有两种方式,第一种是使用 Array 构造函数: vararr1 = newArra...
    寄鱼予海与你阅读 582评论 0 0
  • JavaScript中创建数组有两种方式 (一)使用 Array 构造函数: var arr1 = new Arr...
    Gimmy呵呵阅读 502评论 0 1
  • 以前学习JS没有着重总结关于数组的方法,导致实现某些功能不能找对最合适的实现方法,浪费很多时间。今天总结一些...
    Mango97阅读 607评论 0 0

友情链接更多精彩内容