Niszczenie obiektów JavaScript

Podsumowanie: w tym samouczku dowiesz się o niszczeniu obiektów JavaScript, które przypisuje właściwości obiektu poszczególnym zmiennym.

jeśli chcesz dowiedzieć się, jak niszczyć tablicę, możesz sprawdzić samouczek destrukcji tablicy.

Wprowadzenie do przypisania destrukcji obiektów JavaScript

Załóżmy, że masz obiekt person o dwóch właściwościach: firstName i lastName.

Code language: JavaScript (javascript)

przed ES6, gdy chcesz przypisać właściwości obiektu person do zmiennych, zwykle robisz to w ten sposób:

Code language: JavaScript (javascript)

ES6 wprowadza składnię destrukcji obiektów, która zapewnia alternatywny sposób przypisywania właściwości obiektu do zmiennych:

Code language: JavaScript (javascript)

w tym przykładzie właściwości firstName i lastName są przypisane odpowiednio do zmiennych fName i lName.

w tej składni:

Code language: JavaScript (javascript)

identyfikator przed dwukropkiem (:) jest właściwością obiektu, a identyfikator po dwukropku jest zmienną.

zauważ, że nazwa właściwości jest zawsze po lewej stronie, niezależnie od tego, czy jest to literal obiektu, czy składnia destrukcji obiektu.

jeśli zmienne mają takie same nazwy jak właściwości obiektu, możesz uczynić kod bardziej zwięzłym w następujący sposób:

Code language: JavaScript (javascript)

w tym przykładzie zadeklarowaliśmy dwie zmienne firstName i lastName i przypisaliśmy właściwości obiektu person do zmiennych w tej samej instrukcji.

istnieje możliwość oddzielenia deklaracji od cesji. Należy jednak umieścić zmienne w nawiasach:

jeśli nie użyjesz nawiasów, silnik JavaScript zinterpretuje lewą stronę jako blok i wyrzuci błąd składni.

kiedy przypisujesz do zmiennej właściwość, która nie istnieje przy użyciu destrukcji obiektu, zmienna jest ustawiana na undefined. Na przykład:

Code language: JavaScript (javascript)

w tym przykładzie właściwość middleName nie istnieje w obiekcie person, dlatego zmienna middleName to undefined.

Ustawianie wartości domyślnych

możesz przypisać wartość domyślną do zmiennej, gdy właściwość obiektu nie istnieje. Na przykład:

Code language: JavaScript (javascript)

w tym przykładzie przypisaliśmy pusty łańcuch do zmiennej middleName, gdy obiekt person nie posiada właściwości middleName.

ponadto przypisujemy właściwość currentAge do zmiennej age o domyślnej wartości 18.

jednak gdy obiekt person posiada właściwość middleName, przypisanie działa jak zwykle:

Code language: JavaScript (javascript)

destrukcja obiektu null

funkcja może zwrócić obiekt lub null w niektórych sytuacjach. Na przykład:

Code language: JavaScript (javascript)

i używasz zadania destrukcji obiektów:

Code language: JavaScript (javascript)

Kod wyrzuci TypeError:

Code language: JavaScript (javascript)

aby tego uniknąć, można użyć operatora OR (||), aby przywrócić obiekt null do pustego obiektu:

Code language: JavaScript (javascript)

teraz nie wystąpi żaden błąd. A firstName i lastName będzie undefined.

niszczenie zagnieżdżonego obiektu

zakładając, że masz obiekt employee, który ma obiekt name jako właściwość:

Code language: JavaScript (javascript)

poniższe polecenie niszczy właściwości zagnieżdżonego obiektu name do poszczególnych zmiennych:

Code language: JavaScript (javascript)

możliwe jest wielokrotne przypisanie właściwości do wielu zmiennych:

Code language: JavaScript (javascript)

destrukcyjne argumenty funkcji

Załóżmy, że masz funkcję, która wyświetla obiekt person:

Code language: JavaScript (javascript)

możliwe jest zniszczenie argumentu obiektu przekazanego do funkcji w następujący sposób:

Code language: JavaScript (javascript)

wygląda mniej gadatliwie, zwłaszcza gdy używa się wielu właściwości obiektu argumentu. Technika ta jest często stosowana w Reakcie.

Summary

• destructuring obiektów domyślnie przypisuje właściwości obiektu do zmiennych o tych samych nazwach.