ECMAScript 6 箭头函数表示 returns 一个对象

Question

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

也就是说我不会写p => {foo: "bar"}，而不得不写p => { return {foo: "bar"}; }。

如果箭头函数returns不是对象，则{}和return是不必要的，例如：p => "foo".

p => {foo: "bar"} returns undefined.

A 修改后的 p => {"foo": "bar"} 抛出 “SyntaxError: unexpected token: ':'”.

有什么明显的我遗漏的东西吗？

Answer 1

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

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

您不需要将任何其他表达式括在括号中：

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

等等。

参考：MDN - Returning object literals

Answer 2

您可能想知道为什么语法有效（但未按预期工作）：

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

因为JavaScript's label syntax:

因此，如果将上述代码转换为 ES5，它应该如下所示：

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

Answer 3

如果箭头函数的函数体被花括号括起来，则它不会被隐式 returned。将对象括在括号中。它看起来像这样。

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

通过将正文包裹在括号中，函数将 return { foo: 'bar }.

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

Answer 4

您可以随时查看更多自定义解决方案：

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

Answer 5

ES6 箭头函数return是一个对象

the right ways

普通函数return对象


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


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

Answer 6

问题：

当你在做的时候：

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 statements

有关详细信息，请查看 Mozilla Docs for JS Arrow Function Expressions

ECMAScript 6 箭头函数表示 returns 一个对象

ECMAScript 6 arrow function that returns an object

javascript

ecmascript-6

arrow-functions

ES6 箭头函数return是一个对象

解释一下

参考资料

问题：

解决方案：