本文翻译自：ECMAScript 6 arrow function that returns an object

When returning an object from an arrow function, it seems that it is necessary to use an extra set of {} and a return keyword because of an ambiguity in the grammar. 从箭头函数返回对象时，由于语法上的歧义，似乎有必要使用额外的{}和return关键字。

That means I can't write p => {foo: "bar"} , but have to write p => { return {foo: "bar"}; } 这意味着我不能写p => {foo: "bar"} ，而必须写p => { return {foo: "bar"}; } p => { return {foo: "bar"}; } . p => { return {foo: "bar"}; } 。

If the arrow function returns anything other than an object, the {} and return are unnecessary, eg: p => "foo" . 如果arrow函数返回的不是对象，则{}和return都是不必要的，例如： p => "foo" 。

p => {foo: "bar"} returns undefined . p => {foo: "bar"}返回undefined 。

A modified p => {"foo": "bar"} throws “ SyntaxError : unexpected token: ' : '” . 修改后的p => {"foo": "bar"}抛出“ SyntaxError ：意外令牌：' : '” 。

Is there something obvious I am missing? 有什么明显的我想念的东西吗？

#1楼

参考：https://stackoom.com/question/1wiUx/返回对象的ECMAScript-箭头函数

#2楼

You must wrap the returning object literal into parentheses. 您必须将返回的对象文字包装在括号中。 Otherwise curly braces will be considered to denote the function's body. 否则，花括号将被视为表示功能的主体。 The following works: 以下作品：

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

You don't need to wrap any other expression into parentheses: 您不需要将任何其他表达式包装到括号中：

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

and so on. 等等。

Reference: MDN - Returning object literals 参考： MDN-返回对象文字

#3楼

You may wonder, why the syntax is valid (but not working as expected): 您可能想知道，为什么语法有效（但不能按预期工作）：

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

It's because of JavaScript's label syntax : 这是因为JavaScript的标签语法：

So if you transpile the above code to ES5, it should look like: 因此，如果将上面的代码转换为ES5，它应该看起来像：

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

#4楼

If the body of the arrow function is wrapped in curly braces, it is not implicitly returned. 如果arrow函数的主体用花括号括起来，则不会隐式返回。 Wrap the object in parentheses. 将对象包装在括号中。 It would look something like this. 看起来像这样。

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

By wrapping the body in parens, the function will return { foo: 'bar } . 通过将主体包装在括号中，该函数将返回{ foo: 'bar } 。

Hopefully, that solves your problem. 希望可以解决您的问题。 If not, I recently wrote an article about Arrow functions which covers it in more detail. 如果不是，我最近写了一篇有关Arrow函数的文章，其中对此进行了更详细的介绍。 I hope you find it useful. 希望对你有帮助。 Javascript Arrow Functions Javascript箭头函数

#5楼

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

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

#6楼

the right ways 正确的方法

normal return object 正常返回对象


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 expressions ) （js表达式）


const getUser = user => ({ name: user.name, age: user.age });

const user = { name: "xgqfrms", age: 21 };

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