JavaScript数组reduce()方法
更新时间：2022年01月12日 11:13:01 作者：frank201113
这篇文章主要介绍了JavaScript数组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类型的，如果我们想返回object类型的值，也可以传入object类型的初始值。
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我们这里就忽略JS中的精度问题吧，因为这里主要讲解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()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了js实现砖头在页面拖拉效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要为大家详细介绍了javascript实现鼠标拖尾特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了javascript实时获取鼠标坐标值并显示的方法,涉及javascript操作鼠标事件的相关技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了JavaScript迭代器的含义及用法,迭代器就是为实现对不同集合进行统一遍历操作的一种机制，只要给需要遍历的数据结构部署Iterator接口，通过调用该接口，或者使用消耗该接口的API实现遍历操作。,需要的朋友可以参考下2019-06-06
面向对象编程(Object Oriented Programming)将现实世界中的复杂关系抽象成一个个对象,通过对象之间的分工合作对现实世界进行模拟，这篇文章主要介绍了Javascript Object对象类型使用详解2022-10-10
本篇文章只要是对JS判断两个时间大小的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
循环处理是最常见的编程模式之一，也是提升性能必须关注的要点之一。本文将对此进行介绍。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要给大家总结介绍了关于在JS中如何轻松遍历对象属性的方式，文中通过示例代码介绍的非常详细，对大家学习或者使用JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-08-08
这篇文章主要介绍了用Fundebug插件记录网络请求异常的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
在项目中经常会用到动态加载js,下面这篇文章主要给大家介绍了关于js脚本加载失败问题的解决办法,文中通过实例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友可以参考下2023-06-06
最新评论