本文详细解析JavaScript数组reduce()方法，通过初始值设定、购物车总价计算、优惠券抵扣及商品折扣处理等实例，展示其核心用法。同时对比传统循环与reduce实现字符统计的差异，探讨类型转换技巧，帮助开发者掌握这一强大的数组聚合工具。
reduce()方法基础用法与初始值设定
演示如何将一个初始值依次减去数组中的每一项元素。
var items = [5, 10, 15];
var reducer = function minus(minusSum, item) {
return minusSum - item;
}
var total = items.reduce(reducer, 61);
console.log(total); // 31在上述示例中，初始值被设定为number类型，因此最终返回的结果也保持为number类型。若希望返回对象类型的结果，只需传入一个对象作为初始值即可实现。
var items = [5, 10, 15];
var reducer = function minus(minusSum, item) {
minusSum.sum = minusSum.sum - item;
return minusSum;
}
var total = items.reduce(reducer, {sum: 61});
console.log(total); // {sum: 31}前述两个示例均展示了reduce()方法的基础用法。实际上，reduce()是一个功能强大的方法，能够处理更为复杂的业务逻辑场景。
以计算购物车中所有商品的总价为例，假设购物车数据结构如下：
购物车总价计算与优惠券处理
var goodList = [
{
good: 'paper',
price: 12
},
{
good: 'book',
price: 58
},
{
good: 'CD',
price: 15
}
]接着，通过调用reduce()方法，即可轻松计算出所有商品的总价格。
var count = goodList.reduce(function(prev, cur) {
return cur.price + prev;
}, 0);
console.log(count); // 85若用户持有10元优惠券，只需将-10作为初始值传递给reduce()方法，即可在计算总价时自动扣除优惠金额。
var count = goodList.reduce(function(prev, cur) {
return cur.price + prev;
}, -10);
console.log(count); // 75为了增加示例难度，假设商城正在进行促销活动，对部分商品提供折扣，此时应如何计算折后总价？利用reduce方法同样可以便捷解决。
商品折扣计算与浮点数精度说明
var goodList = [
{
good: 'paper',
price: 12
},
{
good: 'book',
price: 58
},
{
good: 'CD',
price: 15
}
];
var dis = {
paper: 0.5,
book: 0.8,
CD: 0.2
}
var count = goodList.reduce(function(prev, cur) {
return cur.price + prev;
}, -10);
var qcount = goodList.reduce(function(prev, cur) {
return cur.price * dis[cur.good] + prev;
}, 0);
console.log(count, qcount); // 75 55.400000000000006此处暂且忽略JavaScript中的浮点数精度问题，重点在于演示reduce()方法的具体应用。再举一例：如何统计一串字符串中每个字母出现的次数？即使不使用reduce()方法，该功能也能实现。
传统实现方式的代码如下：
字符串字符统计：传统循环与reduce对比
var arrString = 'fghffgaga';
var strArr = arrString.split('');
var rel = {};
var count = 1;
for (var i = 0; i < strArr.length; i++) {
for (var j = i + 1; j < strArr.length; j++) {
if (strArr[i] == strArr[j]) {
count++;
strArr.splice(j, 1);
j = j - 1;
}
}
var qcount = count;
count = 1;
rel[strArr[i]] = qcount;
}
console.log(rel); // {f: 3, g: 3, h: 1, a: 2}而利用reduce()方法实现的代码如下：
var arrString = 'fghffgaga';
var rel = arrString.split('').reduce(function(res, cur) {
res[cur] ? res[cur] ++ : res[cur] = 1
return res;
}, {})
console.log(rel); // {f: 3, g: 3, h: 1, a: 2}可以看出，使用reduce()方法处理后，代码简洁度显著提升。我们可以利用reduce()方法对数组中的每个元素执行各种处理，从而将一种类型的数组转换为另一种类型的数组。
数组类型转换与总结
var arr = [1, 2].reduce(function(res, cur) {
res.push(cur + '');
return res;
}, []);
console.log(arr); // ["1", "2"]
关于JavaScript数组reduce()方法的介绍至此结束，更多相关JS数组reduce内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！