返回对象的ECMAScript 6箭头函数


619

当返回从箭头函数的对象,似乎有必要用一组额外的{}return因为在语法歧义的关键字。

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

如果arrow函数返回的不是对象,则{}return都是不必要的,例如:p => "foo"

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

修饰符p => {"foo": "bar"}抛出SyntaxError::意外标记::'”

有什么明显的我想念的东西吗?

Answers:


1108

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

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

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

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

等等。

参考:MDN-返回对象文字


7
我很好奇为什么父母会有所作为。
wrschneider

40
@wrschneider,因为没有parens js解析器就认为它是函数体,而不是对象,而foo是标签
alexpods

21
@wrschneider更具体地说,就AST节点而言,使用括号表示表达式语句,其中可以存在对象表达式,而默认情况下,花括号被解释为块语句。
帕特里克·罗伯茨

5
不知道为什么这个作品,但如果你想使用的值p的对象字面的关键,这是你怎么做:p => ({ [p]: 'bar' })。没有的话[],要么是undefined字母要么就是字母p
DanMan '18

1
@DanMan称为计算属性,它是对象文字的功能。
D. Pardal

62

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

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

这是因为JavaScript的标签语法

因此,如果将上面的代码转换为ES5,它应该看起来像:

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

5
标签是很少使用且神秘的功能。他们真的有任何价值吗?我觉得应该弃用并最终将它们删除。
Kenmore

@Kenmore请参阅stackoverflow.com/questions/55934490/…-向后兼容。浏览器将拒绝实施破坏现有站点的功能
SomePerformance

@Kenmore如果标记了嵌套循环,则可以退出它们。并不经常使用,但绝对有用。
Petr Odut

17

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

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

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

希望可以解决您的问题。如果不是,我最近写了一篇有关Arrow函数的文章,其中对此进行了更详细的介绍。希望对你有帮助。Javascript箭头函数


2

正确的方法

  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}

说明

图片

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

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

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


1

问题:

当您这样做时:

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函数表达式


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.