tutorial - javascript promise




Funzione freccia ECMAScript 6 che restituisce un oggetto (4)

Quando si restituisce un oggetto da una funzione freccia, sembra che sia necessario utilizzare un set aggiuntivo di {} e una parola chiave return causa di un'ambiguità nella grammatica.

Ciò significa che non posso scrivere p => {foo: "bar"} , ma devo scrivere p => { return {foo: "bar"}; } p => { return {foo: "bar"}; } .

Se la funzione freccia restituisce qualcosa di diverso da un oggetto, {} e return non sono necessari, ad esempio: p => "foo" .

p => {foo: "bar"} restituisce undefined .

Un p => {"foo": "bar"} genera " SyntaxError : token imprevisto: ' : '” .

C'è qualcosa di ovvio che mi manca?



Problema:

Quando lo fai:


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

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

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

L'interprete JavaScript pensa che stai aprendo un blocco di codice con più istruzioni e in quel blocco devi menzionare esplicitamente un'istruzione di ritorno.

Soluzione:

Se l' espressione della funzione freccia ha una singola istruzione , è possibile utilizzare la sintassi seguente:

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

Ma se si desidera avere più istruzioni, è possibile utilizzare la sintassi seguente:

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

Nell'esempio sopra, la prima serie di parentesi graffe apre un blocco di codice a più istruzioni e la seconda serie di parentesi graffe è per oggetti dinamici. Nel blocco di codice multiistruzione della funzione freccia, è necessario utilizzare esplicitamente le dichiarazioni di ritorno

Per maggiori dettagli, controlla Mozilla Docs per le espressioni di funzioni della freccia JS


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

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

È a causa della sintassi dell'etichetta JavaScript :

Quindi, se si traspila il codice sopra in ES5, dovrebbe apparire come:

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

Puoi sempre verificarlo per ulteriori soluzioni personalizzate:

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




arrow-functions