Lyhyt esittely matriisien tuhoutumisesta ES6: ssa

Poistavasta JavaScript on yksinkertaistettu menetelmä talteen useita ominaisuuksia matriisista ottamalla rakenteen ja purkamisen sen alas sen omaan osien läpi tehtäviä käyttämällä syntaksia, joka muistuttaa matriisin literaaleja.

Se luo mallin, joka kuvaa odotettua arvoa ja tekee tehtävän. Taulukon tuhoaminen käyttää sijaintia.

Katso alla oleva koodinpätkä.

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

Syntaksi rakenneuudistuksella.

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

Syntaksi ilman rakenneuudistusta.

Et voi käyttää Numbersia rakenneuudistukseen. Numerot heittävät virheen, koska numerot eivät voi olla muuttuvia nimiä.
var [1, 2, 3] = ["Laide", "Ola", "Jets"];

Tämä syntakse heittää virheen.

Uudelleenjärjestely on tehnyt tietojen poiminnan ryhmästä hyvin yksinkertaisen ja luettavan. Kuvittele, kuinka yrität poimia tietoja sisäkkäisestä taulukosta, jossa on 5 tai 6 tasoa. Se olisi hyvin tylsiä. Käytät taulukon kirjainta tehtävän vasemmalla puolella.

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

Se vie kaikki muuttujat taulukon kirjaimesta vasemmalla puolella ja kartoittaa sen samaan elementtiin taulukon samassa hakemistossa.

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

Ilmoitus ja määritys voidaan tehdä erikseen tuhoamalla.

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

Jos tuhoavien taulukon literaaleille välitettyjen muuttujien määrä on enemmän kuin matriisin elementit, muuttujat, joita ei ole yhdistetty mihinkään matriisin elementtiin, palaavatundefined.

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

Jos destruktiivisen matriisin literaaleille välitettyjen muuttujien määrä on pienempi kuin matriisin elementit, elementit, joihin ei ole määriteltäviä muuttujia, jäävät. Ei ole mitään virheitä.

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

Palautettujen taulukoiden uudelleenjärjestely

Uudelleenjärjestely tekee työskentelyn sellaisen funktion kanssa, joka palauttaa matriisin arvona. Se toimii kaikilla iteroiduilla.

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

Oletusarvo

Rakenneuudistuksen avulla muuttujalle voidaan määrittää oletusarvo, jos arvoa ei ole, tai undefinedon läpäisty. Se on kuin tarjota varavoima, kun mitään ei löydy.

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

Oletusarvot voivat viitata myös muihin muuttujiin, mukaan lukien sama taulukon literaali.

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

Jättää huomiotta jotkut arvot

Uudelleenjärjestelyn avulla voit määrittää muuttujan kiinnostaviin elementteihin. Voit jättää matriisin muut elementit huomiotta tai ohittaa ne pilkuilla.

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

Loput parametrit ja levityssyntaksit

ES6: een lisättyä uutta (…) operaattoria voidaan käyttää uudelleenjärjestelyissä. Jos (…) -operaattori näkyy vasemmalla puolella tuhoamisen yhteydessä, se on REST-PARAMETRI . Rest-parametria käytetään kartoittamaan kaikki matriisin jäljellä olevat elementit, joita ei ole yhdistetty itse muuttujaan. Se on kuin kerätä mitä jäljelle jää . Rest-muuttujan on aina oltava viimeinen, muuten a SyntaxErrorheitetään.

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"]

Jos (…) -operaattori näkyy oikealla puolella tuhoamisen yhteydessä, se on SPREAD SYNTAX . Sevie kaikki matriisin muut elementit, joihin ei ole määritelty muuttujaa, ja kartoittaa sen sitten muuttujaan.

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"]

Kun vasemmalla puolella voi olla enemmän muuttujia, se kartoittaa taulukon yksittäiset elementit tasaisesti muuttujiin.

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"]

Muuttujien vaihtaminen tai vaihtaminen

Yhdellä destruktiivisella lausekkeella voidaan vaihtaa kahden muuttujan arvoja.

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

Sisäkkäisen ryhmän uudelleenjärjestely

Voit myös tehdä sisäkkäisiä uudelleenjärjestelyjä matriiseilla. Vastaavan kohteen on oltava matriisi, jotta sisäkkäistä uudelleenjärjestelytaulukon kirjainta voidaan käyttää sen kohteiden määrittämiseen paikallisiin muuttujiin.

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

Useiden ryhmien uudelleenjärjestely

Voit hajottaa taulukon useammin kuin kerran samassa koodinpätkässä.

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"]

Johtopäätös

Voit kopioida ja liittää koodin Babelin verkkosivustolle nähdäksesi, miltä koodi näyttäisi, jos rakenneuudistusta ei olisi olemassa. Olisit kirjoittanut lisää koodirivejä, mutta uudelleenjärjestely yksinkertaistaa kaikkea.