Współczesny JavaScript ma wiele nowych funkcji, które ułatwiają pisanie kodu w prosty i uporządkowany sposób. Jedną z przydatnych nowoczesnych funkcji dostępnych w ES6+ jest destrukturyzacja tablic i obiektów.
Frameworki JavaScript, takie jak React.js i Angular, zachęcają do korzystania z tej techniki. Dlatego bardzo ważne jest, aby zrozumieć, na czym polega destrukturyzacja i jak jej używać podczas pisania kodu.
Czym jest destrukturyzacja obiektów i tablic w JavaScript?
Destrukturyzacja w JavaScript odnosi się do procesu rozpakowywania wartości z tablicy lub obiektu. Zapewnia bardziej zwięzły sposób uzyskiwania wartości z tablic lub obiektów bez ciężkiego dźwigania, gdy interesują Cię pojedyncze elementy tablicy lub wartości w obiekcie.
Jest to również przydatne podczas przetwarzania zwracanych wartości ze złożonej funkcji lub wyrażenia. Ta koncepcja jest jedną z
najlepsze praktyki, których należy przestrzegać podczas pisania kodu React.Jak niszczyć tablice
Oto przykładowy kod, aby uzyskać poczucie destrukturyzacji tablicy:
konst arr = [1, 2];
konst [a, b] = arr;
konsola.log (a) // drukuje 1 na konsoli
konsola.log (b) // drukuje 2 na konsoli
Ten kod używa destrukturyzacji do przypisania wartości z arr—1 i 2 — do zmiennych A I Bodpowiednio. Jest to podstawowa koncepcja destrukturyzacji. Po prawej stronie masz tablicę lub obiekt, a po lewej stronie rozpakowujesz elementy i przypisujesz je do poszczególnych zmiennych.
Pod maską JavaScript kopiuje wartości z arr i przypisuje je do zmiennych po lewej stronie w następujący sposób:
konst arr = [1,2];
konst a = arr [0];
konst b = arr[1];
Jak widać, destrukturyzacja jest bardziej zwięzłym sposobem na zrobienie tego, w przeciwieństwie do używania notacji obiektowej lub nawiasowej. Jednak ta składnia będzie prawdopodobnie przydatna podczas pracy ze złożonymi tablicami lub funkcjami, które zwracają tablice lub łańcuchy.
Sprawdź przykładowy kod poniżej:
konst [dzień, miesiąc, data, rok, godzina, strefa czasowa] = Data().podział(' ')
// Wywołanie Date() zwraca aktualną datę w formacie:
// Pon. 20.02.2023 13:07:29 GMT+0000
konsola.log (dzień) // drukuje pon
konsola.log (miesiąc) // drukuje lut
konsola.log (data) // drukuje 20
W tym przykładzie kodu tworzymy nowy ciąg z bieżącą datą, wywołując Data(). Dalej używamy podział(), A Metoda łańcuchowa JavaScript, aby oddzielić elementy w łańcuchu, używając spacji jako separatora. podział(' ') zwraca tablicę, a my używamy destrukturyzacji, aby przypisać wartości do poszczególnych zmiennych.
Pamiętaj, że jeśli tablica zawiera więcej elementów niż rozpakowujesz, JavaScript zignoruje dodatkowe elementy.
konst arr = [1, 2, 3, 4];
konst [a, b] = arr;
konsola.log (a) // drukuje 1
konsola.log (b) // drukuje 2
// wartości 3 i 4 nie są przypisane do żadnej zmiennej; są ignorowane
W takim przypadku, jeśli chcesz przechowywać pozostałe elementy w zmiennej, użyj parametru rest w następujący sposób:
konst arr = [1, 2, 3, 4];
konst [a, b, ...reszta] = arr;
konsola.log (reszta) // drukuje [3,4]
Czasami możesz nie dbać o konkretny przedmiot. Wzorzec destrukturyzacji JavaScriptu umożliwia również pominięcie pewnych elementów za pomocą pustego przecinka.
konst arr = [1, 2, 3, 4];
konst [a,, c] = arr;
konsola.log (c) // drukuje 3
Powyższy kod używa pustej przestrzeni do ignorowania wartości 2 w tablicy arr. Zamiast przypisywać wartość 2 do zmiennego C, przechodzi do następnego elementu w tablicy. Ignoruje również czwartą wartość, ponieważ nie określa zmiennej, w której ma być przechowywana.
W przeciwieństwie do tego, jeśli potrzebujesz mniej przedmiotów niż rozpakowujesz, proces przypisze nieokreślony wartość do tych dodatkowych zmiennych.
konst arr = [1];
konst [a, b] = arr;
konsola.log (a) // drukuje 1
konsola.log (b) // drukuje niezdefiniowane
Aby zapobiec niezdefiniowaniu zmiennych, możesz ustawić wartości domyślne, jeśli nie masz pewności co do długości tablicy w następujący sposób (przypisanie wartości domyślnych nie jest wymagane):
konst arr = [1];
konst [a = '10', b = „nie podano”] = arr;
konsola.log (a) // drukuje 1
konsola.log (b) // drukuje „nie podano”
Ta destrukturyzacja przypisuje wartość 1 do zmiennego A, nadpisując jego wartość domyślną. Zmienny B zachowuje wartość domyślną, ponieważ nie podano wartości.
Jak niszczyć obiekty
Destrukturyzacja obiektów nie różni się tak bardzo od tablic. Jedyna różnica polega na tym, że tablice są iterowalne, a obiekty nie, co powoduje nieco inny sposób działania.
Podczas pracy z obiektami zmienne po lewej stronie operatora przypisania są również inicjowane jak obiekty:
konst osoba = {nazwa: „Alvin”, wiek: 10, wysokość: 1};
konst {imię, wiek, wzrost} = osoba;
konsola.log (nazwa) // drukuje 'Alvin'
konsola.log (wysokość) // drukuje 1
Z kodu używamy nazw właściwości z pliku osoba obiekt. Jednak nie musisz używać dokładnych nazw właściwości w obiekcie. Możesz zniszczyć i przechowywać wartości w różnych nazwach zmiennych w następujący sposób:
konst osoba = {nazwa: „Alvin”, wiek: 10, wysokość: 1};
konst {nazwa: imię, wiek: lata, wysokość: bieżąca wysokość} = osoba;
konsola.log (imię) // drukuje 'Alvin'
konsola.log (bieżąca wysokość) // drukuje 1
Zaczynasz od określenia wartości właściwości, którą chcesz zniszczyć, a następnie określasz nazwę zmiennej, której użyjesz do przechowywania wartości po dwukropku. I podobnie jak tablice, destrukturyzacja nazwy właściwości, która nie istnieje, będzie nieokreślony.
Aby sobie z tym poradzić, możesz w podobny sposób określić wartości domyślne na wypadek, gdyby nazwa właściwości, którą chcesz przypisać zmiennej, była niedostępna:
konst osoba = {nazwa: „Alvin”, wiek: 10, wysokość: 1};
konst {imię, wiek, wzrost, lokalizacja ='Na całym świecie'} = osoba;
konsola.log (nazwa) // drukuje 'Alvin'
konsola.log (lokalizacja) // drukuje „Na całym świecie”
Kolejność zmiennych po lewej stronie nie ma znaczenia w przypadku obiektu, ponieważ obiekty przechowują wartości w parach klucz-wartość. W związku z tym poniższy kod da takie same wyniki:
konst osoba = {nazwa: „Alvin”, wiek: 10, wysokość: 1};
konst {wiek, wzrost, imię} = osoba;
konsola.log (nazwa) // drukuje 'Alvin'
konsola.log (wysokość) // drukuje 1
Wreszcie, podobnie jak w przypadku tablic, możesz również użyć parametru rest do zniszczenia kilku wartości w jednej zmiennej w następujący sposób:
konst osoba = {nazwa: „Alvin”, wiek: 10, wysokość: 1};
konst {imię, ...odpoczynek} = osoba;
konsola.log (nazwa) // drukuje 'Alvin'
konsola.log (reszta) // drukuje {wiek: 10, wzrost: 1}
Zwróć tylko uwagę, że parametr rest musi być zawsze ostatni. W przeciwnym razie JavaScript zgłosi wyjątek.
Popraw jakość swojego kodu dzięki destrukturyzacji JavaScript
Nowoczesne funkcje Javascript, takie jak destrukturyzacja, umożliwiają pisanie bardzo czytelnego kodu. Używając destrukturyzacji, możesz szybko rozpakować wartości z tablic i obiektów. Destrukturyzacja może się też przydać w innych sytuacjach, na przykład podczas zamiany wartości dwóch zmiennych. Mamy nadzieję, że teraz rozumiesz, co oznacza destrukturyzacja w JavaScript i możesz jej używać podczas pisania kodu.