本文翻譯自：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}
explain 說明
The same answer can be found here! 在這裏可以找到相同的答案！
https://github.com/lydiahallie/javascript-questions/issues/220 https://github.com/lydiahallie/javascript-questions/issues/220
https://mariusschulz.com/blog/returning-object-literals-from-arrow-functions-in-javascript https://mariusschulz.com/blog/returning-object-literals-from-arrow-functions-in-javascript