jak używać destrukcji obiektów w JavaScript

destrukcja obiektów jest użyteczną funkcją JavaScript do wyodrębniania właściwości z obiektów i wiązania ich ze zmiennymi.

co lepsze, destrukcja obiektów może wyodrębnić wiele właściwości w jednej instrukcji, może uzyskać dostęp do Właściwości z zagnieżdżonych obiektów i może ustawić wartość domyślną, jeśli właściwość nie istnieje.

w tym poście wyjaśnię, jak używać destrukcji obiektów w JavaScript.

1. Potrzeba destrukcji obiektów

wyobraź sobie, że chcesz wyodrębnić niektóre właściwości obiektu. W środowisku pre-ES2015 musisz napisać następujący kod:

var hero = { name: 'Batman', realName: 'Bruce Wayne'};var name = hero.name;var realName = hero.realName;name; // => 'Batman',realName; // => 'Bruce Wayne'

właściwość hero.name wartość jest przypisana do zmiennej name. W ten sam sposób wartość hero.realName jest przypisana do realName.

taki sposób dostępu do właściwości i przypisania ich do zmiennych wymaga kodu boilerplate. Pisząc var name = hero.name, musisz wspomnieć o wiązaniu name 2 razy i to samo dla realName.

tutaj przydatna jest składnia destrukcji obiektu: można odczytać właściwość i przypisać jej wartość do zmiennej bez powielania nazwy właściwości. Co więcej, możesz odczytać wiele właściwości tego samego obiektu w jednym poleceniu!

refaktorujmy powyższy skrypt i zastosujmy destrukcję obiektu, aby uzyskać dostęp do właściwości name i realName:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, realName } = hero;name; // => 'Batman',realName; // => 'Bruce Wayne'

const { name, realName } = hero to zadanie destrukcji obiektu. Polecenie To definiuje zmienne name i realName, a następnie przypisuje im odpowiednio wartości właściwości hero.name i hero.realName.

porównanie 2 metod dostępu do Właściwości obiektu:

const name = hero.name;const realName = hero.realName;// is equivalent to:const { name, realName } = hero;

widać, że destrukcja obiektu jest bardziej przydatna, ponieważ ani nazwy właściwości, ani zmienna obiektu nie są duplikowane.

2. Wyodrębnianie właściwości

podstawowa składnia destrukcji obiektów jest dość prosta:

const { identifier } = expression;

gdzie identifier jest nazwą właściwości, do której należy uzyskać dostęp, a expression należy obliczyć obiekt. Po destrukcji zmienna identifier zawiera właściwość value.

oto równoważny kod wykorzystujący akcesor właściwości:

const identifier = expression.identifier;

spróbujmy destrukcji obiektu w praktyce:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name } = hero;name; // => 'Batman'

polecenie const { name } = hero definiuje zmienną name i inicjalizuje ją wartością właściwości hero.name.

3. Wyodrębnianie wielu właściwości

aby zniszczyć obiekt na wiele właściwości, wylicz tyle właściwości, ile chcesz, dodając przecinki , pomiędzy:

const { identifier1, identifier2, ..., identifierN } = expression;

gdzie identifier1,…, identifierN są nazwami właściwości, do których należy uzyskać dostęp, a expression należy obliczyć dla obiektu. Po destrukcji zmienne identifier1,…, identifierN zawierają odpowiednie wartości właściwości.

oto odpowiednik kodu:

const identifier1 = expression.identifier1;const identifier2 = expression.identifier2;// ...const identifierN = expression.identifierN;

spójrzmy jeszcze raz na przykład z pierwszej sekcji, w której wyodrębniane są 2 właściwości:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, realName } = hero;name; // => 'Batman',realName; // => 'Bruce Wayne'

const { name, realName } = hero wytworzy 2 zmienne name i realName przypisane wartościom odpowiednich właściwości hero.namei hero.realName.

4. Wartości domyślne

jeżeli zniszczony obiekt nie posiada właściwości określonej w przypisaniu destrukcji, wtedy zmienna jest przypisana do wartości undefined. Zobaczmy, jak to się stanie:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies } = hero;enemies; // => undefined

po zniszczeniu zmiennej enemies jest undefined, ponieważ właściwość enemiesnie istnieje w obiekcie hero.

na szczęście można ustawić wartość domyślną, jeśli właściwość nie istnieje w zniszczonym obiekcie. Oto podstawowa składnia:

const { identifier = defaultValue } = expression;

gdzie identifier jest nazwą właściwości, do której należy uzyskać dostęp, a expression należy obliczyć obiekt. Po destrukcji zmienna identifier zawiera wartość właściwości lub jest przypisana do właściwości defaultValue, jeśli właściwość identifier nie istnieje.

oto odpowiednik kodu:

const identifier = expression.identifier === undefined ? defaultValue : expression.identifier;

zmieńmy poprzedni przykład kodu i użyjmy funkcji wartość domyślna:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies = } = hero;enemies; // => 

teraz, zamiast undefined, zmienna enemies domyślnie ma wartość .

5. Aliasy

jeśli chcesz tworzyć zmienne o innych nazwach niż właściwości, możesz użyć funkcji aliasingu destrukcji obiektów.

const { identifier: aliasIdentifier } = expression;

identifier jest nazwą właściwości do uzyskania dostępu, aliasIdentifier jest nazwą zmiennej, a expression powinna zostać obliczona na obiekt. Po destrukcji zmienna aliasIdentifier zawiera właściwość value.

odpowiednik kodu:

const aliasIdentifier = expression.identifier;

