mdn中约简实例的解释

Question

有谁能详细解释一下这个片段吗？

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

var countedNames = names.reduce(function (allNames, name) { 
    if (name in allNames) {
        allNames[name]++;
    } else {
        allNames[name] = 1;
    }
    return allNames;
}, {}); 

请解释回调函数如何接受数组名称并给出答案。

countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

Answer 1

这定义并使用5个元素进行数组。

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

为了便于解释，让我们分别定义函数

该函数采用两个参数(allNames, name)。无论此函数返回什么，都会在每次迭代时添加到allNames中。

var myFunc = function (allNames, name) {

如果allNames已经包含了name，那么增加它的值

   if (name in allNames) {
        allNames[name]++;
    }

否则，将name添加为键并将其值设置为1

    else {
        allNames[name] = 1;
    }

从这个函数中返回allNames，所以减少可以将它作为allNames下一次迭代传递

   return allNames;
}

这将.reduce()的结果分配给countedNames，{}是初始值。

var countedNames = names.reduce(myFunc, {}); 

Answer 2

为了使它更清楚，下面是从函数式转换到过程式的相同代码

const names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

const countedNames = {};
for (let i = 0; i < names.length; i++) {
  let name = names[i];
  // if exists increment, else set to 1
  if (countedNames[name] != null) {
    countedNames[name]++;
  } else {
    countedNames[name] = 1;
  }
}

console.log(countedNames);

在“约简”中，{}是初始值，然后通过约简函数运行数组的每个元素，以修改最终值。