Fonction de flèche ECMAScript 6 qui renvoie un objet

620

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?

jkschneider
la source

Réponses:

1108

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

alexpods
la source
7
Je suis curieux de savoir pourquoi les parens font une différence.
wrschneider
40
@wrschneider parce que sans parens js parser pense que c'est un corps fonctionnel, pas un objet, et foo est un label
alexpods
21
@wrschneider plus spécifiquement, en termes de nœuds AST, l'utilisation de parenthèses désigne une instruction d'expression, dans laquelle une expression d'objet peut exister, alors que par défaut, les accolades sont interprétées comme une instruction de bloc.
Patrick Roberts
5
Aucune idée pourquoi cela fonctionne, mais si vous souhaitez utiliser la valeur pcomme clé pour le littéral d'objet, voici comment vous le faites: p => ({ [p]: 'bar' }). Sans le [], ce sera soit undefinedlittéralement la lettre p.
DanMan
1
@DanMan Cela s'appelle des propriétés calculées et c'est une caractéristique des littéraux d'objet.
D. Pardal
62

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!
}
Petr Odut
la source
5
Les étiquettes sont une fonctionnalité ésotérique rarement utilisée. Ont-ils vraiment une valeur? J'ai l'impression qu'ils devraient être dépréciés et finalement supprimés.
Kenmore
@Kenmore Voir stackoverflow.com/questions/55934490/… - rétrocompatibilité. Les navigateurs refuseront d'implémenter une fonctionnalité qui casse les sites existants
CertainPerformance
@Kenmore, vous pouvez quitter les boucles imbriquées si elles sont étiquetées. Pas souvent utilisé mais certainement utile.
Petr Odut
17

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

Paul McBride
la source
2

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}
  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/220

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

xgqfrms
la source
1

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

Rouillé
la source
-2

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

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