關(guān)于JS中reduce()的一道問題請(qǐng)教

1. 你需要先了解reduce
2. countWords執(zhí)行過程

每次循環(huán)開始前，各變量的值

第三次循環(huán)完成后return的值：
{apple: 2, pear: 1}

reduce,簡單說是一個(gè)累加。第一個(gè)參數(shù)是一個(gè)函數(shù)，這個(gè)函數(shù)中第一個(gè)參數(shù)是總和，第二個(gè)參數(shù)是當(dāng)前遍歷的子項(xiàng)。第二個(gè)參數(shù)為初始值。這里是一個(gè){}。

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)

你需要一個(gè)debugger,以及一個(gè)瀏覽器控制臺(tái),然后再控制臺(tái)去運(yùn)行這段代碼。按F10去看每一句的實(shí)現(xiàn)。

當(dāng)一個(gè)值不存在時(shí)，初始為1.第二個(gè)apple，之前初始為1，現(xiàn)在值變成2了。遇到這種問題，自己打斷點(diǎn)最容易理解。

具體請(qǐng)看 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}

很簡單的 類似于數(shù)組統(tǒng)計(jì)出現(xiàn)次數(shù) 哈希實(shí)現(xiàn)方式 就是如果對(duì)象中有這個(gè)值 就加1 沒有的話就初始化 值為1

首先拿個(gè)具體的例子來看看這個(gè)函數(shù)是干什么：

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

返回:

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

很明顯，這個(gè)是函數(shù)是用來統(tǒng)計(jì)某個(gè)值在數(shù)組中的出現(xiàn)次數(shù)的，比如我想計(jì)算apple在某個(gè)數(shù)組中出現(xiàn)的次數(shù)。

這里是很巧妙的利用來內(nèi)建函數(shù)reduce來實(shí)現(xiàn)的功能。

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

reduce方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)是一個(gè)callback，用于針對(duì)數(shù)組項(xiàng)的操作；第二個(gè)參數(shù)則是傳入的初始值，這個(gè)初始值用于單個(gè)數(shù)組項(xiàng)的操作。需要注意的是，reduce方法返回值并不是數(shù)組，而是形如初始值的經(jīng)過疊加處理后的操作。

就拿樓主的例子來說，

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 {}
}

第一次執(zhí)行遍歷的時(shí)候，執(zhí)行到位置1

// 位置1時(shí)，各個(gè)參數(shù)的值
countMap = {};
word = 'apple';

執(zhí)行到位置2的時(shí)候,

// 位置2時(shí)，各個(gè)參數(shù)的值
countMap = {apple: 1};
word = 'apple';

以此類推即可。