在不增加变量的情况下,统计数组中各元素出现的次数。

```js
function countItem (arr) {
// 写入你的代码
}
countItem(['a', 'b', 'a', 'c', 'b', 'b']);
```

function countItem(arr) {
return arr.reduce((result, item) => {
if (!(item in result)) {
result[item] = 1;
} else {
result[item] += 1;
}

return result;
}, {});
}

console.log('count:', countItem(['a', 'b', 'a', 'c', 'b', 'b']))

数组reduce方法的高级技巧

因为用for循环被老大鄙视之后,这几天都在偷偷摸摸的研究数组的那几个迭代方法。使用下来,感觉确实妙用无穷,仿佛自己的逼格在无形中变得高大了一点点,哈哈,上一篇文章的简单介绍确实有点糙,因此决定重新一些总结文章。

这篇文章就是专门总结reduce方法的,这个方法大有可研究的地方,值得大家get它并去同手实践一下。

上一篇文章我认为reduce是一个聚合或者减少方法,它可以将数组中的每一项通过叠加变成一项,但是其实这种说法似乎不太准确。先不管这个,我们来看看例子再说。

从最简单的例子开始。

var  arr = [1, 2, 3, 4, 5];
sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prevres, cur, index);
return prevres + cur;
})
console.log(arr, sum);

输出结果

1 2 1
3 3 2
6 4 3
10 5 4
[1, 2, 3, 4, 5] 15

我们先重新回顾一下reduce中回调函数的参数,这个回调函数中有4个参数,意思分别为

prev: 第一项的值或者上一次叠加的结果值
cur: 当前会参与叠加的项
index: 当前值的索引
arr: 数组本身

首先我们要区分prev与cur这2个参数的区别,刚开始的时候我以为他们是一种类型的,可是后来我发现我理解错了。prev表示每次叠加之后的结果,类型可能与数组中的每一项不同,而cur则表示数组中参与叠加的当前项。在后边我们可以结合实例来理解这个地方。

其次我们看到,上例中其实值遍历了4次,数组有五项。数组中的第一项被当做了prev的初始值,而遍历从第二项开始。

我们看下面一个例子。

某同学的期末成绩如下表示

var result = [
{
subject: 'math',
score: 88
},
{
subject: 'chinese',
score: 95
},
{
subject: 'english',
score: 80
}
];

如何求该同学的总成绩?

很显然,利用for循环可以很简单得出结论

var sum = 0;
for(var i=0; i<result.length; i++) {
sum += result[i].score;
}

但是我们的宗旨就是抛弃for循环,因此使用reduce来搞定这个问题

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

这个时候,我给reduce参数添加了第二个参数。通过打印我发现设置了这个参数之后,reduce遍历便已经从第一项开始了。

这第二个参数就是设置prev的初始类型和初始值,比如为0,就表示prev的初始值为number类型,值为0,因此,reduce的最终结果也会是number类型。

因为第二个参数为累计结果的初始值,因此假设该同学因为违纪被处罚在总成绩总扣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) {
console.log(prev);
return cur.score + prev;
}, -10); var qsum = result.reduce(function(prev, cur) {
return prev + cur.score * dis[cur.subject]
}, 0) console.log(sum, qsum);

为了计算出权重之后的总值,我们在回调函数内部修改了数组当前项,是使他和权重比例关联袭来,并重新返回一个一样的回调函数,将新修改的当前项传入,就和之前的例子是一样的了。

在segmentfault上看到一个面试题,问如何知道一串字符串中每个字母出现的次数?

我们可以运用reduce来解决这个问题。

我们在reduce的第二个参数里面初始了回调函数第一个参数的类型和值,将字符串转化为数组,那么迭代的结果将是一个对象,对象的每一项key值就是字符串的字母。运行感受一下吧。


var arrString = 'abcdaabc'; arrString.split('').reduce(function(res, cur) {
  console.log(res,cur)
res[cur] ? res[cur] ++ : res[cur] = 1
return res;
}, {})

由于可以通过第二参数设置叠加结果的类型初始值,因此这个时候reduce就不再仅仅只是做一个加法了,我们可以灵活的运用它来进行各种各样的类型转换,比如将数组按照一定规则转换为对象,也可以将一种形式的数组转换为另一种形式的数组,大家可以动手去尝试一样。

[1, 2].reduce(function(res, cur) {
res.push(cur + 1);
return res;
}, [])

这种特性使得reduce在实际开发中大有可为!但是需要注意点,在ie9一下的浏览器中,并不支持该方法 !

