关于javascript：ECMAScript 6返回对象的箭头函数


ECMAScript 6 arrow function that returns an object

从箭头函数返回一个对象时，似乎有必要使用一组额外的{}和一个return关键字，因为语法含糊不清。

这意味着我不能写p => {foo:"bar"}，但必须写p => { return {foo:"bar"}; }。

如果箭头函数返回除对象以外的任何内容，则不需要{}和return，例如：p =>"foo"。

p => {foo:"bar"}返回undefined。

修改后的p => {"foo":"bar"}抛出"SyntaxError：意外标记：':'"。

有什么明显的东西我不见了吗？

您必须将返回的对象文字包装到括号中。否则花括号将被视为表示函数的主体。以下作品：

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中，函数将返回{ foo: 'bar }。

希望，这可以解决您的问题。如果没有，我最近写了一篇关于箭头功能的文章，它更详细地介绍了它。希望对你有帮助。 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}
  • (js表达式)
    • 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}

    说明

    image

    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);