Answers:
您必须将返回的对象文字包装在括号中。否则,花括号将被视为表示功能的主体。以下作品:
p => ({ foo: 'bar' });
您不需要将任何其他表达式包装到括号中:
p => 10;
p => 'foo';
p => true;
p => [1,2,3];
p => null;
p => /^foo$/;
等等。
参考:MDN-返回对象文字
p
的对象字面的关键,这是你怎么做:p => ({ [p]: 'bar' })
。没有的话[]
,要么是undefined
字母要么就是字母p
。
您可能想知道,为什么语法有效(但不能按预期工作):
var func = p => { foo: "bar" }
这是因为JavaScript的标签语法:
因此,如果将上面的代码转换为ES5,它应该看起来像:
var func = function (p) {
foo:
"bar"; //obviously no return here!
}
如果arrow函数的主体用花括号括起来,则不会隐式返回。将对象包装在括号中。看起来像这样。
p => ({ foo: 'bar' })
通过将主体包裹在括号中,该函数将返回{ foo: 'bar }
。
希望可以解决您的问题。如果不是,我最近写了一篇有关Arrow函数的文章,其中对此进行了更详细的介绍。希望对你有帮助。Javascript箭头函数
const getUser = user => {return { name: user.name, age: user.age };};
const user = { name: "xgqfrms", age: 21 };
console.log(getUser(user));
// {name: "xgqfrms", age: 21}
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解释器认为您正在打开一个多语句代码块,并且在该块中,您必须明确提及return语句。
如果箭头函数表达式具有单个语句,则可以使用以下语法:
p => ({foo: "bar", attr2: "some value", "attr3": "syntax choices"})
但是,如果要具有多个语句,则可以使用以下语法:
p => {return {foo: "bar", attr2: "some value", "attr3": "syntax choices"}}
在上面的示例中,第一组花括号打开了一个多语句代码块,第二组花括号用于动态对象。在箭头功能的多语句代码块中,您必须显式使用return语句
有关更多详细信息,请检查Mozilla Docs中的JS Arrow函数表达式
您可以随时查看更多定制解决方案:
x => ({}[x.name] = x);