Usuwanie właściwości obiektów za pomocą destrukturyzacji

W tym wpisie dowiesz się, jak usunąć właściwości z obiektu w JavaScript za pomocą destrukturyzacji i składni ...rest .

Ten nowy sposób na usuwanie właściwości obiektu (poprzez wyłączenie ich z nowego obiektu) daje nam czystszy sposób pisania JavaScript, z mniejszą ilością kodu i lepszą czytelnością – jak również jest to niezmienna operacja.

Przed destrukturyzacją, typowo używalibyśmy słowa kluczowego delete aby usunąć właściwości z obiektu. Problem z delete jest taki, że jest to operacja mutowalna, fizycznie zmieniająca obiekt i potencjalnie powodująca niepożądane efekty uboczne z powodu sposobu, w jaki JavaScript obsługuje referencje do obiektów.

Używając destrukturyzacji obiektów, w połączeniu z operatorem reszty ...rest, mamy czyste podejście typu one-liner.

Czym jest destrukturyzacja obiektów?

Object destructuring pozwala nam tworzyć zmienne z nazw właściwości obiektu, a zmienna będzie zawierała wartość nazwy właściwości – na przykład:

const data = { a: 1, b: 2, c: 3 };const { a, b, c } = data;console.log(a, b, c); // 1, 2, 3

Używając const { a, b, c } = data deklarujemy 3 nowe zmienne (ab oraz c).

If ab i c istnieją jako nazwy właściwości na data, wtedy zostaną utworzone zmienne zawierające wartości właściwości obiektu. Jeśli nazwy właściwości nie istnieją, otrzymasz undefined.

…rest w Object destructuring

Najpierw pojawiły się parametry rest, potem pojawiły się właściwości rest!

Dodane w ECMAScript 2015, a teraz na etapie 4 – są tutaj, aby pozostać i używać dzisiaj.

Mając to na uwadze, w jaki sposób ...rest pomaga nam usunąć właściwość z obiektu poprzez destrukturyzację?

Jako dodatkowy bonus, wyślemy Ci również kilka dodatkowych smakołyków przez kilka dodatkowych e-maili.

Weźmy nasz wcześniejszy przykład i użyjmy składni ...rest, aby zobaczyć, co się stanie:

const data = { a: 1, b: 2, c: 3 };const { a, ...rest } = data;console.log(a); // 1console.log(rest); // { b: 2, c: 3 }

Użycie ...rest tutaj (i możesz nazwać rest cokolwiek chcesz) daje nam wszystko, co pozostało, urmm „resztę” właściwości, jeśli chcesz.

Więc, czy nie nauczyliśmy się właśnie, jak usunąć właściwość z obiektu? Nie widzę już a: 1 wewnątrz rest – została usunięta!

Technicznie rzecz biorąc, została wykluczona, a nie fizycznie „usunięta” z obiektu – i jest zgodna z niezmiennym wzorcem pisania JavaScript i zarządzania stanem (stan to nasz data).

Oto jak zrobilibyśmy to bez destrukturyzacji obiektu lub składni reszty, jest to o wiele bardziej żmudne i nie pozwala nam dynamicznie uzyskać wszystkich pozostałych właściwości:

const data = { a: 1, b: 2, c: 3 };const a = data.a;const rest = { b: data.b, c: data.c };console.log(a); // 1console.log(rest); // { b: 2, c: 3 }

Dynamiczne usuwanie właściwości według klucza

Powiedzmy, że mamy klucz, który być może dostarczył użytkownik, który chce usunąć. Do tego celu użyjemy b. Jak usuniemy ten konkretny element? Wszystkie przykłady do tej pory były wartościami zakodowanymi na sztywno.

Załóżmy, że mamy 'b' jako wartość gdzieś, możemy dynamicznie przekazać ją do naszej składni destrukcji używając nawiasów kwadratowych , tak jak w przypadku object lookup (zamiast tego tworzy nową zmienną na podstawie dynamicznie przekazanej wartości):

const data = { a: 1, b: 2, c: 3 };const removeProp = 'b';const { : remove } = data;console.log(remove); // 2

To prawda, ponieważ dynamicznie konstruujemy nową zmienną, musimy użyć : remove, aby nadać jej nową nazwę. W przeciwnym razie, jak się do niej odwołamy? Nie możemy odwołać się do więc musimy o tym pamiętać.

Jednakże, w tym momencie możemy ponownie wprowadzić składnię reszty, aby usunąć właściwość z obiektu:

const data = { a: 1, b: 2, c: 3 };const removeProp = 'b';const { : remove, ...rest } = data;console.log(remove); // 2console.log(rest); // { a: 1, c: 3 }

Masz to, udało nam się usunąć właściwość dynamicznie w JavaScript używając destrukcji obiektu i składni reszty!

Sprawdź przykład na żywo w StackBlitz, pobaw się nim i poczuj się komfortowo:

Podsumowanie

Przebyliśmy długą drogę! Ta technika pomaga nam uniknąć mutowalnych operacji i słowa kluczowego delete, dając nam niezmienny wzorzec do usuwania właściwości z obiektów w JavaScript.

Użyliśmy destrukcji obiektów i spojrzeliśmy na to, jak połączyć ją ze składnią reszty, aby dać nam czyste rozwiązanie do usuwania właściwości obiektów.

🏆 Sprawdź moje kursy JavaScript, aby w pełni poznać głębokie podstawy języka, zaawansowane wzorce, funkcjonalne i obiektowe paradygmaty programowania oraz wszystko, co związane z DOM. Obowiązkowa seria kursów dla każdego poważnego programisty JavaScript.

Szczęśliwego kodowania!

P.S. Ten wpis na blogu został wywołany przez zgrabną dyskusję na Twitterze, którą odbyłem z Mauricio Correa! Jest on niesamowitym facetem i deweloperem z Brazylii.

🎉 Pobierz za darmo!

Gotowy, aby wyjść poza ForEach? Nabierz pewności siebie dzięki zaawansowanym metodom – Reduce, Find, Filter, Every, Some i Map.

• W pełni zrozum, jak zarządzać strukturami danych JavaScript z niezmiennymi operacjami
• 31 stron składni deep-dive, real-world examples, tips and tricks
• Napisz czystszą i lepiej ustrukturyzowaną logikę programowania w ciągu 3 godzin

✅ Sukces! Sprawdź swój e-mail, ciesz się.

Jako dodatkowy bonus, wyślemy Ci również kilka dodatkowych smakołyków przez kilka dodatkowych e-maili.