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

2skhul33  于 2023-02-15  发布在  Java
关注(0)|答案(6)|浏览(169)

当从arrow函数返回对象时,由于语法中的歧义,似乎有必要使用额外的一组{}和一个return关键字。
这意味着我不能写p => {foo: "bar"},但必须写p => { return {foo: "bar"}; }
如果arrow函数返回的不是对象,则{}return是不必要的,例如:p => "foo".
p => {foo: "bar"}将返回undefined
修改后的p => {"foo": "bar"}会抛出 "SyntaxError:意外标记:':'".
有什么明显的我错过了吗?

idv4meu8

idv4meu81#

你必须把返回的对象文本括在括号里,否则大括号将被认为是函数的主体,如下所示:

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

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

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

等等。
引用:MDN-返回对象文本

uwopmtnx

uwopmtnx2#

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

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

这是因为JavaScript's label syntax
因此,如果您将上面的代码转换到ES5,它应该如下所示:

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

yws3nbqq3#

如果arrow函数的主体被花括号括起来,它就不会被隐式返回。把对象括在圆括号里。它看起来像这样。

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

通过将函数体括在圆括号中,函数将返回{ foo: 'bar }
希望这能解决你的问题。如果没有,我最近写了一篇关于Arrow函数的文章,其中有更详细的介绍。我希望你会觉得它有用。Javascript Arrow Functions

xkftehaa

xkftehaa4#

问题:

当你做的是:

p => {foo: "bar"}

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

溶液:

如果箭头函数表达式具有单条语句,则可使用以下语法:

p => ({foo: "bar", attr2: "some value", "attr3": "syntax choices"})

但是如果你想拥有多条语句,那么你可以使用下面的语法:

p => {return {foo: "bar", attr2: "some value", "attr3": "syntax choices"}}
  • 在上面的例子中,第一组花括号打开一个多语句代码块,第二组花括号用于动态对象。在arrow函数的多语句代码块中,必须显式使用return语句 *

有关详细信息,请检查Mozilla Docs for JS Arrow Function Expressions

zbwhf8kr

zbwhf8kr5#

ES6箭头函数返回对象

正确的方法
1.普通函数返回一个对象

const getUser = user => {
  // do something
  const {name, age} = user;
  return { name, 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

gblwokeq

gblwokeq6#

您可以随时查看此页面以获取更多自定义解决方案:

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

相关问题