Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

JavaScript modern are multe caracteristici noi care facilitează scrierea codului într-un mod simplu și structurat. Una dintre caracteristicile moderne disponibile în ES6+ este destructurarea matricei și a obiectelor.

Cadrele JavaScript precum React.js și Angular încurajează utilizarea acestei tehnici. Prin urmare, este esențial să înțelegeți despre ce este vorba despre destructurare și cum să o utilizați în timpul scrierii codului.

Ce este destructurarea obiectelor și a matricelor în JavaScript?

Destructurarea în JavaScript se referă la procesul de despachetare a valorilor dintr-o matrice sau obiect. Oferă o modalitate mai concisă de a obține valori din matrice sau obiecte, fără a face greutăți, atunci când sunteți interesat de elementele de matrice individuale sau valorile dintr-un obiect.

De asemenea, este util atunci când procesează valorile returnate de la o funcție sau expresie complexă. Acest concept este unul dintre

instagram viewer
cele mai bune practici pe care ar trebui să le urmați în timp ce scrieți codul React.

Cum să desstructurăm matricele

Iată un exemplu de cod pentru a obține o idee despre destructurarea matricei:

const arr = [1, 2];
const [a, b] = arr;
consolă.log (a) // imprimă 1 pe consolă
consolă.log (b) // imprimă 2 pe consolă

Acest cod folosește destructurarea pentru a atribui valorile de la arr—1 și 2—la variabile A și b, respectiv. Acesta este conceptul fundamental din spatele destructurarii. Aveți o matrice sau un obiect în partea dreaptă și despachetați articole și le atribuiți variabilelor individuale din partea stângă.

Sub capotă, JavaScript copiază valorile din arr și le atribuie variabilelor din partea stângă astfel:

const arr = [1,2];
const a = arr[0];
const b = arr[1];

După cum puteți vedea, destructurarea este o modalitate mai concisă de a face acest lucru, spre deosebire de utilizarea notației obiect sau paranteză. Cu toate acestea, această sintaxă va fi probabil utilă atunci când lucrați cu matrice sau funcții complexe care returnează matrice sau șiruri.

Verificați exemplul de cod de mai jos:

const [zi, lună, dată, an, oră, fus orar] = Data().Despică(' ')
// Calling Date() returnează data curentă în formatul:
// Luni, 20 februarie 2023 13:07:29 GMT+0000
consolă.log (zi) // afișează Mon
consolă.log (lună) // imprimă februarie
consolă.log (data) // imprimă 20

În acest exemplu de cod, creăm un șir nou cu data curentă prin apelare Data(). În continuare, folosim Despică(), A Metoda șirurilor JavaScript, pentru a separa elementele din șir folosind spațiu ca separator. Despică(' ') returnează o matrice și folosim destructurarea pentru a atribui valorile variabilelor individuale.

Rețineți că, dacă matricea dvs. conține mai multe articole decât despachetați, JavaScript va ignora elementele suplimentare.

const arr = [1, 2, 3, 4];
const [a, b] = arr;
consolă.log (a) // imprimă 1
consolă.log (b) // imprimă 2
// valorile 3 și 4 nu sunt atribuite nici unei variabile; sunt ignorate

În acest caz, dacă doriți să stocați elementele rămase într-o variabilă, utilizați un parametru rest, astfel:

const arr = [1, 2, 3, 4];
const [a, b,... rest] = arr;
consolă.log (odihnă) // imprimă [3,4]

Uneori, este posibil să nu vă pese de un anumit articol. Modelul de destructurare al JavaScript vă permite, de asemenea, să săriți peste anumite elemente folosind o virgulă goală.

const arr = [1, 2, 3, 4];
const [a,, c] = arr;
consolă.log (c) // imprimă 3

Codul de mai sus folosește spațiul gol pentru a ignora valoarea 2 în matrice arr. În loc să atribuie valoare 2 la variabilă c, trece la următorul element din matrice. De asemenea, ignoră a patra valoare, deoarece nu specifică o variabilă în care să o stocheze.

În schimb, dacă aveți nevoie de mai puține articole decât despachetați, procesul va aloca nedefinit valoare pentru acele variabile suplimentare.

