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

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

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

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

Une modification p => {"foo": "bar"}renvoie « SyntaxError: jeton inattendu: ' :» » .

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

Vous devez encapsuler 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 - Retour des littéraux d'objet

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 la syntaxe d'étiquette de JavaScript :

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

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

Si le corps de la fonction 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 entre parenthèses, la fonction reviendra { foo: 'bar }.

J'espère que cela résout votre problème. Sinon, j'ai récemment écrit un article sur les fonctions Flèche qui le couvre plus en détail. J'espère que tu trouves cela utile. Fonctions de flèche Javascript

les bonnes façons

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}

2. (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

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

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

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

Problème:

Quand vous faites:

p => {foo: "bar"}

L'interpréteur JavaScript pense que vous ouvrez un bloc de code multi-instructions, et dans ce bloc, vous devez mentionner explicitement une instruction de retour.

Solution:

Si votre expression de fonction de flèche a une seule instruction , vous pouvez utiliser la syntaxe suivante:

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

Mais si vous souhaitez avoir plusieurs instructions, vous pouvez utiliser la syntaxe suivante:

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

Dans l'exemple ci-dessus, le premier ensemble d'accolades ouvre un bloc de code à instructions multiples et le deuxième ensemble d'accolades est destiné aux objets dynamiques. Dans le bloc de code à instructions multiples de la fonction flèche, vous devez utiliser explicitement les instructions de retour

Pour plus de détails, consultez Mozilla Docs pour les expressions de fonction JS Arrow

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

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