返回对象的ECMAScript 6箭头函数

当从箭头函数返回对象时，似乎有必要使用额外的{}集合和return关键字，因为语法中存在歧义。

这意味着我不能写p=>{foo:“bar”}，但必须写p=>｛return{foo:”bar“｝；｝。

如果箭头函数返回对象以外的任何对象，则不需要{}和返回，例如：p=>“foo”。

p=>{foo:“bar”}返回undefined。

修改后的p=>{“foo”：“bar”}抛出“SyntaxError:意外标记：'：'”。

我有什么明显的遗漏吗？

当前回答

问题：

当您正在执行以下操作时：

p => {foo: "bar"}

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

解决方案：

如果箭头函数表达式有一条语句，则可以使用以下语法：

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

但如果您希望有多个语句，则可以使用以下语法：

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

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

有关详细信息，请查看Mozilla文档中的JS Arrow函数表达式

其他回答

您可以随时查看此项以了解更多自定义解决方案：

x => ({}[x.name] = x);

必须将返回的对象文本包装到括号中。否则，大括号将被视为表示函数的主体。以下工作：

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

您不需要将任何其他表达式括在括号中：

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

等等

引用：MDN-返回对象文本

您可能会想，为什么语法有效（但不能按预期工作）：

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

这是因为JavaScript的标签语法：

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

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

问题：

当您正在执行以下操作时：

p => {foo: "bar"}

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

解决方案：

如果箭头函数表达式有一条语句，则可以使用以下语法：

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

但如果您希望有多个语句，则可以使用以下语法：

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

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

有关详细信息，请查看Mozilla文档中的JS Arrow函数表达式

如果箭头函数的主体用大括号包装，则不会隐式返回。将对象括在括号中。它看起来像这样。

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

通过用括号包装正文，函数将返回｛foo:'bar｝。

希望这能解决你的问题。如果没有，我最近写了一篇关于Arrow函数的文章，其中更详细地介绍了它。我希望你觉得它有用。Javascript箭头函数

推荐文章