Question Fonction de flèche ECMAScript6 qui renvoie un objet


Lors du retour d'un objet à partir d'une fonction fléchée, il semble qu'il soit nécessaire d'utiliser un ensemble supplémentaire de {} et une instruction return en raison d'une ambiguïté dans la grammaire:

p => { return { foo: 'bar' } }

Si la fonction de flèche retourne autre chose, le {} et le retour sont inutiles, par exemple:

p => 'foo'

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


430
2018-02-27 17:02


origine


Réponses:


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

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

Vous n'avez pas besoin d'insérer 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 - Littéraux d'objets retournés


764
2018-02-27 17:10



Vous pouvez vous demander pourquoi la syntaxe est valide (mais ne fonctionne pas comme prévu):

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

C'est à cause de La syntaxe de l'étiquette de JavaScript:

Donc, si vous transpilez le code ci-dessus vers ES5, cela devrait ressembler à ceci:

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

43
2018-06-15 09:40



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

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

En enroulant le corps en parens, la fonction retournera { foo: 'bar }.

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


6
2017-08-09 08:48