关于JS中reduce()的一道问题请教

Question

function countWords(arr) {
  return arr.reduce(function(countMap, word) {
    countMap[word] = ++countMap[word] || 1 // increment or initialize to 1
    return countMap
  }, {}) // second argument to reduce initialises countMap to {}
}

这个函数解决的是一个数组作为参数传入，最终return出来的结果是一个该数组内字符串的出现次数组成的对象，例如：

数组：var arr = ['apple','pear','apple'];
结果：

{
    apple: 2,
    pear: 1
}

其实我整段都不知道该咋理解，求高手给小弟分步骤解答一下，感谢！！

Answer 1

reduce,简单说是一个累加。第一个参数是一个函数，这个函数中第一个参数是总和，第二个参数是当前遍历的子项。第二个参数为初始值。这里是一个{}。

function countWords(arr) {
  return arr.reduce(function(countMap, word) {
    debugger;
    countMap[word] = ++countMap[word] || 1 // increment or initialize to 1
    return countMap
  }, {}) // second argument to reduce initialises countMap to {}
}
var arr = ['apple','pear','apple'];
countWords(arr)

你需要一个debugger,以及一个浏览器控制台,然后再控制台去运行这段代码。按F10去看每一句的实现。

当一个值不存在时，初始为1.第二个apple，之前初始为1，现在值变成2了。遇到这种问题，自己打断点最容易理解。

Answer 2

具体请看 reduce 的API介绍。

countMap = {}
countMap['apple'] = ++countMap['apple'] || 1
// word='apple'; countMap: {apple: 1}

countMap['pear'] = ++countMap['pear'] || 1
// word='pear'; countMap: {apple: 1, pear:1}

countMap['apple'] = ++countMap['apple'] || 1
// word='apple'; countMap: {apple: 2, pear:1}

Answer 3

首先拿个具体的例子来看看这个函数是干什么：

countWords(['apple','xiangjiao','juzi','xiangjiao','daodan','daodan','daodan','daodan'])

返回:

{
apple:1,
daodan:4
juzi:1,
xiangjiao:2
}

很明显，这个是函数是用来统计某个值在数组中的出现次数的，比如我想计算apple在某个数组中出现的次数。

这里是很巧妙的利用来内建函数reduce来实现的功能。

然后要理解reduce是什么,有什么用？

reduce方法有两个参数，第一个参数是一个callback，用于针对数组项的操作；第二个参数则是传入的初始值，这个初始值用于单个数组项的操作。需要注意的是，reduce方法返回值并不是数组，而是形如初始值的经过叠加处理后的操作。

就拿楼主的例子来说，

function countWords(arr) {
  return arr.reduce(function(countMap, word) {
    // 位置1
    countMap[word] = ++countMap[word] || 1 // increment or initialize to 1
    // 位置2
    return countMap
  }, {}) // second argument to reduce initialises countMap to {}
}

第一次执行遍历的时候，执行到位置1

// 位置1时，各个参数的值
countMap = {};
word = 'apple';

执行到位置2的时候,

// 位置2时，各个参数的值
countMap = {apple: 1};
word = 'apple';

以此类推即可。

Answer 4

很简单的 类似于数组统计出现次数 哈希实现方式 就是如果对象中有这个值 就加1 没有的话就初始化 值为1

Answer 5

1. 你需要先了解reduce
2. countWords执行过程

每次循环开始前，各变量的值

callback	countMap	word
first	{}	apple
second	{apple: 1}	pear
third	{apple: 1, pear: 1}	apple

第三次循环完成后return的值：
{apple: 2, pear: 1}