Destrukturyzacja w ES6

Destrukturyzować oznacza rozmontowywać strukturę czegoś. W JavaScript może to być tablica, obiekt lub ciąg znaków, w których są one dzielone indywidualnie, a następnie ponownie przypisywane do zmiennych.

Tablice destrukturyzujące

Przed ES6, gdybyś przypisywał wartości tablicy poszczególnym zmiennym, robiłoby to tak:

Ale potem pojawił się ES6. Zobaczmy, jak to się zmieniło w poniższym przykładzie:

Łatwo to zrozumieć. Zdestrukturyzowaliśmy wartości tablicy scores i utworzyliśmy zmienne, które dziedziczą elementy tablicy w kolejności, w jakiej zostały zdefiniowane. Niech x będzie pierwszą wartością tablicy wyników, która wynosi 500, niech y będzie drugą wartością, która wynosi 400 i to samo dla z.

Należy zauważyć, że [X, Y, Z] jest nie nową tablicę .

W przypadku, gdy destrukturyzujemy tablicę i tworzymy więcej zmiennych niż elementów tablicy, każda zmienna, która nie ma elementu do dziedziczenia, zwraca niezdefiniowane. Przykład poniżej:

Dodaliśmy nową zmienną „w”, ale ponieważ nie pozostał żaden element, który mógłby odziedziczyć po zdestrukturyzowanej tablicy, zwrócono ją jako niezdefiniowaną.

Wartość domyślną można przypisać do w, ponieważ nie ma już elementu do odziedziczenia, patrz przykład poniżej:

Pomijanie elementów w oryginalnej tablicy

W sytuacji, gdy chciałbyś pominąć kolejność dziedziczenia i przeskoczyć do innego elementu w tablicy, robi się to przez umieszczenie przecinka na pozycji elementu, który ma być pominięty w oryginalnej tablicy, z białymi spacjami między przecinkami. Spójrz:

Pominęliśmy pierwszy element w tablicy (500) i rozpoczęliśmy przypisywanie od drugiego elementu.

Korzystanie z parametru odpoczynku

Zakłada się, że znasz już parametry Rest i składnię Spread i wiesz, jak ich używać.

W powyższym przykładzie x jest przypisane do pierwszego elementu w tablicy, a „reszta” elementów jest przypisana do y przy użyciu składni parametru rest „…”, która zwraca tablicę zawierającą przypisane do niej elementy.

Destrukturyzacja obiektów

W powyższych przykładach destrukturyzowaliśmy tablice. Zobaczmy teraz, jak możemy destrukturyzować obiekty, zaczynając od przykładu:

Widać już różnice — nawiasy klamrowe i fakt, że podczas destrukturyzacji użyliśmy nazw obiektów jako nazw zmiennych; zmiana nazw zwróciłaby undefined, ale to nie znaczy, że jesteś zmuszony ich używać. Zobaczmy, jak możesz nadpisać nazwy obiektów:

Teraz przypisaliśmy nowe nazwy zmiennych, które zastąpią domyślne nazwy obiektów.

Struny destrukturyzujące

Tutaj ciąg „UI” jest oddzielnie oddzielany i przypisywany do tworzonych zmiennych. Ale co by było, gdybyśmy mieli więcej znaków, takich jak „UI jest ważny” w ciągu? Jaki byłby wynik? Dane wyjściowe pozostaną takie same, ponieważ destrukturyzacja ciągów nie jest wykonywana słowo po słowie, ale raczej znak po znaku, więc najpierw przypisywany jest znak „U”, a następnie „I”, nawet jeśli są one zgrupowane w ciągu.

To wystarczy w tym artykule. Mam nadzieję, że w tym momencie zrozumiałeś, jak działa destrukturyzacja i będzie Ci wygodnie używać ich w miarę postępów jako programista. Dziękuję za przeczytanie. Możesz także zasubskrybować, aby moje artykuły były wysyłane bezpośrednio na Twój e-mail. Udanego kodowania!