de Kevwe Ochuko

Destructurarea în JavaScript este o metodă simplificată de extragere a mai multor proprietăți dintr-o matrice luând structura și deconstruind-o în propriile părți constitutive prin atribuiri utilizând o sintaxă care arată similar cu literele matrice.

Se creează un model care descrie tipul de valoare pe care îl așteptați și realizează atribuirea. Destructurarea matricei utilizează poziția.

Consultați fragmentul de cod de mai jos.

var [first, second, third] = ["Laide", "Gabriel", "Jets"];

Sintaxa cu destructurarea.

var first = "laide",
    second = "Gabriel",
    third = "Jets";

Sintaxa fără destructurare.

Nu puteți utiliza numerele pentru destructurare. Numerele vor genera o eroare deoarece numerele nu pot fi nume de variabile.

var [1, 2, 3] = ["Laide", "Ola", "Jets"];

Această sintaxă generează o eroare.

Destructurarea a făcut extragerea datelor dintr-o matrice foarte simplă și lizibilă. Imaginați-vă că încercați să extrageți date dintr-o matrice imbricată cu 5 sau 6 niveluri. Ar fi foarte plictisitor. Utilizați un literal literal în partea stângă a sarcinii.

var thing = ["Table", "Chair", "Fan"];
var [a, b, c] = thing;

Prinde fiecare variabilă din literalul matricei din partea stângă și o mapează la același element la același index din matrice.

console.log(a); // Output: Table
console.log(b); //Output: Chair
console.log(c); //Output: Fan

Declarația și atribuirea se pot face separat în destructurare.

var first, second;
[first, second] = ["Male", "Female"];

Dacă numărul de variabile transmise literalelor matricei de destructurare este mai mare decât elementele din matrice, atunci variabilele care nu sunt mapate la niciun element din matrice returnează undefined.

var things = ["Table", "Chair", "Fan", "Rug"];
var [a, b, c, d, e] = things;
console.log(c); //Output: Fan
console.log(d); //Output: Rug
console.log(e); //Output: undefined

Dacă numărul de variabile transmise literalelor matricei de destructurare este mai mic decât elementele din matrice, elementele fără variabile la care trebuie mapate sunt lăsate. Nu există nici o eroare.

var things = ["Table", "Chair", "Fan", "Rug"];
var [a, b, c] = things;
console.log(c); // Output: Fan

Destructurarea matricilor returnate

Destructurarea face lucrul cu o funcție care returnează o matrice ca valoare mai precisă. Funcționează pentru toate iterabilele.

function runners(){
    return ["Sandra", "Ola", "Chi"];
}

var [a, b, c] = runners();
console.log(a); //Output: Sandra
console.log(b); //Output: Ola
console.log(c); //Output: Chi

Valoare implicită

Destructurarea permite atribuirea unei valori implicite unei variabile dacă nu există valoare sau undefined a trecut. Este ca și cum ai oferi o rezervă atunci când nu se găsește nimic.

var a, b;
[a = 40, b = 4] = [];
console.log(a); //Output: 40
console.log(b); //Output: 4

[a = 40, b = 4] = [1, 23];
console.log(a); //Output: 1
console.log(b); //Output: 23

Valorile implicite se pot referi, de asemenea, la alte variabile, inclusiv cea din același literal literal.

var [first = "Cotlin", second = first] = [];
console.log(first); //Output: Cotlin
console.log(second); //Output: Cotlin

var [first = "Cotlin", second = first] = ["Koku"];
console.log(first); //Output: Koku
console.log(second); //Output: Koku

var [first = "Cotlin", second = first] = ["Koku", "Lydia"];
console.log(first); //Output: Koku
console.log(second); //Output: Lydia

Ignorarea unor valori

Destructurarea vă permite să mapați o variabilă cu elementele care vă interesează. Puteți ignora sau sări peste celelalte elemente din matrice utilizând virgule de urmărire.

var a, b;
[a, , b] = ["Lordy", "Crown", "Roses"];

console.log(a); //Output: Lordy
console.log(b); //Output: Roses

Parametrul Rest și sintaxa Spread

Noul (…) operator care a fost adăugat în ES6 poate fi utilizat în destructurare. Dacă (…) operator apare pe partea stângă în destructurare atunci este un PARAMETRU DE REPOZIT. Un parametru Rest este utilizat pentru maparea tuturor elementelor rămase din matrice care nu au fost mapate cu variabila rest în sine. Este ca și cum ai aduna ceea ce a rămas în urmă. Variabila Rest trebuie să fie întotdeauna ultima altfel a SyntaxError este aruncat.

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
var [first, , third, ...others] = planets;

console.log(first); //Output: Mercury
console.log(third); //Output: Venus
console.log(others); //Output: ["Mars", "Pluto", "Saturn"]

Dacă operatorul (…) apare pe partea dreaptă în destructurare, atunci este un SINTAXA DE ÎMPĂTURARE. Aceasta ia toate celelalte elemente din matrice care nu au nicio variabilă mapată la ele și apoi o mapează la variabila rest.

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];

var [first, second, ...rest] = ["Mercury", "Earth", ...planets, "Saturn"];

console.log(first); //Output: Mercury
console.log(second); //Output: Earth
console.log(rest); //Output: ["Venus", "Mars", "Pluto", "Saturn"]

Când puteți avea mai multe variabile în partea stângă, mapează elementele individuale din matrice în mod egal cu variabilele.

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];

var [first, second, ...rest] = ["Mercury", ...planets];

console.log(first); //Output: Mercury
console.log(second); //Output: Mercury
console.log(rest); //Output: ["Earth", "Venus", "Mars", "Pluto", "Saturn"]

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];

var [first, second, third, fourth ...rest] = ["Mercury", "Earth", ...planets];

console.log(first); //Output: Mercury
console.log(second); //Output: Earth
console.log(third); //Output: Mercury
console.log(fourth); //Output: Earth
console.log(rest); //Output: ["Venus", "Mars", "Pluto", "Saturn"]

Schimbarea sau schimbarea variabilelor

O expresie de destructurare poate fi utilizată în schimbul valorilor a două variabile.

var a, b;
[a, b] = ["Male", "Female"];
[a, b] = [b, a];

console.log(a); //Output: Female
console.log(b); //Output: Male

Destructurarea matricii imbricate

De asemenea, puteți face destructurare imbricată cu tablouri. Elementul corespunzător trebuie să fie o matrice pentru a utiliza o matrice de destructurare cuibărită literală pentru a atribui elemente variabile locale.

var numbers = [8, [1, 2, 3], 10, 12];
var  [a, [d, e, f]] = numbers;

console.log(a); // Output: 8
console.log(d); // Output: 1
console.log(e); // Output: 2

Multiple Array Destructuring

Puteți distruge o matrice de mai multe ori în același fragment de cod.

var places = ["first", "second", "third", "fourth"];
var [a, b, , d] = [f, ...rest] = places;

console.log(a); //Output: first
console.log(d); //Output: fourth
console.log(f); //Output: first
console.log(rest); //Output: ["second", "third", "fourth"]

Concluzie

Puteți copia și lipi codul pe Site-ul Babel pentru a vedea cum ar arăta codul dacă nu ar exista destructurarea. Ați fi scris mai multe linii de cod, dar destructurarea simplifică totul.