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

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

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

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

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

C'è qualcosa di ovvio che mi manca?

È necessario racchiudere letteralmente l'oggetto di ritorno tra parentesi. Altrimenti le parentesi graffe verranno considerate per indicare il corpo della funzione. Le seguenti opere:

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

Non è necessario racchiudere altre espressioni tra parentesi:

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

e così via.

Riferimento: MDN - Restituzione di oggetti letterali

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!
}

Se il corpo della funzione freccia è racchiuso tra parentesi graffe, non viene implicitamente restituito. Avvolgere l'oggetto tra parentesi. Sembrerebbe qualcosa del genere.

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

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

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

i modi giusti

1. oggetto di ritorno normale

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. (espressioni js)

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

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

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

spiegare

La stessa risposta può essere trovata qui!

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

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

Problema:

Quando lo fai:

p => {foo: "bar"}

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

Puoi sempre verificarlo per ulteriori soluzioni personalizzate:

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