最近在写一个购物车页面,需要根据每件商品的数量及单价,来计算总价,使用到了数组的 reduce 方法,之前还不太了解这个方法,这次也是看了很多资料,才搞明白:
arr.reduce((pre, cur, curIndex, arr) => {}, initialValue)
其中:pre:初始值 或 计算结束后的返回值 (必传值)
cur:当前元素 (必传值)
curIndex: 当前元素的索引
arr:当前元素所属的数组(也就是arr)
initialValue: 自己设置的初始值
reduce 方法会自动遍历数组的哦,但不会遍历空数组哦。。。
此次计算商品总价:
allPayPrice () {
const sum = this.selectedGoodsList.reduce((pre, cur) => {
return pre + cur.num * cur.price
}, 0) // 自己设置的初始值:0
return sum
}
就是这么简单的几行,其中:
我设置了初始值为0,那么第一次回调时:
pre=0,cur=数组里的第一个元素,且相加后返回了一个值;
第二次回调时:
pre=上次相加后返回的那个值,cur=数组里的第二个元素.....以此类推
最后一次回调后,返回的值就是他们的和啦。。。也就是总价啦。。。