Funzione freccia ECMAScript6 che restituisce un object

Quando si restituisce un object da una funzione a freccia, sembra che sia necessario utilizzare un set extra di {} e un’istruzione return a causa di un’ambiguità nella grammatica:

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

Se la funzione freccia restituisce qualcos’altro, {} e il reso non sono necessari, ad es .:

p => 'foo'

C’è qualcosa di ovvio che mi manca?

È necessario racchiudere il letterale dell’object restituito in parentesi. In caso contrario, verranno considerate le parentesi graffe per indicare il corpo della funzione. I seguenti lavori:

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

Non è necessario avvolgere qualsiasi altra espressione tra parentesi:

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

e così via.

Riferimento: MDN – Restituzione dei valori letterali dell’object

Potresti chiederti, perché la syntax è valida (ma non funziona come previsto):

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

È a causa della syntax dell’etichetta di JavaScript :

Quindi se si trasporta il codice sopra a ES5, dovrebbe apparire come:

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

Se il corpo della funzione freccia è racchiuso tra parentesi graffe, non viene restituito implicitamente. Avvolgi l’object tra parentesi. Assomiglierebbe a questo.

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

Con il wrapping del corpo in Parens, la funzione restituirà { foo: 'bar } .

Spero che questo risolva il tuo 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 Funzioni freccia Javascript