返回对象的 ECMAScript 6 箭头函数

IT技术 javascript ecmascript-6 arrow-functions
2021-01-11 20:44:20

当从箭头函数返回一个对象时,由于语法上的歧义,似乎需要使用额外的一组 of{}和一个return关键字。

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

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

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

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

有什么明显的我遗漏了吗?

6个回答

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

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

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

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

等等。

参考:MDN - 返回对象字面量

不知道为什么这个作品,但如果你想使用的值p的对象字面的关键,这是你怎么做:p => ({ [p]: 'bar' })如果没有[],它将是undefined或字面上的字母p
2021-03-19 20:44:20
@wrschneider 更具体地说,就 AST 节点而言,使用括号表示表达式语句,其中可以存在对象表达式,而默认情况下,大括号被解释为块语句。
2021-03-24 20:44:20
@DanMan 它被称为计算属性,它是对象字面量的一个特性。
2021-03-24 20:44:20
@wrschneider 因为没有括号 js 解析器认为它是一个函数体,而不是一个对象,而 foo 是一个标签
2021-03-25 20:44:20
我很好奇为什么父母会有所作为。
2021-03-28 20:44:20

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

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

这是因为JavaScript 的标签语法

所以如果你把上面的代码转译成 ES5,它应该是这样的:

var func = function (p) {
  foo:
  "bar"; //obviously no return here!
}
标签是一种很少使用且深奥的功能。它们真的有任何value吗?我觉得它们应该被弃用并最终被删除。
2021-03-17 20:44:20
@Kenmore 如果标记了嵌套循环,您可以退出它们。不经常使用但绝对有用。
2021-03-18 20:44:20
@Kenmore 参见stackoverflow.com/questions/55934490/... - 向后兼容。浏览器将拒绝实施破坏现有网站的功能
2021-04-07 20:44:20

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

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

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

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

为什么我们不必在括号内使用 return 关键字?
2021-03-19 20:44:20

问题:

当你在做:

p => {foo: "bar"}

JavaScript 解释器认为您正在打开一个多语句代码块,并且在该块中,您必须明确提及一个 return 语句。

解决方案:

如果您的箭头函数表达式只有一个statement,那么您可以使用以下语法:

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

ES6 箭头函数返回一个对象

正确的方法

  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