Kratki uvod u destrukturiranje niza u ES6

Destrukturiranje u JavaScriptu pojednostavljena je metoda izdvajanja više svojstava iz niza uzimanjem strukture i dekonstrukcijom u vlastite sastavne dijelove kroz dodjele korištenjem sintakse koja izgleda slično literalima niza.

Stvara obrazac koji opisuje vrstu vrijednosti koju očekujete i izvršava zadatak. Destrukturiranje niza koristi položaj.

Pogledajte donji isječak koda.

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

Sintaksa s destrukturiranjem.

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

Sintaksa bez destrukturiranja.

Brojeve ne možete koristiti za destrukturiranje. Brojevi će izbaciti pogrešku jer brojevi ne mogu biti nazivi varijabli.
var [1, 2, 3] = ["Laide", "Ola", "Jets"];

Ova sintaksa dovodi do pogreške.

Destrukturiranje je izvlačenje podataka iz niza učinilo vrlo jednostavnim i čitljivim. Zamislite da pokušavate izvući podatke iz ugniježđenog niza s 5 ili 6 razina. To bi bilo vrlo zamorno. Koristite literal niza na lijevoj strani zadatka.

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

Uzima svaku varijablu u literalu polja s lijeve strane i preslikava je na isti element s istim indeksom u polju.

console.log(a); // Output: Tableconsole.log(b); //Output: Chairconsole.log(c); //Output: Fan

Izjava i dodjela mogu se izvršiti zasebno u destrukturiranju.

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

Ako je broj varijabli proslijeđenih literaturama niza za destrukturiranje veći od elemenata u nizu, tada se vraćaju varijable koje nisu preslikane ni u jedan element u poljuundefined.

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

Ako je broj varijabli proslijeđenih literaturama niza za destrukturiranje manji od elemenata u nizu, elementi bez varijabli na koje se mapiraju ostaju samo lijevi. Nema nikakvih pogrešaka.

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

Destrukturiranje vraćenih nizova

Destrukturiranje čini rad s funkcijom koja vraća niz kao vrijednost precizniji. Radi za sve iterabilne verzije.

function runners(){ return ["Sandra", "Ola", "Chi"];}
var [a, b, c] = runners();console.log(a); //Output: Sandraconsole.log(b); //Output: Olaconsole.log(c); //Output: Chi

Zadana vrijednost

Destrukturiranje omogućuje da se varijabli dodijeli zadana vrijednost ako nema vrijednosti ili undefinedje usvojen. To je poput pružanja rezervnog stanja kad se ništa ne pronađe.

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

Zadane vrijednosti mogu se odnositi i na druge varijable, uključujući onu u istom literalu niza.

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

Zanemarivanje nekih vrijednosti

Destrukturiranje omogućuje mapiranje varijable na elemente koji vas zanimaju. Ostale elemente u polju možete zanemariti ili preskočiti pomoću zareza koji prate.

var a, b;[a, , b] = ["Lordy", "Crown", "Roses"];
console.log(a); //Output: Lordyconsole.log(b); //Output: Roses

Sintaksa parametra mirovanja i širenja

Novi (...) operator koji je dodan u ES6 može se koristiti u destrukturiranju. Ako se operater (...) pojavi na lijevoj strani u destrukturiranju, to je OSTALI PARAMETAR . Parametar Rest koristi se za mapiranje svih preostalih elemenata u polju koji nisu preslikani u samu varijablu rest. To je poput skupljanja onoga što je ostalo iza nas . Varijabla Ostatak mora uvijek biti zadnja, inače SyntaxErrorse baca a.

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];var [first, , third, ...others] = planets;
console.log(first); //Output: Mercuryconsole.log(third); //Output: Venusconsole.log(others); //Output: ["Mars", "Pluto", "Saturn"]

Ako se operater (...) pojavi s desne strane u destrukturiranju, to je ŠIRENJA SINTAKSA . Touzima sve ostale elemente u polju koji nemaju mapiranu varijablu, a zatim ih preslikava na ostalu varijablu.

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

Kada na lijevoj strani možete imati više varijabli, on pojedinačne elemente u polju podjednako preslikava na varijable.

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
var [first, second, ...rest] = ["Mercury", ...planets];
console.log(first); //Output: Mercuryconsole.log(second); //Output: Mercuryconsole.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: Mercuryconsole.log(second); //Output: Earthconsole.log(third); //Output: Mercuryconsole.log(fourth); //Output: Earthconsole.log(rest); //Output: ["Venus", "Mars", "Pluto", "Saturn"]

Izmjenjivanje ili zamjena varijabli

Jedan izraz destrukturiranja može se koristiti za zamjenu vrijednosti dviju varijabli.

var a, b;[a, b] = ["Male", "Female"];[a, b] = [b, a];
console.log(a); //Output: Femaleconsole.log(b); //Output: Male

Destrukturiranje ugniježđenog niza

Također možete napraviti ugniježđeno destrukturiranje s nizovima. Odgovarajuća stavka mora biti niz da bi se pomoću ugniježđenog literala niza za destrukturiranje dodijelile stavke u njemu lokalnim varijablama.

var numbers = [8, [1, 2, 3], 10, 12];var [a, [d, e, f]] = numbers;
console.log(a); // Output: 8console.log(d); // Output: 1console.log(e); // Output: 2

Destrukturiranje višestrukih nizova

Možete destrukturirati niz više puta u istom isječku koda.

var places = ["first", "second", "third", "fourth"];var [a, b, , d] = [f, ...rest] = places;
console.log(a); //Output: firstconsole.log(d); //Output: fourthconsole.log(f); //Output: firstconsole.log(rest); //Output: ["second", "third", "fourth"]

Zaključak

Možete kopirati i zalijepiti kôd na Babelovu web stranicu kako biste vidjeli kako bi izgledao kôd da ne postoji destrukturiranje. Mogli biste napisati više redaka koda, ali destrukturiranje to sve pojednostavljuje.