it-swarm.com.de

ECMAScript 6-Pfeilfunktion, die ein Objekt zurückgibt

Wenn Sie ein Objekt von einer Pfeilfunktion zurückgeben, ist es anscheinend erforderlich, einen zusätzlichen Satz von {} und ein return-Schlüsselwort zu verwenden, da die Grammatik nicht eindeutig ist.

Das bedeutet, dass ich nicht p => {foo: "bar"} schreiben kann, sondern p => { return {foo: "bar"}; } schreiben muss.

Wenn die Pfeilfunktion etwas anderes als ein Objekt zurückgibt, sind {} und return nicht erforderlich, z. B .: p => "foo".

p => {foo: "bar"} gibt undefined zurück.

Ein modifizierter p => {"foo": "bar"} wirft "SyntaxError: unerwartetes Token: ':'".

Gibt es etwas offensichtliches, was ich vermisse?

563
jkschneider

Sie müssen das zurückgegebene Objektliteral in Klammern setzen. Andernfalls wird angenommen, dass geschweifte Klammern den Körper der Funktion bezeichnen. Die folgenden Arbeiten:

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

Sie müssen keine weiteren Ausdrücke in Klammern setzen:

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

und so weiter.

Referenz: MDN - Rückgabe von Objektliteralen

1011
alexpods

Sie fragen sich vielleicht, warum die Syntax gültig ist (aber nicht wie erwartet funktioniert):

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

Es liegt an JavaScript's Beschriftungssyntax :

Wenn Sie also den obigen Code in ES5 transpilieren, sollte er wie folgt aussehen:

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

Wenn der Textkörper der Pfeilfunktion in geschweifte Klammern eingeschlossen ist, wird er nicht implizit zurückgegeben. Wickeln Sie das Objekt in Klammern. Es würde ungefähr so ​​aussehen.

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

Wenn Sie den Körper in Parens einwickeln, gibt die Funktion { foo: 'bar } zurück.

Hoffentlich löst das Ihr Problem. Wenn nicht, habe ich kürzlich einen Artikel über die Pfeilfunktionen geschrieben, in dem er ausführlicher behandelt wird. Ich hoffe, Sie finden es nützlich. Javascript-Pfeilfunktionen

14
Paul McBride

die richtigen wege

  1. normales Rückgabeobjekt

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. (js Ausdrücke)

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

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

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

erklären

image

Die gleiche Antwort finden Sie hier!

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

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

0
xgqfrms

Sie können dies jederzeit überprüfen, um weitere benutzerdefinierte Lösungen zu erhalten:

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