Wenn Sie ein Objekt von einer Pfeilfunktion zurückgeben, scheint es aufgrund einer Mehrdeutigkeit in der Grammatik erforderlich zu sein, einen zusätzlichen Satz von {}und ein returnSchlüsselwort zu verwenden.

Das heißt, ich kann nicht schreiben p => {foo: "bar"}, muss aber schreiben p => { return {foo: "bar"}; }.

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

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

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

Gibt es etwas Offensichtliches, das mir fehlt?

Sie müssen das zurückgebende Objektliteral in Klammern setzen. Andernfalls werden geschweifte Klammern betrachtet, um den Körper der Funktion zu bezeichnen. Folgendes funktioniert:

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

Sie müssen keinen anderen Ausdruck 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

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

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

Dies liegt an der Beschriftungssyntax von JavaScript :

Wenn Sie also den obigen Code in ES5 transpilieren, sollte er folgendermaßen aussehen:

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

Wenn der Kö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, kehrt die Funktion zurück { foo: 'bar }.

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

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}

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

Die gleiche Antwort finden Sie hier!

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

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

Problem:

Wenn Sie tun:

p => {foo: "bar"}

Der JavaScript-Interpreter glaubt, dass Sie einen Codeblock mit mehreren Anweisungen öffnen, und in diesem Block müssen Sie eine return-Anweisung explizit erwähnen.

Lösung:

Wenn Ihr Pfeilfunktionsausdruck eine einzelne Anweisung enthält , können Sie die folgende Syntax verwenden:

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

Wenn Sie jedoch mehrere Anweisungen haben möchten, können Sie die folgende Syntax verwenden:

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

Im obigen Beispiel öffnet der erste Satz geschweifter Klammern einen Codeblock mit mehreren Anweisungen, und der zweite Satz geschweifter Klammern gilt für dynamische Objekte. Im Codeblock mit mehreren Anweisungen der Pfeilfunktion müssen Sie explizit return-Anweisungen verwenden

Weitere Informationen finden Sie in Mozilla Docs für JS-Pfeilfunktionsausdrücke

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

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