O reintroducere în sarcina de destructurare

Dacă scrieți JavaScript, probabil că sunteți familiarizat cu ES2015 și cu toate standardele de limbă noi care au fost introduse. Un astfel de standard care a cunoscut o popularitate incredibilă este misiunea de destructurare. Abilitatea de a „cufunda” într-o matrice sau obiect și de a face referire la ceva în interiorul acestuia mai direct. De obicei merge cam așa.

 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

Cu toate acestea, atribuirea de destructurare este o sintaxă atât de puternică încât mulți dezvoltatori, chiar și cei care o folosesc de când a fost lansată pentru prima dată, uită unele dintre lucrurile pe care le poate face. În această postare, vom trece prin cinci exemple din lumea reală atât pentru destructurarea obiectelor, cât și a matricei, uneori ambele! Și doar pentru a vă distra, voi include un exemplu neplăcut pe care l-am întâlnit chiar zilele trecute.

1. Destructurare imbricată

A putea accesa o cheie de nivel superior în interiorul unui obiect sau primul element al unui tablou este puternic, dar este și oarecum limitativ. Îndepărtează doar un nivel de complexitate și ajungem în continuare cu o serie de puncte sau [0] referințe pentru a accesa ceea ce căutăm cu adevărat.

După cum se dovedește, destructurarea poate funcționa dincolo de nivelul superior. Și pot exista motive întemeiate pentru a face acest lucru. Luați acest exemplu de răspuns la obiect dintr-o solicitare HTTP. Dorim să depășim obiectul de date și să accesăm doar utilizatorul. Atâta timp cât știm cheile pe care le căutăm, asta nu este o problemă.

 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'}

Același lucru se poate face cu matrice imbricate. În acest caz, nu trebuie să cunoașteți cheia, deoarece nu există. Ceea ce trebuie să știi este poziția a ceea ce cauți. Va trebui să furnizați o variabilă de referință (sau un substituent de virgulă) pentru fiecare element în sus și până la cel pe care îl căutați (vom ajunge la asta mai târziu). Variabila poate fi numită orice, deoarece nu încearcă să se potrivească cu o valoare în interiorul matricei.

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

Rețineți că aceste caracteristici ar trebui utilizate în mod judicios, ca în cazul oricărui instrument. Recunoașteți cazul dvs. de utilizare și publicul bazei de cod. Luați în considerare lizibilitatea și ușurința schimbării pe drum. De exemplu, dacă doriți să accesați doar un subbary, poate că o hartă s-ar potrivi mai bine.

2. Destructurarea obiectelor și a matricei

Obiectele și matricele sunt structuri de date comune. Atât de comun, de fapt, încât unul apare adesea în interiorul celuilalt. Dincolo de destructurarea imbricată, putem accesa proprietăți imbricate chiar dacă acestea se află într-un alt tip de structură de date decât cea externă pe care o accesăm.

Luați acest exemplu de matrice în interiorul unui obiect.

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

Este valabil și cazul de utilizare opus. O serie de obiecte.

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

După cum se dovedește, avem o mică problemă în acest exemplu. Putem accesa doar numele primului utilizator; în caz contrar, vom încerca să folosim „nume” pentru a face referire la două șiruri de caractere diferite, ceea ce este invalid. Următorul nostru scenariu de destructurare ar trebui să rezolve asta.

3. Aliasuri

După cum am văzut în exemplul de mai sus (când avem chei repetate în interiorul diferitelor obiecte pe care vrem să le scoatem), nu putem face acest lucru în modul „tipic”. Numele de variabile nu se pot repeta în același domeniu (acesta este cel mai simplu mod de a o explica, este evident mai complicat decât atât).

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

Aliasarea este aplicabilă numai obiectelor. Acest lucru se datorează faptului că matricele pot folosi orice nume de variabilă pe care dezvoltatorul îl alege, în loc să fie nevoie să se potrivească cu o cheie de obiect existentă.

4. Valori implicite

Destructurarea presupune adesea că valoarea la care face referire este acolo, dar ce se întâmplă dacă nu este? Nu este niciodată plăcut să aruncați coduri cu valori nedefinite. Atunci valorile implicite sunt utile.

Să vedem cum funcționează pentru obiecte.

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

Dacă cheia referită are deja o valoare, valoarea implicită este ignorată. Dacă cheia nu există în obiect, atunci se utilizează implicit.

Putem face ceva similar pentru matrice.

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

Ca și în exemplul obiectelor, dacă valoarea există, atunci valoarea implicită este ignorată. Privind exemplul de mai sus, puteți observa că destructuram mai multe elemente decât există în matrice. Ce zici de destructurarea mai puține elemente?

5. Ignorarea Valorilor

Una dintre cele mai bune părți ale destructurarii este că vă permite să accesați valori care fac parte dintr-o structură de date mai mare. Aceasta include izolarea acelor valori și ignorarea restului conținutului, dacă doriți.

De fapt, am văzut un exemplu în acest sens mai devreme, dar să izolăm conceptul despre care vorbim.

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

În acest exemplu, nu destructuram niciodată organization și asta e perfect. Este încă disponibil pentru referință în interiorul obiectului user , așa cum este.

 user.organization

Pentru matrice, există de fapt două moduri de a „ignora” elementele. În exemplul de obiecte, facem referire în mod specific la valori interne utilizând numele cheii asociate. Când tablourile sunt destructurate, numele variabilei este atribuit de poziție. Să începem cu ignorarea elementelor de la sfârșitul matricei.

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

Destructuram primul și al doilea element din matrice, iar restul sunt irelevante. Dar ce zici de elementele de mai târziu? Dacă se bazează pe poziție, nu trebuie să destructuram fiecare element până îl atingem pe cel pe care îl dorim?

După cum se dovedește, noi nu. În schimb, folosim virgule pentru a implica existența acelor elemente, dar fără variabile de referință, acestea sunt ignorate.

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

Și le putem face pe amândouă în același timp. Omiterea elementelor oriunde vrem folosind substituentul virgulei. Și din nou, ca și în exemplul de obiect, elementele „ignorate” sunt încă disponibile pentru referință în matricea roleCounts .

Exemplu ciudat

Puterea și versatilitatea destructurarii înseamnă, de asemenea, că puteți face lucruri cu adevărat bizare. Dacă vă vor fi utile sau nu, este greu de spus, dar merită să știți că este o opțiune!

Un astfel de exemplu este că puteți folosi destructurarea pentru a face copii superficiale.

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

Un alt lucru pentru care poate fi folosită destructurarea este dereferențiarea.

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

Ca întotdeauna, lizibilitatea este de cea mai mare importanță și toate aceste exemple ar trebui folosite judiciar. Dar cunoașterea tuturor opțiunilor tale te ajută să o alegi pe cea mai bună.

Concluzie

JavaScript este plin de obiecte și matrice complexe. Fie că este vorba de răspunsul de la o solicitare HTTP sau de seturi de date statice, este important să poți accesa eficient conținutul încorporat. Utilizarea atribuirii de destructurare este o modalitate excelentă de a face asta. Nu numai că gestionează mai multe niveluri de imbricare, dar permite accesul concentrat și oferă valori implicite în cazul referințelor nedefinite.

Chiar dacă ați folosit destructurarea de ani de zile, există atât de multe detalii ascunse în specificații. Sper că acest articol a acționat ca un memento al instrumentelor pe care vi le oferă limbajul. Data viitoare când scrieți cod, poate că unul dintre ele vă va fi de folos!