const arr = [1];
const [a, b] = arr;
consolă.log (a) // imprimă 1
consolă.log (b) // imprimă nedefinit

Pentru a preveni variabilele nedefinite, puteți seta valori implicite dacă nu sunteți sigur de lungimea matricei, după cum urmează (alocarea valorilor implicite nu este o cerință):

const arr = [1];
const [a = '10', b = 'nu e disponibil nu e asigurat nu e prevazut'] = arr;
consolă.log (a) // imprimă 1
consolă.log (b) // afișează „nu este furnizat”

Această destructurare atribuie valoarea 1 la variabilă A, suprascriind valoarea implicită. Variabil b își păstrează implicit deoarece nu este furnizată o valoare.

Cum să desstructurăm obiecte

Destructurarea obiectelor nu este atât de diferită de matrice. Singura diferență este că tablourile sunt iterabile și obiectele nu, rezultând un mod ușor diferit de a face lucrurile.

Când lucrați cu obiecte, variabilele din partea stângă a operatorului de atribuire sunt, de asemenea, inițializate ca obiecte:

const persoana = {Nume: "Alvin", vârstă: 10, înălţime: 1};
const {nume, vârstă, înălțime} = persoană;
consolă.log (nume) // afișează „Alvin”
consolă.log (înălțime) // imprimă 1

Din cod, folosim nume de proprietate din persoană obiect. Cu toate acestea, nu trebuie să utilizați numele exacte de proprietate în obiect. Puteți destructura și stoca valorile în diferite nume de variabile, după cum urmează:

const persoana = {Nume: "Alvin", vârstă: 10, înălţime: 1};
const {Nume: Nume, vârstă: ani, înălţime: currentHeight} = persoana;
consolă.log (prenume) // afișează „Alvin”
consolă.log (înălțime curentă) // imprimă 1

Începeți prin a specifica valoarea proprietății pe care doriți să o destructurați, apoi specificați numele variabilei pe care o veți folosi pentru a stoca valoarea după două puncte. Și ca și matrice, destructurarea unui nume de proprietate care nu există va fi nedefinit.

Pentru a gestiona acest lucru, puteți specifica în mod similar valorile implicite în cazul în care numele proprietății pe care doriți să-l atribuiți unei variabile nu este disponibil:

const persoana = {Nume: "Alvin", vârstă: 10, înălţime: 1};
const {nume, vârstă, înălțime, locație='La nivel mondial'} = persoană;
consolă.log (nume) // afișează „Alvin”
consolă.log (locație) // afișează „La nivel mondial”

Ordinea variabilelor din partea stângă nu contează pentru un obiect, deoarece obiectele stochează valori în perechi cheie-valoare. Ca atare, următorul cod va produce aceleași rezultate:

const persoana = {Nume: "Alvin", vârstă: 10, înălţime: 1};
const {varsta, inaltimea, nume} = persoana;
consolă.log (nume) // afișează „Alvin”
consolă.log (înălțime) // imprimă 1

În cele din urmă, similar cu matricele, puteți utiliza și parametrul rest pentru a destructura mai multe valori într-o variabilă astfel:

const persoana = {Nume: "Alvin", vârstă: 10, înălţime: 1};
const {nume, ...odihnă} = persoană;
consolă.log (nume) // afișează „Alvin”
consolă.log (odihnă) // printeaza { varsta: 10, inaltime: 1 }

Rețineți că parametrul de odihnă trebuie să fie întotdeauna ultimul. În caz contrar, JavaScript va lansa o excepție.

Îmbunătățiți-vă calitatea codului cu destructurarea JavaScript

Caracteristicile moderne ale Javascript, cum ar fi destructurarea, vă permit să scrieți cod foarte ușor de citit. Folosind destructurarea, puteți despacheta rapid valori din matrice și obiecte. Destructurarea se poate dovedi utilă și în alte situații, cum ar fi schimbarea valorilor a două variabile. Sperăm că acum înțelegeți ce înseamnă destructurarea în JavaScript și îl puteți utiliza în timp ce scrieți cod.