为何JavaScript的reduce函数会输出数组的元素个数？

嘿，这个问题的核心其实是你没注意到两个关键API的特性：Array.prototype.push()的返回值，以及reduce的工作逻辑～

先拆解来看：

1. push方法的返回值不是数组本身 #

你可能以为newColors.push(primaryColor.color)会返回添加元素后的数组，但实际上**push返回的是数组更新后的长度**。举个简单例子：

const arr = [];
console.log(arr.push('red')); // 输出1，因为现在数组长度是1
console.log(arr.push('yellow')); // 输出2，长度变成2

2. reduce的回调返回值会成为下一次的累加器 #

reduce的第一个参数是回调函数，这个函数的返回值会作为下一次回调执行时的第一个参数（累加器）。回到你的代码：

• 初始累加器是[]（reduce的第二个参数）
• 第一次回调：执行newColors.push('red')，返回1，所以下一次的累加器变成1
• 第二次回调：执行newColors.push('yellow')，返回2，累加器变成2
• 第三次回调：执行newColors.push('blue')，返回3，累加器变成3
• 遍历结束后，reduce最终返回的就是最后一次回调的返回值——也就是3

正确的写法应该是怎样的？ #

如果你想用reduce来生成新的颜色数组，应该在回调里返回累加器本身，而不是push的结果：

var primaryColors = [ { color: 'red' }, { color: 'yellow' }, { color: 'blue' } ];
var newColors = primaryColors.reduce(function(acc, primaryColor){
  acc.push(primaryColor.color);
  return acc; // 返回累加器，让下一次回调继续使用它
}, []);
console.log(newColors); // 输出 ['red', 'yellow', 'blue']

这样reduce最终返回的就是填充好的数组，newColors也会是你想要的结果～

内容的提问来源于stack exchange，提问作者Bikal Nepal