为何箭头函数在reduce调用中，示例1需return而示例2无需？

先看两个对比示例：

示例1（执行报错） #

var primaryColors = [
  { color: 'red' },
  { color: 'blue' },
  { color: 'yellow' },
];
var answer = primaryColors.reduce((x,y) => x.push(y.color) , []); 
// 抛出 TypeError: x.push is not a function

示例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;
}, []);

问题核心 #

在JavaScript中，为何示例2无需使用return关键字即可完成求和，而示例1必须添加return才能正常运行？

解答 #

这其实和箭头函数的语法规则直接相关，跟reduce本身的特性没啥关系：

• 当箭头函数用**简洁体（不带花括号）**时，函数会自动返回箭头后面表达式的结果。比如示例2里的(sum, number) => sum + number，本质上完全等价于：

  (sum, number) => {
    return sum + number;
  }
  

  这里sum + number是一个表达式，箭头函数帮我们自动做了return操作，所以reduce每次都能拿到累计的数值，自然能正常完成求和。

• 当箭头函数用块体（带花括号）时，就必须手动写return来返回值。而示例1最初的写法(x,y) => x.push(y.color)，看起来是简洁体，但这里藏了个坑：x.push(y.color)的返回值是数组新的长度（一个数字），不是数组本身！所以第一次执行后，reduce的下一次累计值x就变成了数字1，数字根本没有push方法，可不就报错了嘛。

  那修复时为啥要加花括号和return？因为我们需要把修改后的数组x作为下一次累计的参数，而不是push返回的长度。用块体包裹后，必须显式return x，才能让reduce拿到正确的累计值（数组），后续的push操作才能正常执行。

简单总结：

• 箭头函数简洁体：自动return表达式结果
• 箭头函数块体：必须显式写return
• 额外注意：push的返回值是数组长度，不是数组本身，这也是示例1报错的直接诱因

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