当从箭头函数返回对象时,似乎有必要使用额外的{}集合和return关键字,因为语法中存在歧义。
这意味着我不能写p=>{foo:“bar”},但必须写p=>{return{foo:”bar“};}。
如果箭头函数返回对象以外的任何对象,则不需要{}和返回,例如:p=>“foo”。
p=>{foo:“bar”}返回undefined。
修改后的p=>{“foo”:“bar”}抛出“SyntaxError:意外标记:':'”。
我有什么明显的遗漏吗?
当从箭头函数返回对象时,似乎有必要使用额外的{}集合和return关键字,因为语法中存在歧义。
这意味着我不能写p=>{foo:“bar”},但必须写p=>{return{foo:”bar“};}。
如果箭头函数返回对象以外的任何对象,则不需要{}和返回,例如:p=>“foo”。
p=>{foo:“bar”}返回undefined。
修改后的p=>{“foo”:“bar”}抛出“SyntaxError:意外标记:':'”。
我有什么明显的遗漏吗?
必须将返回的对象文本包装到括号中。否则,大括号将被视为表示函数的主体。以下工作:
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}。
希望这能解决你的问题。如果没有,我最近写了一篇关于Arrow函数的文章,其中更详细地介绍了它。我希望你觉得它有用。Javascript箭头函数
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}
解释
refs
https://github.com/lydiahallie/javascript-questions/issues/220
https://mariusschulz.com/blog/returning-object-literals-from-arrow-functions-in-javascript
问题:
当您正在执行以下操作时:
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函数表达式