关于Array.prototype.reduce()统计值实例的两处技术疑问

原示例代码 #

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

const countedNames = names.reduce((allNames, name) => {
    const currCount = allNames[name] ?? 0;
    return {
        ...allNames,
        [name]: currCount + 1,
    };
}, {});

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

疑问解答 #

1. allNames[name] 的含义 #

注意这里的allNames不是数组，而是个对象（从后面的初始值{}就能看出来）。allNames[name]的作用是：取出对象allNames里，属性名等于当前name变量值的那个属性的数值。比如当循环到"Alice"时，它就等同于allNames.Alice，用来获取当前"Alice"已经被统计到的次数。

2. 该语法形式的名称 #

这不是数组的索引访问语法，它叫做对象的方括号表示法（Bracket Notation）。和我们常用的点表示法（比如obj.key）相比，方括号表示法支持用变量、表达式作为属性名访问对象属性——就像这个示例里，我们用数组里的每个名字作为动态的属性名，这种场景下点表示法无法使用，必须用方括号表示法。

3. names.reduce() 末尾{}的作用 #

这个{}是reduce方法的初始值参数。reduce执行时，会把这个值作为第一次调用回调函数时的allNames参数传入。我们需要从一个空对象开始，逐步往里面累加每个名字的出现次数，所以初始值设为空白对象{}。如果不指定这个初始值，reduce会默认把数组的第一个元素当成初始值，这显然不符合统计次数的需求。

内容的提问来源于stack exchange，提问作者Green Dog