de Joanna Gaudyn

Destructurarea a fost o nouă adăugire la ES6. S-a inspirat din limbi precum Python și vă permite să extrageți date din tablouri și obiecte în variabile distincte. S-ar putea să pară ceva ce ați făcut deja în versiunile anterioare de JavaScript, nu? Aruncați o privire la două exemple.

Primul extrage date dintr-un obiect:

const meal = {  name: 'pizza',  type: 'marinara',  price: 6.25};
const name = meal.name;const type = meal.type;const price = meal.price;
console.log(name, type, price);

Tipărituri:

pizza marinara 6,25

Și a doua dintr-o matrice:

const iceCreamFlavors = ['hazelnut', 'pistachio', 'tiramisu'];const flavor1 = iceCreamFlavors[0];const flavor2 = iceCreamFlavors[1];const flavor3 = iceCreamFlavors[2];console.log(flavor1, flavor2, flavor3);

Tipărituri:

ad-banner

tiramisu cu fistic de alune

Lucrul este, însă, că niciunul dintre aceste exemple nu folosește efectiv destructurarea.

Ce este destructurarea?

Destructurarea vă permite să specificați elementele pe care doriți să le extrageți dintr-o matrice sau obiect în partea stângă a unei sarcini. Aceasta înseamnă mult mai puțin cod și exact același rezultat ca mai sus, fără a pierde lizibilitatea. Chiar dacă sună ciudat la început.

Să refacem exemplele noastre.

Destructurarea obiectelor

Iată cum distrugem valorile dintr-un obiect:

const meal = {  name: 'pizza',  type: 'marinara',  price: 6.25};
const {name, type, price} = meal;
console.log(name, type, price);

Tipărituri:

pizza marinara 6,25

Bretele cretate { } stand pentru obiectul care este destructurat și name, type, și price reprezintă variabilele cărora doriți să le atribuiți valorile. Putem sări peste proprietatea de unde să extragem valorile, atâta timp cât numele variabilelor noastre corespund cu numele proprietăților obiectului.

O altă caracteristică excelentă a destructurării obiectelor este că puteți alege ce valori doriți să salvați în variabile:

const {type} = meal; va selecta numai type proprietate de la meal obiect.

Cum se utilizeaza destructurarea in JavaScript ES6 la potentialul sau
sursă

Matrice de destructurare

Iată cum ar fi tratat exemplul nostru original:

const iceCreamFlavors = ['hazelnut', 'pistachio', 'tiramisu'];
const [flavor1, flavor2, flavor3] = iceCreamFlavors;
console.log(flavor1, flavor2, flavor3);

Tipărituri:

tiramisu cu fistic de alune

Parantezele [ ] stand pentru matricea care este destructurată și flavor1, flavor2 și flavor3 reprezintă variabilele cărora doriți să le atribuiți valorile. Folosind destructurarea putem sări peste indicii la care valorile trăiesc în matricea noastră. Convenabil, nu-i așa?

La fel ca la un obiect, puteți sări peste unele valori atunci când destructurați o matrice:

const [flavor1, , flavor3] = iceCreamFlavors; pur și simplu va ignora flavor2.

1611525606 402 Cum se utilizeaza destructurarea in JavaScript ES6 la potentialul sau
sursă

Trăiască leneșa ca un puternic motivator pentru inventarea de noi comenzi rapide!

Ți-a plăcut acest articol? Poate că veți găsi și acestea interesante:

Ce legătură are yoga cu programarea?
S-ar putea să fii surprins.medium.freecodecamp.orgParametru operator Spread și rest în JavaScript (ES6)
Atât operatorul spread, cât și parametrul rest sunt scrise ca trei puncte consecutive (…). Mai au ceva …medium.comO prezentare generală a iteratorilor JavaScript
Diferența dintre pentru, pentru … în și pentru … de buclemedium.freecodecamp.org