Question

//Example 1:
var primaryColors = [
  { color: 'red' },
  { color: 'blue' },
  { color: 'yellow' },
];

var answer = primaryColors.reduce((x,y) => x.push(y.color) , []);
//x.push is not a function



//Example 2:
var ints = [1,2,3];
var sum = ints.reduce((sum, number) => sum + number, 0);
//sum = 6

如上所示，示例1将抛出异常TypeError: x.push is not a function。为了使其有效，我们可以添加一对花括号并返回值，如下所示。

var answer = primaryColors.reduce((x,y) => { x.push(y.color); return x;}, []);

现在我并不真正理解return的需要。为什么示例2可以在不使用关键字return的情况下求和，而示例1需要返回关键字才能工作？

Answer 1

为什么示例1需要return关键字才能工作？

问题是x.push()返回数组的新长度，以便回复.reduce()的回调。但.reduce()将从您的回调中获取返回值，并在循环的下一次迭代中将其作为x的下一个值传递。所以你需要return x。

您执行此操作的方式，第二次调用回调时，x将为1，1.push()为错误。

如果您不理解为什么需要return x，请更全面地研究.reduce()的文档。 x是累加器，并且在回调的下一次迭代中x的值将是从前一次返回的任何值。

为什么示例2可以在不使用关键字return
的情况下求和

因为您的示例2，返回sum + number，这是您希望作为循环的下一次迭代的总和传递的。所以，它正在回归正确的事情。

仅供参考，使用.map()：

可能更容易完成您的第一个循环

//Example 1:
var primaryColors = [
  { color: 'red' },
  { color: 'blue' },
  { color: 'yellow' },
];

var answer = primaryColors.map(item => item.color);

箭头功能，在reduce调用中返回

1 个答案: