Atribuirea de destructurare este o caracteristică interesantă care a venit împreună cu ES6. Destructurarea este o expresie JavaScript care face posibilă despachetarea valorilor din tablouri sau proprietăți din obiecte în variabile distincte. Adică putem extrage date din tablouri și obiecte și le putem atribui variabilelor.

De ce este necesar acest lucru?

Imaginați-vă că vrem să extragem date dintr-o matrice. Anterior, cum se făcea acest lucru?

let introduction = ["Hello", "I" , "am", "Sarah"];
let greeting = introduction[0];
let name = introduction[3];

console.log(greeting);//"Hello"
console.log(name);//"Sarah"

Putem vedea că atunci când vrem să extragem date dintr-o matrice, trebuie să facem același lucru din nou și din nou.

Alocarea destructurării ES6 facilitează extragerea acestor date. Cum se întâmplă asta? În primul rând, vom discuta despre atribuirea de destructurare cu matrici. Apoi vom trece la destructurarea obiectelor.

Să începem.

Destructurarea matricei de bază

Dacă vrem să extragem date din tablouri, este destul de simplu folosind atribuirea de destructurare.

Să ne referim la primul nostru exemplu pentru tablouri. În loc să parcurgem acel proces repetitiv, am face acest lucru:

let introduction = ["Hello", "I" , "am", "Sarah"];
let [greeting, pronoun] = introduction;

console.log(greeting);//"Hello"
console.log(pronoun);//"I"

Putem face acest lucru și cu același rezultat.

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log(greeting);//"Hello"
console.log(pronoun);//"I"

Declararea variabilelor înainte de atribuire

Variabilele pot fi declarate înainte de a fi atribuite astfel:


let greeting, pronoun;
[greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];

console.log(greeting);//"Hello"
console.log(pronoun);//"I"

Observați că variabilele sunt setate de la stânga la dreapta. Deci, prima variabilă primește primul element din matrice, a doua variabilă primește a doua variabilă din matrice și așa mai departe.

Omiterea articolelor dintr-o matrice

Ce se întâmplă dacă dorim să obținem primul și ultimul element din matricea noastră în loc de primul și al doilea element și dorim să atribuim doar două variabile? Acest lucru se poate face și. Uită-te la exemplul de mai jos:

let [greeting,,,name] = ["Hello", "I" , "am", "Sarah"];

console.log(greeting);//"Hello"
console.log(name);//"Sarah"

Ce s-a intamplat?

Uită-te la matricea din partea stângă a atribuirii variabilei. Observați că, în loc să avem doar o virgulă, avem trei. Separatorul de virgule este utilizat pentru a sări peste valorile dintr-o matrice. Deci, dacă doriți să omiteți un element dintr-o matrice, utilizați doar o virgulă.

Hai să mai facem una. Să omitem primul și al treilea element din listă. Cum am face asta?

let [,pronoun,,name] = ["Hello", "I" , "am", "Sarah"];

console.log(pronoun);//"I"
console.log(name);//"Sarah"

Deci separatorul de virgule face magia. Deci, dacă vrem să omitem toate articolele, facem acest lucru:

let [,,,,] = ["Hello", "I" , "am", "Sarah"];

Atribuirea restului unui tablou

Ce se întâmplă dacă vrem să atribuim o parte din matrice variabilelor și restul articolelor dintr-o matrice unei anumite variabile? În acest caz, am face acest lucru:

let [greeting,...intro] = ["Hello", "I" , "am", "Sarah"];

console.log(greeting);//"Hello"
console.log(intro);//["I", "am", "Sarah"]

Folosind acest model, puteți despacheta și atribui partea rămasă a unui tablou unei variabile.

Atribuirea destructurării cu funcții

De asemenea, putem extrage date dintr-o matrice returnată dintr-o funcție. Să presupunem că avem o funcție care returnează o matrice precum exemplul de mai jos:

function getArray() {
    return ["Hello", "I" , "am", "Sarah"];
} 
let [greeting,pronoun] = getArray();

console.log(greeting);//"Hello"
console.log(pronoun);//"I"

Obținem aceleași rezultate.

Utilizarea valorilor implicite

Valorile implicite pot fi atribuite variabilelor doar în cazul în care valoarea extrasă din matrice este undefined:

let [greeting = "hi",name = "Sarah"] = ["hello"];

console.log(greeting);//"Hello"
console.log(name);//"Sarah"

Asa de name revine la „Sarah” deoarece nu este definit în matrice.

Schimbarea valorilor utilizând atribuirea de destructurare

Inca un lucru. Putem folosi atribuirea de destructurare pentru a schimba valorile variabilelor:

let a = 3;
let b = 6;

[a,b] = [b,a];

console.log(a);//6
console.log(b);//3

Apoi, să trecem la Destructurarea obiectelor.

Destructurarea obiectelor

În primul rând, să vedem de ce este nevoie de destructurarea obiectelor.

Să presupunem că vrem să extragem date dintr-un obiect și să le atribuim variabilelor noi. Înainte de ES6, cum s-ar face acest lucru?

let person = {name: "Sarah", country: "Nigeria", job: "Developer"};

let name = person.name;
let country = person.country;
let job = person.job;

console.log(name);//"Sarah"
console.log(country);//"Nigeria"
console.log(job);//Developer"

Vedeți cât de obositor este să extrageți toate datele. Trebuie să facem în mod repetat același lucru. Destructurarea ES6 salvează într-adevăr ziua. Să sărim direct în el.

Destructurarea obiectelor de bază

Să repetăm ​​exemplul de mai sus cu ES6. În loc să atribuim valori una câte una, putem folosi obiectul din stânga pentru a extrage datele:

    
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};

let {name, country, job} = person;

console.log(name);//"Sarah"
console.log(country);//"Nigeria"
console.log(job);//Developer"

Veți obține aceleași rezultate. De asemenea, este valid să atribuiți variabile unui obiect care nu a fost declarat:

let {name, country, job} = {name: "Sarah", country: "Nigeria", job: "Developer"};

console.log(name);//"Sarah"
console.log(country);//"Nigeria"
console.log(job);//Developer"

Variabile declarate înainte de a fi atribuite

Variabilele din obiecte pot fi declarate înainte de a fi atribuite destructurării. Să încercăm asta:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; 
let name, country, job;

{name, country, job} = person;

console.log(name);// Error : "Unexpected token ="

Stai, ce tocmai s-a întâmplat ?! Oh, am uitat să adăugăm () înaintea parantezelor cretate.

( ) în jurul instrucțiunii de atribuire este necesară sintaxa atunci când se utilizează atribuirea obiectului de destructurare literală fără declarație. Acest lucru se datorează faptului că {} în partea stângă este considerat un bloc și nu un obiect literal. Deci, iată cum puteți face acest lucru în mod corect:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let name, country, job;

({name, country, job} = person);

console.log(name);//"Sarah"
console.log(job);//"Developer"

De asemenea, este important să rețineți că atunci când utilizați această sintaxă, () ar trebui să fie precedat de un punct și virgulă. În caz contrar, ar putea fi folosit pentru a executa o funcție din linia anterioară.

Rețineți că variabilele din obiectul din partea stângă ar trebui să aibă același nume ca o cheie de proprietate în obiect person. Dacă numele sunt diferite, vom primi undefined:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"};

let {name, friends, job} = person;

console.log(name);//"Sarah"
console.log(friends);//undefined

Dar dacă vrem să folosim un nou nume de variabilă, bine, putem.

Folosirea unui nou nume de variabilă

Dacă dorim să atribuim valorile unui obiect unei noi variabile în loc să folosim numele proprietății, putem face acest lucru:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"};

let {name: foo, job: bar} = person;

console.log(foo);//"Sarah"
console.log(bar);//"Developer"

