cum se utilizează destructurarea obiectelor în JavaScript

destructurarea obiectelor este o caracteristică JavaScript utilă pentru a extrage proprietăți din obiecte și a le lega la variabile.

ce este mai bine, destructurarea obiectelor poate extrage mai multe proprietăți într-o singură instrucțiune, poate accesa proprietăți din obiecte imbricate și poate seta o valoare implicită dacă proprietatea nu există.

în această postare, vă voi explica cum să utilizați destructurarea obiectelor în JavaScript.

1. Nevoia de destructurare a obiectelor

Imaginați-vă că doriți să extrageți unele proprietăți ale unui obiect. Într-un mediu pre-ES2015, va trebui să scrieți următorul cod:

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

valoarea proprietății hero.name este atribuită variabilei name. În același mod hero.realName valoarea este atribuită realName.

o astfel de modalitate de a accesa proprietățile și de a le atribui variabilelor necesită cod boilerplate. Scriind var name = hero.name, trebuie să menționați legarea name de 2 ori și același lucru pentru realName.

aici este utilă sintaxa de distrugere a obiectului: puteți citi o proprietate și atribui valoarea acesteia unei variabile fără a duplica numele proprietății. Mai mult decât atât, puteți citi mai multe proprietăți din același obiect într-o singură declarație!

să refactor scriptul de mai sus și se aplică destructuring obiect pentru a accesa proprietățile name și realName:

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

const { name, realName } = hero este un obiect destructuring misiune. Această instrucțiune definește variabilele name și realName, apoi le atribuie valorile proprietăților hero.name și hero.realName corespondigly.

Compararea celor 2 abordări pentru a accesa proprietățile obiectului:

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

este vizibil că destructurarea obiectului este mai la îndemână, deoarece nici numele proprietății, nici variabila obiectului nu sunt duplicate.

2. Extragerea unei proprietăți

sintaxa de bază a distrugerii obiectelor este destul de simplă:

const { identifier } = expression;

unde identifier este numele proprietății de accesat și expression ar trebui evaluat la un obiect. După destructurare, variabila identifier conține valoarea proprietății.

Iată codul echivalent folosind un accesoriu de proprietate:

const identifier = expression.identifier;

să încercăm destructurarea obiectului în practică:

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

instrucțiunea const { name } = hero definește variabila name și o inițializează cu valoarea proprietății hero.name.

3. Extragerea mai multor proprietăți

pentru a destructura obiectul în mai multe proprietăți, enumerați câte proprietăți doriți să adăugați virgule , între ele:

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

unde identifier1,…, identifierN sunt numele proprietăților de accesat și expression ar trebui evaluate la un obiect. După destructurare, variabilele identifier1,…, identifierN conțin valori de proprietăți corespunzătoare.

Iată codul echivalent:

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

să aruncăm o privire din nou la exemplul din prima secțiune, unde sunt extrase 2 Proprietăți:

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

const { name, realName } = hero creează 2 variabile name și realName atribuite cu valori ale proprietăților corespunzătoare hero.name și hero.realName.

4. Valori implicite

dacă obiectul destructurat nu are proprietatea specificată în atribuirea destructuring, atunci variabila este atribuită cu undefined. Să vedem cum se întâmplă:

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

după destructurare variabila enemies este undefined deoarece proprietatea enemiesnu există în obiectul hero.

din fericire, puteți seta o valoare implicită dacă proprietatea nu există în obiectul destructurat. Iată sintaxa de bază:

const { identifier = defaultValue } = expression;

unde identifier este numele proprietății de accesat și expression ar trebui evaluat la un obiect. După destructurare, variabila identifier conține valoarea proprietății sau este atribuită cu defaultValue dacă identifier proprietatea nu există.

Iată codul echivalent:

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

să schimbăm eșantionul de cod anterior și să folosim caracteristica valoare implicită:

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

acum, în loc să fie undefined, variabila enemiesimplicit la .

5. Aliasuri

dacă doriți să creați variabile cu nume diferite de proprietăți, atunci puteți utiliza caracteristica de aliasare a destructurării obiectelor.

const { identifier: aliasIdentifier } = expression;

identifier este numele proprietății de accesat, aliasIdentifier este numele variabilei și expression ar trebui să evalueze la un obiect. După destructurare, variabila aliasIdentifier conține valoarea proprietății.