reduce的用法的更多相关文章

  1. 廖雪峰教程笔记:js中map和reduce的用法

    举例说明,比如我们有一个函数f(x)=x2,要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上,就可以用map实现如下: 由于map()方法定义在JavaScript的 ...

  2. lambda,reduce,filter用法

    1.lambda的用法 sum = lambda arg1,arg2:arg1+arg2 sum(10,20) --->30 | | 实际上是def sum(arg1,arg2) return ...

  3. 浅谈JS中 reduce() 的用法

    过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...

  4. JS中 reduce() 的用法

    过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...

  5. Python语言——map/reduce的用法

    Python内建了map()和reduce()函数. 如果你读过Google的那篇大名鼎鼎的论文“MapReduce: Simplified Data Processing on Large Clus ...

  6. python之lambda、filter、map、reduce的用法说明

    python中有一些非常有趣的函数,面试的时候可能会遇到.今天也来总结一下,不过该类的网上资料也相当多,也没多少干货,只是习惯性将一些容易遗忘的功能进行整理. lambda 为关键字.filter,m ...

  7. python中filter(),map()和reduce()的用法及区别

    先看filter()方法 print(list(filter(lambda n : n % 2 == 1, range(20))))# 结果 [1, 3, 5, 7, 9, 11, 13, 15, 1 ...

  8. es6 reduce的用法

    一.forEach回调函数参数,item(数组元素).index(序列).arr(数组本身)循环数组,无返回值,不改变原数组不支持return操作输出,return只用于控制循环是否跳出当前循环 二. ...

  9. python之lambda、filter、map、reduce的用法说明(基于python2)

    python中有一些非常有趣的函数,面试的时候可能会遇到.今天也来总结一下,不过该类的网上资料也相当多,也没多少干货,只是习惯性将一些容易遗忘的功能进行整理. lambda 为关键字.filter,m ...

  10. filter以及reduce的用法

    简单的写了就几个例子 # 删掉偶数 li = [1,2,3,4,5,6,7,8,9,10] print(list(filter( lambda x : not x % 2 ==0 ,li))) #保留 ...

随机推荐

  1. page next page prev

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  2. XJOI 3629 非严格次小生成树(pqq的礼物)

    题目描述: 有一天,pqq准备去给×i×准备礼物,他有一些礼品准备包装一下,他用线将这些礼物连在一起,不同的礼物因为风格不同所以连接它们需要不同价值的线.风格差异越大,价格越大(所以两个礼物之间只有一 ...

  3. C和C++中的异常处理

    1.简介 许多的编程新手对异常处理视而不见,程序里很少考虑异常情况.一部分人甚至根本就不考虑,以为程序总是能以正确的途径运行.譬如我们有的程序设计者调用fopen打开一个文件后,立马就开始进行读写操作 ...

  4. Verilog MIPS32 CPU(六)-- MDU

    Verilog MIPS32 CPU(一)-- PC寄存器 Verilog MIPS32 CPU(二)-- Regfiles Verilog MIPS32 CPU(三)-- ALU Verilog M ...

  5. Arduino I2C + AC24C32 EEPROM

    主要特性 AC24C32是Atmel的两线制串行EEPROM芯片,根据工作电压的不同,有-2.7.-1.8两种类型.主要特性有: 工作范围:-2.7类型范围4.5~5.5V,-1.8类型1.8~5.5 ...

  6. Nutch2.2.1 爬虫问题列表

    http://www.cnblogs.com/cy163/archive/2013/02/14/2912630.html http://blog.csdn.net/wangzhaodong001/ar ...

  7. BlangenOA项目展示(附源码)

    1. 登录界面 1.1表单校验 1.2信息有误 1.3正在登录   2.桌面 3.用户管理 3.1添加 3.2删除 3.3编辑 3.4设置用户角色 3.5设置用户权限 4.角色管理 5.权限管理(菜单 ...

  8. C#里面获得应用程序的当前路径

    在C#里面获得应用程序的当前路径 Environment.CurrentDirectorySystem.IO.Directory.GetCurrentDirectory() ——上面两种获得的是当前路 ...

  9. Consul ACL

    consul自带ACL控制功能,看了很多遍官方文档,没有配置步骤https://www.consul.io/docs/internals/acl.html 主要对各种配置参数解释,没有明确的步骤,当时 ...

  10. on where having总结

    1. ON 和WHERE 所有的查询都回产生一个中间临时报表,查询结果就是从返回临时报表中得到.ON和WHERE后面所跟限制条件的区别,主要与限制条件起作用的时机有关, ON根据限制条件对数据库记录进 ...