Co robią nawiasy klamrowe wewnątrz list parametrów funkcji w es6?

123

Ciągle widzę funkcje, które wyglądają tak w bazie kodu, nad którą pracuję:

const func = ({ param1, param2 }) => {
  //do stuff
}

Co to właściwie robi? Trudno mi go znaleźć w Google, ponieważ nie jestem nawet pewien, jak to się nazywa ani jak to opisać w wyszukiwarce Google.

javascript ecmascript-6 Nathan
źródło
możliwy duplikat składni parametrów obiektu dla funkcji javascript?
Bergi

Odpowiedzi:

118

Jest to destrukturyzacja , ale zawarta w parametrach. Odpowiednik bez destrukturyzacji to:

const func = o => {
    var param1 = o.param1;
    var param2 = o.param2;
    //do stuff
}
James Thorpe
źródło
12
Aby upewnić się, że dobrze rozumiem, zasadniczo oznacza to, że obiekt zawierający te właściwości zostałby przekazany do funkcji, a następnie w ramach funkcji można uzyskać dostęp do właściwości automatycznie, używając ich nazwy?
Nathan
7
@Nathan Tak, zobacz konkretną sekcję o niszczeniu obiektów . Należy jednak pamiętać, że aktualizacje zmiennych nie zaktualizują oryginalnych właściwości obiektu - to nie jest tak, że tworzy odniesienie do oryginalnej wartości.
James Thorpe
@JamesThorpe lepiej byłoby linkować do developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ ...
lsborg
11

To przekazuje obiekt jako własność.

Jest to w zasadzie skrót od

let param1 = someObject.param1
let param2 = someObject.param2

Inny sposób użycia tej techniki bez parametrów jest następujący, zastanówmy się przez chwilę, że someObject zawiera te właściwości.

let {param1, param2} = someObject;
Oz Lodriguez
źródło
3

Jest to zadanie polegające na niszczeniu obiektów. Podobnie jak ja, mogłeś uznać to za zaskakujące, ponieważ składnia destrukturyzacji obiektów ES6 wygląda jak, ale NIE zachowuje się jak konstrukcja dosłowna obiektu.

Obsługuje bardzo zwięzłą formę, na którą się natknąłeś, a także zmienia nazwy pól i domyślnych argumentów:

Zasadniczo jest to {oldkeyname: newkeyname = defaultvalue, ...}. „:” NIE jest separatorem klucz / wartość; „=” jest.

Pewnym skutkiem tej decyzji dotyczącej projektowania języka jest to, że być może będziesz musiał zrobić takie rzeczy

; ({a, b} = jakiś_obiekt);

Dodatkowe pareny zapobiegają analizowaniu lewego nawiasu klamrowego jako bloku, a wiodący średnik zapobiega analizowaniu paren jako wywołania funkcji do funkcji z poprzedniego wiersza.

Aby uzyskać więcej informacji, zobacz: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destruifying_assignment

Uwaga, kluczowe błędy podczas przypisywania destrukcji obiektów NIE są zgłaszane; po prostu otrzymujesz wartości „niezdefiniowane”, niezależnie od tego, czy jest to błąd klucza, czy inny błąd, który został po cichu propagowany jako „nieokreślony”.

> var {rsienstr: foo, q: bar} = {p:1, q:undefined};
undefined
> foo
undefined
> bar
undefined
>
Andrew Wagner
źródło