Funkcja strzałki ECMAScript 6, która zwraca obiekt

619

Zwracając obiekt z funkcji strzałki, wydaje się, że konieczne jest użycie dodatkowego zestawu {}i returnsłowa kluczowego z powodu niejasności w gramatyce.

Oznacza to, że nie mogę pisać p => {foo: "bar"}, ale muszę pisać p => { return {foo: "bar"}; }.

Jeśli funkcja strzałki zwraca coś innego niż obiekt, znaki {}i returnsą niepotrzebne, np p => "foo". :

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

Zmodyfikowany p => {"foo": "bar"}wyrzuca SyntaxError: nieoczekiwany token: :” ” .

Czy brakuje mi czegoś oczywistego?

jkschneider
źródło

Odpowiedzi:

1108

Literę zwracanego obiektu należy owinąć w nawiasy. W przeciwnym razie będą brane pod uwagę nawiasy klamrowe oznaczające ciało funkcji. Następujące prace:

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

Nie musisz zawijać żadnego innego wyrażenia w nawiasy:

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

i tak dalej.

Odniesienie: MDN - zwracanie literałów obiektowych

alexpods
źródło
7
Ciekawe, dlaczego pareny robią różnicę.
wrschneider,
40
@wrschneider, ponieważ bez parens js parser uważa, że ​​jest to ciało funkcyjne, a nie obiekt, a foo to etykieta
alexpods
21
@ wrschneider, a dokładniej, w odniesieniu do węzłów AST, użycie nawiasów oznacza wyrażenie wyrażenia, w którym może istnieć wyrażenie obiektu, podczas gdy domyślnie nawiasy klamrowe są interpretowane jako wyrażenie blokowe.
Patrick Roberts,
5
Nie mam pojęcia, dlaczego to działa, ale jeśli chcesz użyć wartości pjako klucz do dosłownego obiektu, to jak to zrobić: p => ({ [p]: 'bar' }). Bez []tego będzie to undefinedalbo dosłownie litera p.
DanMan
1
@DanMan Nazywa się to właściwościami obliczeniowymi i jest cechą literałów obiektowych.
D. Pardal
62

Możesz się zastanawiać, dlaczego składnia jest poprawna (ale nie działa zgodnie z oczekiwaniami):

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

Wynika to ze składni etykiet JavaScript :

Więc jeśli transponujesz powyższy kod do ES5, powinien on wyglądać następująco:

var func = function (p) {
  foo:
  "bar"; //obviously no return here!
}
Petr Odut
źródło
5
Etykiety są tak rzadko używaną i ezoteryczną cechą. Czy naprawdę mają jakąś wartość? Wydaje mi się, że powinny być przestarzałe i ostatecznie usunięte.
Kenmore
@Kenmore Patrz stackoverflow.com/questions/55934490/… - zgodność wsteczna. Przeglądarki odmówią wdrożenia funkcji, która psuje istniejące witryny
CertainPerformance
@Kenmore możesz wyjść z zagnieżdżonych pętli, jeśli są oznaczone. Nie często używane, ale zdecydowanie przydatne.
Petr Odut
17

Jeśli treść funkcji strzałki jest owinięta nawiasami klamrowymi, nie jest niejawnie zwracana. Zawiń obiekt w nawiasy. Wyglądałoby to mniej więcej tak.

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

Po zawinięciu ciała w pareny funkcja powróci { foo: 'bar }.

Mam nadzieję, że to rozwiąże twój problem. Jeśli nie, napisałem niedawno artykuł o funkcjach Arrow, który opisuje go bardziej szczegółowo. Mam nadzieję, że uznasz to za przydatne. Funkcje strzałek JavaScript

Paul McBride
źródło
2

właściwe sposoby

  1. normalny obiekt zwrotny

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. (wyrażenia js)

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

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

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

wyjaśnić

wizerunek

Tę samą odpowiedź można znaleźć tutaj!

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

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

xgqfrms
źródło
1

Kwestia:

Kiedy to robisz:

p => {foo: "bar"}

Tłumacz języka JavaScript myśli, że otwierasz blok kodu składający się z wielu instrukcji, aw tym bloku musisz wyraźnie wspomnieć o instrukcji return.

Rozwiązanie:

Jeśli wyrażenie funkcji strzałki ma jedną instrukcję , możesz użyć następującej składni:

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

Ale jeśli chcesz mieć wiele instrukcji , możesz użyć następującej składni:

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

W powyższym przykładzie pierwszy zestaw nawiasów klamrowych otwiera blok kodu z wieloma instrukcjami, a drugi zestaw nawiasów klamrowych jest przeznaczony dla obiektów dynamicznych. W bloku instrukcji zawierającej wiele instrukcji, musisz jawnie używać instrukcji return

Aby uzyskać więcej informacji, sprawdź Mozilla Docs dla wyrażeń funkcji strzałek JS

Zardzewiały
źródło
-2

Zawsze możesz to sprawdzić, aby uzyskać więcej niestandardowych rozwiązań:

x => ({}[x.name] = x);
SirtusKottus
źródło