codul echivalent:

const aliasIdentifier = expression.identifier;

Iată un exemplu de obiect destructuring caracteristică alias:

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

Privind la const { realName: secretName } = hero, destucturarea definește o nouă variabilă secretName(variabilă alias) și îi atribuie valoarea hero.realName.

6. Extragerea proprietăților din obiecte imbricate

în exemplele anterioare, obiectele erau simple: proprietățile au tipuri de date primitive (de exemplu, șiruri de caractere).

adesea obiectele pot fi imbricate în alte obiecte. Cu alte cuvinte, unele proprietăți pot conține obiecte.

în acest caz, puteți utiliza în continuare proprietățile de distrugere a obiectelor și de acces din adâncime. Iată sintaxa de bază:

const { nestedObjectProp: { identifier } } = expression;

nestedObjectProp este numele proprietății care deține un obiect imbricat. identifier este numele proprietății de accesat din obiectul imbricat. expression ar trebui să evalueze obiectul distrus.

după destructurare, variabila identifier conține valoarea proprietății obiectului imbricat.

sintaxa de mai sus este echivalentă cu:

const identifier = expression.nestedObjectProp.identifier;

nivelul de cuibărit din care puteți extrage proprietăți este nelimitat. Dacă doriți să extrageți proprietăți din adâncime, adăugați mai multe bretele ondulate imbricate:

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

de exemplu, obiectul hero conține un obiect imbricat { city: 'Gotham'}.

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

obiectul destructuring const { address: { city } } = hero vă permite să accesați proprietatea city din obiectul imbricat.

7. Extragerea unei proprietăți de nume dinamic

puteți extrage proprietățile variabilelor cu un nume dinamic (numele proprietății este cunoscut în timpul rulării):

const { : identifier } = expression;

propName expresia ar trebui să evalueze la un nume de proprietate (de obicei un șir), iar identifier ar trebui să indice numele variabilei creat după destructurare. Al doilea expression ar trebui să evalueze obiectul pe care doriți să destructure.

un cod echivalent fără distrugerea obiectelor:

const identifier = expression;

să ne uităm la un exemplu în care prop deține numele proprietății:

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

const { : name } = hero este un obiect destructuring care atribuie variabilei name valoarea hero, unde prop este o variabilă care deține numele proprietății.

8. Rest obiect după destructurare

sintaxa rest este utilă pentru a colecta proprietățile rămase după destructurare:

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

unde identifier este numele proprietății de accesat și expression ar trebui evaluat la un obiect.

după destructurare, variabila identifier conține valoarea proprietății. rest variabila este un obiect simplu cu proprietățile rămase.

de exemplu, să extragem proprietatea name , dar să păstrăm restul proprietăților:

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

destructurarea const { name, ...realHero } = hero extrage proprietatea name.

în același timp, proprietățile rămase (realName în acest caz) sunt colectate în variabila realHero: { realName: 'Bruce Wayne' }.

9. Cazuri de utilizare obișnuită

9.1 leagă proprietățile la variabile

după cum se vede în multe exemple înainte, destructurarea obiectului leagă valorile proprietății la variabile.

destructurarea obiectului poate atribui valori variabilelor declarate folosind const, let și var. Sau chiar atribuiți unei variabile deja existente.

de exemplu, iată cum să destructure folosind let declarație:

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

cum să destructure folosind var declarație:

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

și cum să se destructureze la o variabilă deja declarată:

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

mi se pare satisfăcător să combin ciclul for..of cu destructurarea obiectului pentru a extrage proprietatea imediat:

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

9.2 parametrul funcției destructuring

în general, destructurarea obiectului poate fi plasată oriunde se întâmplă o atribuire.

de exemplu, puteți distruge un obiect chiar în lista de parametri a unei funcții:

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

function({ name }) destructurează parametrul funcției, creând o variabilă name care deține valoarea proprietății name.

10. Rezumat

destructurarea obiectului este o caracteristică puternică care vă permite să extrageți proprietăți dintr-un obiect și să legați aceste valori de variabile.

îmi place mai ales despre destructuring obiect este sintaxa concis și capacitatea de a extrage mai multe variabile într-o singură declarație.

sperăm că postarea mea v-a ajutat să vedeți cât de utilă este destructurarea obiectelor!