funzione freccia ECMAScript6 che restituisce un oggetto

Question

In caso di restituzione di un oggetto da una funzione di freccia, sembra che sia necessario utilizzare un ulteriore set di {} e una dichiarazione di ritorno a causa di un'ambiguità nella grammatica:

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

Se la funzione freccia ritorna ogni altra cosa, il {} e ritorno non sono necessari, ad esempio:

p => 'foo'

c'è qualcosa di ovvio che mi manca?

Answer 1

È necessario racchiudere tra parentesi il letterale dell'oggetto restituito. In caso contrario, verranno considerate le parentesi graffe per indicare il corpo della funzione. Le seguenti opere:

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

Non c'è bisogno di avvolgere qualsiasi altra espressione in parentesi:

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

e così via.

Answer 2

Ci si potrebbe chiedere, perché la sintassi è valida (ma non funziona come previsto):

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

E 'a causa di JavaScript's label syntax:

Quindi, se si transpile il codice qui sopra per ES5, dovrebbe apparire come:

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

Answer 3

Se il corpo della funzione freccia è avvolto in parentesi graffe, non è implicitamente restituito. Avvolgi l'oggetto tra parentesi. Sarebbe simile a questo.

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

Avvolgendo il corpo in parentesi, la funzione restituirà { foo: 'bar }.

Speriamo che questo risolva il problema. In caso contrario, ho recentemente scritto un articolo sulle funzioni di Arrow che lo copre in modo più dettagliato. Spero che lo trovi utile Javascript Arrow Functions