ECMAScript 6 arrow function that returns an object
从箭头函数返回一个对象时,似乎有必要使用一组额外的
这意味着我不能写
如果箭头函数返回除对象以外的任何内容,则不需要
修改后的
有什么明显的东西我不见了吗?
您必须将返回的对象文字包装到括号中。否则花括号将被视为表示函数的主体。以下作品:
1 | p => ({ foo: 'bar' }); |
您不需要将任何其他表达式包装到括号中:
1 2 3 4 5 6 | p => 10; p => 'foo'; p => true; p => [1,2,3]; p => null; p => /^foo$/; |
等等。
参考:MDN - 返回对象文字
您可能想知道,为什么语法有效(但没有按预期工作):
1 | var func = p => { foo:"bar" } |
这是因为JavaScript的标签语法:
因此,如果您将上述代码转换为ES5,它应该如下所示:
1 2 3 4 | var func = function (p) { foo: "bar"; //obviously no return here! } |
如果箭头函数的主体包裹在花括号中,则不会隐式返回它。将对象包裹在括号中。它看起来像这样。
1 | p => ({ foo: 'bar' }) |
通过将主体包裹在parens中,函数将返回
希望,这可以解决您的问题。如果没有,我最近写了一篇关于箭头功能的文章,它更详细地介绍了它。希望对你有帮助。 Javascript箭头功能
正确的方法
1 2 3 4 5 6 | const getUser = user => {return { name: user.name, age: user.age };}; const user = { name:"xgqfrms", age: 21 }; console.log(getUser(user)); // {name:"xgqfrms", age: 21} |
1 2 3 4 5 6 | const getUser = user => ({ name: user.name, age: user.age }); const user = { name:"xgqfrms", age: 21 }; console.log(getUser(user)); // {name:"xgqfrms", age: 21} |
说明
The same answer can be found here!
https://github.com/lydiahallie/javascript-questions/issues/220
https://mariusschulz.com/blog/returning-object-literals-from-arrow-functions-in-javascript
您可以随时查看此更多自定义解决方案:
1 | x => ({}[x.name] = x); |