小开

最佳答案

您必须将返回的对象文字包装在括号中。否则花括号将被视为表示函数的主体。以下工作：

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' })

通过将主体包装在括号中，该函数将返回{ foo: 'bar }。

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

小开

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

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

小开

ES6箭头函数返回一个对象

正确的方式

正常函数返回一个对象

const getUser = user => {return { name: user.name, age: user.age };};
const user = { name: "xgqfrms", age: 21 };
console.log(getUser(user));//  {name: "xgqfrms", age: 21}

（js表情）

const getUser = user => ({ name: user.name, age: user.age });
const user = { name: "xgqfrms", age: 21 };
console.log(getUser(user));//  {name: "xgqfrms", age: 21}

解释

裁判

https://github.com/lydiahallie/javascript-questions/issues/220

https://mariusschulz.com/blog/returning-object-literals-from-arrow-functions-in-javascript

小开

问题：

当你做正在做：

p => {foo: "bar"}

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

解决方案：

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

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

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

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

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

有关详细信息，请查看适用于JS箭头函数表达式的Mozilla文档

ECMAScript 6返回对象的箭头函数

ES6箭头函数返回一个对象

解释

裁判

问题：

解决方案：