箭头函数提供了更简洁和更短的语法,其中一个可用功能是可以将函数编写为具有隐式返回值的lambda表达式。这对于功能样式代码很方便,比如使用函数映射数组:
const numbers = [1,2,3,4];
numbers.map(n => n * n);
这个箭头函数将按照预期的方式工作,它将值自身相乘并返回到包含的新数组[1, 4, 9, 16]
但是,如果你尝试映射到对象,例如,假设将数字映射到包含如下值的对象数组:
const numbers = [1,2,3,4];
numbers.map(n => {value:n});
这里的结果实际上是一个包含未定义值的数组。虽然看起来我们在这里返回一个对象,但是解释器看到了完全不同的东西。如果我们将上面的箭头函数推断为解释器,实际上最终执行的内容像这样:
numbers.map(function(n){ value: n return; });
解决方法就是将对象包装在括号中,将其转换为表达式而不是块语句
numbers.map(n =>({value:n}));