Deci valorile extrase sunt transmise noilor variabile foo și bar.

Utilizarea valorilor implicite

Valorile implicite pot fi utilizate și în destructurarea obiectelor, doar în cazul în care o variabilă este undefined într-un obiect din care dorește să extragă date din:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"};

let {name = "myName", friend = "Annie"} = person;

console.log(name);//"Sarah"
console.log(friend);//"Annie"

Deci, dacă valoarea nu este nedefinită, variabila stochează valoarea extrasă din obiect ca în cazul name. În caz contrar, a folosit valoarea implicită așa cum a făcut pentru friend.

De asemenea, putem seta valori implicite atunci când atribuim valori unei noi variabile:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"};

let {name:foo = "myName", friend: bar = "Annie"} = person;

console.log(foo);//"Sarah"
console.log(bar);//"Annie"

Asa de name a fost extras din person și atribuit unei variabile diferite. friendpe de altă parte, a fost undefined în person, deci noua variabilă bar i s-a atribuit valoarea implicită.

Numele proprietății calculate

Numele proprietății computerizate este o altă caracteristică literală a obiectului, care funcționează și pentru destructurare. Puteți specifica numele unei proprietăți printr-o expresie dacă o puneți între paranteze drepte:

let prop = "name";

let {[prop] : foo} = {name: "Sarah", country: "Nigeria", job: "Developer"};

console.log(foo);//"Sarah"

Combinarea matricilor cu obiectele

Tablourile pot fi utilizate și cu obiecte în destructurarea obiectelor:

let person = {name: "Sarah", country: "Nigeria", friends: ["Annie", "Becky"]};

let {name:foo, friends: bar} = person;

console.log(foo);//"Sarah"
console.log(bar);//["Annie", "Becky"]

Cuibărit în destructurarea obiectelor

Obiectele pot fi cuibărite și la destructurare:

let person = {
    name: "Sarah",
    place: {
        country: "Nigeria", 
        city: "Lagos" }, 
    friends : ["Annie", "Becky"]
};

let {name:foo,
     place: {
         country : bar,
         city : x}
    } = person;

console.log(foo);//"Sarah"
console.log(bar);//"Nigeria"

Odihnește-te în Destructurarea obiectelor

Sintaxa restului poate fi folosită și pentru a prelua cheile de proprietate care nu sunt deja preluate de tiparul de destructurare. Acele chei și valorile lor sunt copiate într-un obiect nou:

let person = {name: "Sarah", country: "Nigeria", job: "Developer" friends: ["Annie", "Becky"]};

let {name, friends, ...others} = person;

console.log(name);//"Sarah"
console.log(friends);//["Annie", "Becky"]
console.log(others);// {country: "Nigeria", job: "Developer"}

Aici, proprietățile rămase ale căror chei în care nu fac parte din numele variabilelor enumerate au fost atribuite variabilei others. Sintaxa restului este aici ...others. others poate fi redenumit în orice variabilă doriți.

Un ultim lucru – să vedem cum poate fi folosită distrugerea obiectelor în funcții.

Destructurarea și funcțiile obiectelor

Destructurarea obiectelor poate fi utilizată pentru a atribui parametri funcțiilor:

function person({name: x, job: y} = {}) {
    console.log(x);
}

person({name: "Michelle"});//"Michelle"
person();//undefined
person(friend);//Error : friend is not defined

Observați {} în partea dreaptă a obiectului parametri. Ne face posibilă apelarea funcției fără a trece niciun argument. De aceea am primit undefined. Dacă îl eliminăm, vom primi un mesaj de eroare.

De asemenea, putem atribui valori implicite parametrilor:

function person({name: x = "Sarah", job: y = "Developer"} = {}) {
    console.log(x);
}

person({name});//"Sarah"

Putem face o mulțime de lucruri cu Array și Object Destructuring, așa cum am văzut în exemplele de mai sus.

Mulțumesc că ai citit. 🙂