ECMAScript 6返回对象的箭头函数

时间:2015-02-27 17:02:26

标签: javascript ecmascript-6 arrow-functions

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

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

如果箭头函数返回除对象以外的任何内容,则{}return是不必要的,例如:p => "foo"

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

修改后的p => {"foo": "bar"}会引发SyntaxError:意外令牌:':'”

我有什么明显的遗失吗?

6 个答案:

答案 0 :(得分:966)

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

p => ({ foo: 'bar' });

您不需要将任何其他表达式包装到括号中:

p => 10;
p => 'foo';
p => true;
p => [1,2,3];
p => null;
p => /^foo$/;

等等。

参考:MDN - Returning object literals

答案 1 :(得分:55)

您可能想知道,为什么语法有效(但没有按预期工作):

var func = p => { foo: "bar" }

这是因为JavaScript's label syntax

因此,如果您将上述代码转换为ES5,它应该如下所示:

var func = function (p) {
  foo:
  "bar"; //obviously no return here!
}

答案 2 :(得分:12)

如果箭头函数的主体包裹在花括号中,则不会隐式返回它。将对象包裹在括号中。它看起来像这样。

p => ({ foo: 'bar' })

通过将身体包裹在parens中,该函数将返回{ foo: 'bar }

希望这能解决您的问题。如果没有,我最近写了一篇关于箭头功能的文章,它更详细地介绍了它。希望对你有帮助。 Javascript Arrow Functions

答案 3 :(得分:1)

正确的方法

  1. 正常返回对象

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. (js表达式)

const getUser = user => ({ name: user.name, age: user.age });

const user = { name: "xgqfrms", age: 21 };

console.log(getUser(user));
//  {name: "xgqfrms", age: 21}

解释

image

  

在这里可以找到相同的答案!

https://github.com/lydiahallie/javascript-questions/issues/220

https://mariusschulz.com/blog/returning-object-literals-from-arrow-functions-in-javascript

答案 4 :(得分:0)

您可以随时查看更多定制解决方案:

x => ({}[x.name] = x);

答案 5 :(得分:0)

问题:

这样做的时候:

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 for JS Arrow Function Expressions