本文翻译自: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