Ponowne wprowadzenie do zadania destrukturyzacyjnego

Jeśli piszesz JavaScript, prawdopodobnie znasz ES2015 i wszystkie nowe standardy językowe, które zostały wprowadzone. Jednym z takich standardów, który zyskał niesamowitą popularność, jest przypisanie destrukturyzacyjne. Możliwość „zanurzenia się” w tablicę lub obiekt i bardziej bezpośredniego odwoływania się do czegoś w nim zawartego. Zwykle idzie mniej więcej tak.

 const response = { status: 200, data: {} } // instead of response.data we get... const {data} = response //now data references the data object directly const objectList = [ { key: 'value' }, { key: 'value' }, { key: 'value' } ] // instead of objectList[0], objectList[1], etc we get... const [obj, obj1, obj2] = objectList // now each object can be referenced directly

Jednak przypisanie destrukturyzujące jest tak potężną składnią, że wielu programistów, nawet tych, którzy używali go od czasu jego pierwszego wydania, zapomina o niektórych rzeczach, które może zrobić. W tym poście omówimy pięć rzeczywistych przykładów destrukturyzacji obiektów i tablic, czasami obu! I dla zabawy podam dziwny przykład, na który natknąłem się niedawno.

1. Destrukturyzacja zagnieżdżona

Możliwość dostępu do klucza najwyższego poziomu wewnątrz obiektu lub pierwszego elementu tablicy jest potężna, ale także nieco ograniczająca. Usuwa tylko jeden poziom złożoności i nadal otrzymujemy serię kropek lub [0] odniesień, aby uzyskać dostęp do tego, czego naprawdę szukamy.

Jak się okazuje, destrukturyzacja może wykraczać poza najwyższy poziom. Mogą być ku temu uzasadnione powody. Weźmy ten przykład odpowiedzi obiektu z żądania HTTP. Chcemy wyjść poza obiekt danych i uzyskać dostęp tylko do użytkownika. Dopóki znamy klucze, których szukamy, nie stanowi to problemu.

 const response = { status: 200, data: { user: { name: 'Rachel', title: 'Editor in Chief' }, account: {}, company: 'Smashing Magazine' } } const {data: {user}} = response // user is { name: 'Rachel', title: 'Editor in Chief'}

To samo można zrobić z zagnieżdżonymi tablicami. W takim przypadku nie musisz znać klucza, ponieważ go nie ma. To, co musisz wiedzieć, to pozycja tego, czego szukasz. Musisz podać zmienną referencyjną (lub symbol zastępczy przecinka) dla każdego elementu w górę i aż do tego, którego szukasz (przejdziemy do tego później). Zmienna może mieć dowolną nazwę, ponieważ nie próbuje dopasować wartości wewnątrz tablicy.

 const smashingContributors = [['rachel', ['writer', 'editor', 'reader']], ['laurie', ['writer', 'reader']]] const [[rachel, roles]] = smashingContributors // rachel is 'rachel' // roles is [ 'writer', 'editor', 'reader' ]

Należy pamiętać, że z tych funkcji należy korzystać rozsądnie, jak z każdym narzędziem. Rozpoznaj swój przypadek użycia i odbiorców swojej bazy kodu. Weź pod uwagę czytelność i łatwość zmian w przyszłości. Na przykład, jeśli chcesz uzyskać dostęp tylko do podtablicy, być może lepiej będzie pasować mapa.

2. Destrukturyzacja obiektów i tablic

Obiekty i tablice to wspólne struktury danych. Tak często, że jeden często pojawia się w drugim. Poza zagnieżdżoną destrukturyzacją możemy uzyskać dostęp do zagnieżdżonych właściwości, nawet jeśli są one w innym typie struktury danych niż zewnętrzna, do której uzyskujemy dostęp.

Weźmy ten przykład tablicy wewnątrz obiektu.

 const organization = { users: ['rachel', 'laurie', 'eric', 'suzanne'], name: 'Smashing Magazine', site: 'https://www.smashingmagazine.com/' } const {users:[rachel]} = organization // rachel is 'rachel'

Odwrotny przypadek użycia jest również prawidłowy. Tablica obiektów.

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name}] = users // name is 'rachel'

Jak się okazuje, w tym przykładzie mamy mały problem. Mamy dostęp tylko do nazwy pierwszego użytkownika; w przeciwnym razie spróbujemy użyć 'name', aby odwołać się do dwóch różnych ciągów, co jest nieprawidłowe. Nasz następny scenariusz destrukturyzacji powinien rozwiązać ten problem.

3. Aliasy

Jak widzieliśmy w powyższym przykładzie (kiedy mamy powtarzające się klawisze wewnątrz różnych obiektów, które chcemy wyciągnąć), nie możemy tego zrobić w „typowy” sposób. Nazwy zmiennych nie mogą się powtarzać w tym samym zakresie (to najprostszy sposób wyjaśnienia, to oczywiście bardziej skomplikowane).

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name: rachel}, {name: laurie}] = users // rachel is 'rachel' and laurie is 'laurie'