oto przykład funkcji niszczenia obiektów alias:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { realName: secretName } = hero;secretName; // => 'Bruce Wayne'

patrząc na const { realName: secretName } = hero, destucting definiuje nową zmienną secretName(alias variable) i przypisuje jej wartość hero.realName.

6. Wyodrębnianie właściwości z zagnieżdżonych obiektów

w poprzednich przykładach obiekty były proste: właściwości mają prymitywne typy danych (np. ciągi znaków).

często obiekty mogą być zagnieżdżane w innych obiektach. Innymi słowy, niektóre właściwości mogą zawierać obiekty.

w takim przypadku nadal możesz użyć właściwości destrukcji obiektów i uzyskać dostęp do nich z poziomu deep. Oto podstawowa składnia:

const { nestedObjectProp: { identifier } } = expression;

nestedObjectProp jest nazwą właściwości przechowującej zagnieżdżony obiekt. identifier jest nazwą właściwości, do której można uzyskać dostęp z zagnieżdżonego obiektu. expression należy ocenić do zniszczonego obiektu.

po destrukcji zmienna identifier zawiera właściwość value zagnieżdżonego obiektu.

powyższa składnia jest równoważna:

const identifier = expression.nestedObjectProp.identifier;

poziom zagnieżdżenia, z którego można wyodrębnić właściwości, jest nieograniczony. Jeśli chcesz wyodrębnić właściwości z głębokiego, po prostu dodaj więcej zagnieżdżonych klamer:

const { propA: { propB: { propC: { .... } } } } = object;

na przykład obiekt hero zawiera zagnieżdżony obiekt { city: 'Gotham'}.

const hero = { name: 'Batman', realName: 'Bruce Wayne', address: { city: 'Gotham' }};// Object destructuring:const { address: { city } } = hero;city; // => 'Gotham'

destrukcja obiektu const { address: { city } } = hero pozwala uzyskać dostęp do właściwości city z zagnieżdżonego obiektu.

7. Wyodrębnianie właściwości dynamicznej nazwy

można wyodrębnić do zmiennych właściwości o dynamicznej nazwie (nazwa właściwości jest znana w czasie wykonywania):

const { : identifier } = expression;

propName wyrażenie powinno zostać ocenione jako nazwa właściwości (zwykle jako łańcuch znaków), a identifier powinna wskazywać nazwę zmiennej utworzoną po destrukcji. Drugi expression powinien ocenić obiekt, który chcesz zniszczyć.

równoważny kod bez niszczenia obiektu:

const identifier = expression;

spójrzmy na przykład, gdzie prop zawiera nazwę właściwości:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const prop = 'name';const { : name } = hero;name; // => 'Batman'

const { : name } = hero jest destrukcją obiektu, który przypisuje zmiennej name wartość hero, gdzie prop jest zmienną posiadającą nazwę właściwości.

8. Rest obiekt po destrukcji

składnia rest jest przydatna do zbierania pozostałych właściwości po destrukcji:

const { identifier, ...rest } = expression;

gdzie identifier jest nazwą właściwości, do której należy uzyskać dostęp, a expression należy obliczyć obiekt.

po destrukcji zmienna identifier zawiera wartość właściwości. rest zmienna jest zwykłym obiektem z pozostałymi właściwościami.

na przykład wyodrębnijmy właściwość name, ale zachowajmy resztę właściwości:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, ...realHero } = hero;realHero; // => { realName: 'Bruce Wayne' }

destrukcja const { name, ...realHero } = hero wydobywa nieruchomość name.

jednocześnie pozostałe właściwości (w tym przypadkurealName) są zbierane do zmiennej realHero: { realName: 'Bruce Wayne' }.

9. Typowe przypadki użycia

9.1 Wiązanie właściwości do zmiennych

jak widać w wielu wcześniejszych przykładach, destrukcja obiektu wiąże wartości właściwości do zmiennych.

destrukcja obiektu może przypisać wartości do zmiennych zadeklarowanych za pomocą const, let i var. Lub nawet przypisać do już istniejącej zmiennej.

na przykład, oto jak zniszczyć za pomocą instrukcji let :

// letconst hero = { name: 'Batman',};let { name } = hero;name; // => 'Batman'

jak zniszczyć używając polecenia var :

// varconst hero = { name: 'Batman',};var { name } = hero;name; // => 'Batman'

i jak zniszczyć już zadeklarowaną zmienną:

// existing variablelet name;const hero = { name: 'Batman',};({ name } = hero);name; // => 'Batman'

uważam za satysfakcjonujące połączenie cyklu for..of z destrukcją obiektu, aby od razu wyodrębnić właściwość:

const heroes = ;for (const { name } of heroes) { console.log(name); // logs 'Batman', 'Joker'}

9.2 destrukcja parametru funkcji

ogólnie rzecz biorąc, destrukcja obiektu może być umieszczona w dowolnym miejscu, w którym ma miejsce przypisanie.

na przykład, możesz zniszczyć obiekt bezpośrednio wewnątrz listy parametrów funkcji:

const heroes = ;const names = heroes.map( function({ name }) { return name; });names; // => 

function({ name }) niszczy parametr funkcji, Tworząc zmienną name posiadającą wartość właściwości name.

10. Podsumowanie

niszczenie obiektów to potężna funkcja, która pozwala wyodrębnić właściwości z obiektu i powiązać te wartości ze zmiennymi.

szczególnie podoba mi się w destrukcji obiektów zwięzła składnia i możliwość wyodrębnienia wielu zmiennych w jednej instrukcji.

mam nadzieję, że mój post pomógł Ci zobaczyć, jak przydatne jest niszczenie obiektów!