web-dev-qa-db-fra.com

ECMAScript 6 fonction de flèche qui retourne un objet

Lors du renvoi d'un objet à partir d'une fonction de flèche, il semble nécessaire d'utiliser un ensemble supplémentaire de {} et un mot clé return en raison d'une ambiguïté de la grammaire.

Cela signifie que je ne peux pas écrire p => {foo: "bar"}, mais je dois écrire p => { return {foo: "bar"}; }.

Si la fonction flèche renvoie autre chose qu'un objet, les {} et return ne sont pas nécessaires, par exemple: p => "foo".

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

Un p => {"foo": "bar"} modifié modifie "SyntaxError: jeton inattendu: ':'").

Y a-t-il quelque chose d'évident qui me manque?

javascriptecmascript-6arrow-functions
563
jkschneider

Vous devez placer le littéral d'objet renvoyé entre parenthèses. Sinon, les accolades seront considérées comme désignant le corps de la fonction. Les oeuvres suivantes:

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

Vous n'avez pas besoin de mettre une autre expression entre parenthèses:

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

etc.

Référence: MDN - Renvoi des littéraux d'objet

1011
alexpods

Vous vous demandez peut-être pourquoi la syntaxe est valide (mais ne fonctionne pas comme prévu):

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

C'est à cause de syntaxe de libellé de JavaScript :

Donc, si vous transcrivez le code ci-dessus en ES5, il devrait ressembler à ceci:

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

Si le corps de la fonction de flèche est entouré d'accolades, il n'est pas renvoyé implicitement. Enveloppez l'objet entre parenthèses. Cela ressemblerait à quelque chose comme ça.

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

En enveloppant le corps dans des parenthèses, la fonction retournera { foo: 'bar }.

J'espère que cela résoudra votre problème. Si ce n'est pas le cas, j'ai récemment écrit un article sur les fonctions de flèche qui le décrit plus en détail. J'espère que tu trouves cela utile. Fonctions de la flèche Javascript

14
Paul McBride

les bons moyens

  1. objet de retour normal

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. (expressions js)

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

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

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

explique

image

La même réponse peut être trouvée ici!

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

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

0
xgqfrms

Vous pouvez toujours vérifier ceci pour des solutions plus personnalisées:

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