javascript之数组reduce()的学习

概念: reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。

语法 : array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数
function(total,currentValue, index,arr) 必需。用于执行每个数组元素的函数。
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象。
initialValue 可选。传递给函数的初始值

应用
1、累加器
var arr= [100, 200, 500];
var reduceFun = function add(sum, cur) { return sum+ cur; };
var total = items.reduce(reduceFun , 0);
console.log(total); // 800

其中最终的结果根据 initialValue 的类型决定是Number 或者String 甚至可以是对象等。

2、

在来一个例子:
某同学的期末成绩如下表示

var result = [
{
subject: ‘math’,
score: 88
},
{
subject: ‘chinese’,
score: 95
},
{
subject: ‘english’,
score: 80
}
];
如何求该同学的总成绩?

var sum = result.reduce(function(prev, cur) {
return cur.score + prev;
}, 0);
假设该同学因为违纪被处罚在总成绩总扣10分,只需要将初始值设置为-10即可。

var sum = result.reduce(function(prev, cur) {
return cur.score + prev;
}, -10);
我们来给这个例子增加一点难度。假如该同学的总成绩中,各科所占的比重不同,分别为50%,30%,20%,我们应该如何求出最终的权重结果呢?

解决方案如下:

var dis = {
math: 0.5,
chinese: 0.3,
english: 0.2
}

var sum = result.reduce(function(prev, cur) {
return cur.score + prev;
}, -10);

var qsum = result.reduce(function(prev, cur) {
return cur.score * dis[cur.subject] + pre;
}, 0)

console.log(sum, qsum);
再看一个例子,如何知道一串字符串中每个字母出现的次数?

var arrString = ‘abcdaabc’;

arrString.split(’’).reduce(function(res, cur) {
res[cur] ? res[cur] ++ : res[cur] = 1
return res;
}, {})
由于可以通过第二参数设置叠加结果的类型初始值,因此这个时候reduce就不再仅仅只是做一个加法了,我们可以灵活的运用它来进行各种各样的类型转换,比如将数组按照一定规则转换为对象,也可以将一种形式的数组转换为另一种形式的数组,大家可以动手去尝试一样。

[1, 2].reduce(function(res, cur) {
res.push(cur + 1);
return res;
}, [])
koa的源码中,有一个only模块,整个模块就一个简单的返回reduce方法操作的对象:

var only = function(obj, keys){
obj = obj || {};
if (‘string’ == typeof keys) keys = keys.split(/ +/);
return keys.reduce(function(ret, key){
if (null == obj[key]) return ret;
ret[key] = obj[key];
return ret;
}, {});
};
通过对reduce概念的理解,这个模块主要是想新建并返回一个obj对象中存在的keys的object对象。

var a = {
env : ‘development’,
proxy : false,
subdomainOffset : 2
}
only(a,[‘env’,‘proxy’]) // {env:‘development’,proxy : false}

参考:
JS进阶篇–JS数组reduce()方法详解及高级技巧
JS的内建函数reduce
数组reduce方法的高级技巧

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值