Aliasy mają zastosowanie tylko do obiektów. Dzieje się tak, ponieważ tablice mogą używać dowolnej nazwy zmiennej wybranej przez programistę, zamiast dopasowywać istniejący klucz obiektu.

4. Wartości domyślne

Destrukturyzacja często zakłada, że ​​wartość, do której się odwołuje, istnieje, ale co, jeśli tak nie jest? Zaśmiecanie kodu z niezdefiniowanymi wartościami nigdy nie jest przyjemne. Wtedy przydają się wartości domyślne.

Przyjrzyjmy się, jak działają z przedmiotami.

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name='Brian', role='publisher'} = user // name is Luke // role is publisher

Jeśli klucz, do którego się odwołuje, ma już wartość, wartość domyślna jest ignorowana. Jeśli klucz nie istnieje w obiekcie, używany jest klucz domyślny.

Możemy zrobić coś podobnego dla tablic.

 const roleCounts = [2] const [editors = 1, contributors = 100] = roleCounts // editors is 2 // contributors is 100

Podobnie jak w przykładzie obiektów, jeśli wartość istnieje, wartość domyślna jest ignorowana. Patrząc na powyższy przykład, możesz zauważyć, że destrukturyzujemy więcej elementów niż istnieje w tablicy. A co z destrukturyzacją mniejszej liczby elementów?

5. Ignorowanie wartości

Jedną z najlepszych części destrukturyzacji jest to, że umożliwia dostęp do wartości, które są częścią większej struktury danych. Obejmuje to wyizolowanie tych wartości i zignorowanie reszty treści, jeśli tak zdecydujesz.

Właściwie widzieliśmy wcześniej tego przykład, ale oddzielmy koncepcję, o której mówimy.

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name} = user // name is Luke

W tym przykładzie nigdy nie destrukturyzujemy organization i to jest w porządku. Wciąż jest dostępny do odniesienia wewnątrz obiektu user , tak jak powyżej.

 user.organization

W przypadku tablic istnieją właściwie dwa sposoby „ignorowania” elementów. W przykładzie obiektów odwołujemy się konkretnie do wartości wewnętrznych, używając powiązanej nazwy klucza. Gdy tablice są zdestrukturyzowane, nazwa zmiennej jest przypisywana przez pozycję. Zacznijmy od zignorowania elementów na końcu tablicy.

 const roleCounts = [2, 100, 100000] const [editors, contributors] = roleCounts // editors is 2 // contributors is 100

Destrukturyzujemy pierwszy i drugi element tablicy, a reszta jest nieistotna. Ale co z późniejszymi elementami? Jeśli jest oparty na pozycji, czy nie musimy destrukturyzować każdego elementu, aż trafimy na ten, który chcemy?

Jak się okazuje, nie. Zamiast tego używamy przecinków, aby zasugerować istnienie tych elementów, ale bez zmiennych referencyjnych są one ignorowane.

 const roleCounts = [2, 100, 100000] const [, contributors, readers] = roleCounts // contributors is 100 // readers is 100000

I możemy robić jedno i drugie w tym samym czasie. Pomijanie elementów w dowolnym miejscu za pomocą symbolu zastępczego przecinka. I znowu, tak jak w przykładzie obiektu, „ignorowane” elementy są nadal dostępne w tablicy roleCounts .

krzywy przykład

Siła i wszechstronność destrukturyzacji oznacza również, że możesz robić naprawdę dziwaczne rzeczy. Trudno powiedzieć, czy się przydadzą, ale warto wiedzieć, że jest to opcja!

Jednym z takich przykładów jest to, że możesz użyć destrukturyzacji, aby wykonać płytkie kopie.

 const obj = {key: 'value', arr: [1,2,3,4]} const {arr, arr: copy} = obj // arr and copy are both [1,2,3,4]

Inną rzeczą, do której można wykorzystać destrukturyzację, jest dereferencja.

 const obj = {node: {example: 'thing'}} const {node, node: {example}} = obj // node is { example: 'thing' } // example is 'thing'

Jak zawsze, czytelność ma ogromne znaczenie i wszystkie te przykłady powinny być używane w sądzie. Ale znajomość wszystkich opcji pomaga wybrać najlepszą.

Wniosek

JavaScript jest pełen złożonych obiektów i tablic. Niezależnie od tego, czy jest to odpowiedź na żądanie HTTP, czy statyczne zestawy danych, ważna jest możliwość wydajnego dostępu do osadzonej zawartości. Używanie przypisania destrukturyzującego to świetny sposób na zrobienie tego. Nie tylko obsługuje wiele poziomów zagnieżdżania, ale także umożliwia skoncentrowany dostęp i zapewnia wartości domyślne w przypadku niezdefiniowanych odwołań.

Nawet jeśli od lat korzystasz z destrukturyzacji, w specyfikacji kryje się tak wiele szczegółów. Mam nadzieję, że ten artykuł posłużył jako przypomnienie narzędzi, jakie daje ten język. Następnym razem, gdy będziesz pisać kod, może któryś z nich się przyda!