ECMAScript 6-Pfeilfunktion, die ein Objekt zurückgibt

619

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?

jkschneider
quelle

Antworten:

1108

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

Alexpods
quelle
7
Ich bin gespannt, warum die Eltern einen Unterschied machen.
Wrschneider
40
@wrschneider weil ohne parens js parser denkt, dass es ein Funktionskörper ist, kein Objekt, und foo ist ein Label
alexpods
21
@wrschneider bezeichnet in Bezug auf AST-Knoten die Verwendung von Klammern eine Ausdrucksanweisung, in der ein Objektausdruck vorhanden sein kann, während geschweifte Klammern standardmäßig als Blockanweisung interpretiert werden.
Patrick Roberts
5
Keine Ahnung, warum dies funktioniert, aber wenn Sie den Wert von pals Schlüssel für das Objektliteral verwenden möchten, gehen Sie folgendermaßen vor : p => ({ [p]: 'bar' }). Ohne das []wird es entweder undefinedoder buchstäblich der Brief sein p.
DanMan
1
@DanMan Es heißt berechnete Eigenschaften und ist eine Funktion von Objektliteralen.
D. Pardal
62

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!
}
Petr Odut
quelle
5
Etiketten sind ein so selten verwendetes und esoterisches Merkmal. Haben sie WIRKLICH irgendeinen Wert? Ich denke, sie sollten veraltet und schließlich entfernt werden.
Kenmore
@ Kenmore Siehe stackoverflow.com/questions/55934490/… - Abwärtskompatibilität. Browser werden sich weigern, eine Funktion zu implementieren, die vorhandene Websites
beschädigt
@ Kenmore Sie können verschachtelte Schleifen verlassen, wenn sie beschriftet sind. Nicht oft benutzt, aber auf jeden Fall nützlich.
Petr Odut
17

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

Paul McBride
quelle
2

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

Bild

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

xgqfrms
quelle
1

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

rostig
quelle
-2

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

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