ECMAScript 6返回对象的箭头函数

Question

当从箭头函数返回一个对象时,由于语法的模糊性,似乎有必要使用额外的一组{}和一个return关键字.

这意味着我不能写p => {foo: "bar"},但必须写p => { return {foo: "bar"}; }.

如果箭头函数返回除对象以外的任何内容{},return则不需要,例如:p => "foo".

p => {foo: "bar"}回报undefined.

修改后的p => {"foo": "bar"}抛出" SyntaxError:意外标记:' :'".

有什么明显的东西我不见了吗？

Answer 1

您必须将返回的对象文字包装到括号中.否则花括号将被视为表示函数的主体.以下作品:

p => ({ foo: 'bar' });

您不需要将任何其他表达式包装到括号中:

p => 10;
p => 'foo';
p => true;
p => [1,2,3];
p => null;
p => /^foo$/;

等等.

参考:MDN - 返回对象文字

Answer 2

您可能想知道,为什么语法有效(但没有按预期工作):

var func = p => { foo: "bar" }

这是因为JavaScript的标签语法:

因此,如果您将上述代码转换为ES5,它应该如下所示:

var func = function (p) {
  foo:
  "bar"; //obviously no return here!
}

Answer 3

如果箭头函数的主体包裹在花括号中,则不会隐式返回它.将对象包裹在括号中.它看起来像这样.

p => ({ foo: 'bar' })

通过将身体包裹在parens中,函数将返回{ foo: 'bar }.

希望,这可以解决您的问题.如果没有,我最近写了一篇关于箭头功能的文章,它更详细地介绍了它.希望对你有帮助.Javascript箭头功能

Answer 4

问题：

当你在做：

p => {foo: "bar"}

JavaScript 解释器认为您正在打开一个多语句代码块，并且在该块中，您必须明确提及一个 return 语句。

解决方案：

如果您的箭头函数表达式只有一个statement，那么您可以使用以下语法：

p => ({foo: "bar", attr2: "some value", "attr3": "syntax choices"})

但是如果你想有多个语句，那么你可以使用以下语法：

p => {return {foo: "bar", attr2: "some value", "attr3": "syntax choices"}}

在上面的例子中，第一组大括号打开一个多语句代码块，第二组大括号用于动态对象。在箭头函数的多语句代码块中，必须显式使用 return 语句

有关更多详细信息，请查看Mozilla Docs for JS Arrow Function Expressions