Kuinka käyttää JavaScriptin hajotusta puhtaamman ja tehokkaamman koodin kirjoittamiseen

Joskus sinun on tuhottava rakentaaksesi jotain uutta. -Mistborn: Aikojen sankari

ES6 esitteli meille yhden odotetuimmista JavaScript-ominaisuuksista: uudelleenjärjestely. Käsitteenä rakenneuudistus ei ole uusi tai uraauurtava asia, ja joillakin kielillä oli jo kauan ennen rakenneuudistusta (??). Mutta se oli kaivattu ja vaadittu ominaisuus JavaScriptissä.

Rakenneuudistus on rakenteen rikkominen. Ohjelmoinnin yhteydessä rakenteet ovat tietorakenteita, ja näiden tietorakenteiden tuhoaminen tarkoittaa yksittäisten arvojen purkamista tietorakenteesta. Javascriptissa hajotusta voidaan soveltaa objektiin tai matriisiin.

Rakenneuudistus tekee, rikkoo mitä tahansa. mitä hyötyä siitä meillä on ??

Ennen kuin vastaamme tähän kysymykseen, meillä on muodollinen määritelmä rakenneuudistukselle. MDN apuun!

Poistava tehtäväoperaattori syntaksi on JavaScript lauseke, joka tekee mahdolliseksi purkaa arvoja paneelit, tai ominaisuuksia esineitä, erillisiin muuttujia. -MDN

Katsotaanpa joitain esimerkkejä saadaksemme paremman käsityksen rakenneuudistuksen perusteista.

Taulukot

Näyte 1:

Kun näin tämän yksinkertaisen koodinpalan ensimmäistä kertaa, olin hämmentynyt. En saanut mitä tapahtui. Jos olet kuin minä, anna minun yrittää selittää.

Rivillä 1 määritellään 2 muuttujaa aja b. Seuraavalla rivillä molemmat muuttujat ovat vasemmalla puolella olevan ryhmän sisällä, mikä puolestaan ​​on sama kuin ajo-käden puolen todellinen taulukko. Seuraavilla riveillä tulostamme a&: n arvot bja saamme vastaavasti 7 ja 8, jotka olivat elementtejä RHS-taulukossa. Linjassa 2 tapahtuvaa taikuutta kutsutaan hajotukseksi.

LHS tuhoaa RHS: n ja elementtien purkamisesta puretut arvot määritetään muuttujille järjestyksessä.

Mutta miksi LHS on ryhmän sisällä ???

Destrukturointimäärityksessä käytetään samanlaista syntaksia LHS: ssä kuin RHS: ssä määritettäessä, mitkä arvot puretaan lähdemuuttujasta.

Näyte 2:

Tässä olemme lisänneet leftoutkoodiin toisen muuttujan . Meillä on 2 erilaista käyttötapaa leftoutkoodissa.

  • [a,b,leftout]-> Tämä määrittää taulukon kolmannen elementin to leftodotetusti.
  • [a,b,…leftout]-> Tämä antaa ensimmäiset 2 arvoa toaa ndb vastaavasti ja loput matriisista osoitetaan he leftomuuttujalle t ut.

Ratkaisu on operaattorissa. Tämä operaattori tiivistää kaikki jäljellä olevat argumentit ( loput ) yhdeksi taulukoksi. Jälkimmäisessä kohdassa ensimmäiset 2 taulukkoelementtiä osoitetaan vastaavasti a&: blle, ja loput argumentit tiivistetään taulukoksi (uudelleenjärjestely ehkä ??) ja osoitetaan leftoutmuuttujalle. Voimme varmistaa saman tarkastelemalla lähtöä.

Esineet

Näyte 1:

Uudelleenjärjestely toimii samalla tavalla sekä objektien että taulukoiden kohdalla. Objektin LHS on ominaisuuksia, aja bjotka on osoitettu vastaavasti ominaisuuksia aja bettä RHS objektin. Saamme 1 ja 2 vastaavasti tulostamalla ne.

Yksi asia huomata ( jos sinulla on ) on, että syntaksissa on pieni muutos ( nyt sinulla on ).

Kohteen tuhoamisessa koko LHS ja RHS kääritään sisälle ( )

Voimme nähdä virheen, jonka saamme, kun emme kääri sitä sisälle. ().Siinä sanotaan odotetun lausuman.

Mitä tapahtuu, on se, että jonkin sulkeminen sulkeisiin sulkeisiin {}sekoittaa JavaScriptiä siten, että se pitää sitä lohkona eikä objektina. Tästä johtuen se etsii lausetta lohkolle ( toimintoilmoitus ), joten liitämme koodin sisään (). Tämä tekee siitä pikemminkin ilmaisun kuin lohkon, ja saamme tulokset.

Näyte 2:

Jälleen restoperaattori. Toimii kuten matriiseissa, paitsi että tällä kertaa loput arvot romahdetaan objektin sisällä, koska LHS määrittelee käytettävän rakenteen.

Mihin rakenneuudistusta käytetään?

Kuten yllä olevista esimerkeistä nähdään, tiedämme nyt tuhoamisen tärkeyden. On olemassa monia käyttötapoja ja erilaisia ​​tapauksia siitä, kuinka hajotusta voidaan käyttää sekä esineille että matriiseille. Kokeilemme joitain niistä. ( PS - esimerkit pätevät sekä kohteisiin että matriiseihin, ellei toisin mainita. )

Muuttuva tehtävä

Näimme jo, kuinka muuttujat osoitetaan yllä olevissa esimerkeissä, joten katsotaanpa toinen.

Tässä esimerkissä jo luotu taulukko määritetään suoraan tuhoamiseen. Arvot osoitetaan kuitenkin muuttujille.

Sama koskee Objectia.

Oletusarvot

Joskus voi tapahtua, että määritämme nmuuttujien määrän saadaksesi arvoja hajotuksesta, mutta taulukossa / objektissa voi olla vain n-xelementtejä. Tässä tapauksessa xmääritetään muuttujat undefined.

Voimme nähdä, että bsitä ei ole määritelty, koska matriisissa ei yksinkertaisesti ole niin paljon elementtejä, jotka hajottavat ja osoittavat kaikki muuttujat.

Ratkaisu on antaa muuttujille oletusarvot, joten jos elementtejä ei ole tarpeeksi, muuttujat ottavat oletusarvot sen sijaan, että ne jäävät määrittelemättömiksi.

Vaihto

Vaihto on prosessi, jossa arvot vaihdetaan kahden tai useamman muuttujan välillä. Tavallinen tapa suorittaa vaihtaminen on joko väliaikaisen muuttujan käyttö tai XOR. JavaScriptissä sama voidaan tehdä käyttämällä uudelleenjärjestelyä.

Vaihda vaihtelevalla lämpötilalla. Koodi on itsestään selvä.

Destrukturoimalla vaihdamme vain elementtien ja Voilàn sijainnin! Vaihda valmis.

Arvojen ohittaminen

Voimme kaapata ja käyttää vain vaadittuja arvoja ja hylätä tai jättää tarpeettomat arvot huomioimatta.

Täällä voimme nähdä, että jätimme keskiarvon huomiotta jättämättä sitä mihinkään muuttujaan, mikä säästää meitä.

Funktion palautuksen epäsuora määritys

Täällä voimme nähdä, että funktio x palauttaa matriisin. Rivillä 4, missä me tuhoamme, tarjoamme funktiokutsun, joka palauttaa matriisin eikä suoraan taulukon. Se tekee koodista siistin, helposti luettavan ja ymmärrettävän.

Määritys uusille muuttujille

Ominaisuudet voidaan purkaa objektista ja määrittää muuttujalle, jolla on eri nimi kuin objekti-ominaisuudella.

Voimme nähdä, että ominaisuuksien arvot ovat myös muuttujia, joille arvot määritetään tuhoamalla.

Sisäkkäisten esineiden ja taulukon tuhoaminen

Kuten voimme nähdä, kyseinen data on objekti, jolla on ominaisuus, jota kutsutaan sijainniksi, joka puolestaan ​​sisältää taulukon, jonka elementit ovat objekteja.

Hajottamalla meidän on saatava kaikkien objektien sisällä olevien ominaisuuksien arvot sijaintiryhmän sisällä.

Joten loimme objektin nimeltä obj, joka sisältää saman rakenteen kuin dataobjekti, ja purettavat arvot toimitetaan muuttujina (mylatitude, mylongitude, mycity). Nämä puolestaan ​​rinnastetaan datasarjaan (sama kuin aikaisempi destruktion syntaksit). Kun muuttujat tulostetaan, saamme vastaavat arvot.

Uudelleenjärjestely for-of-silmukalla

Yllä olevassa koodinpätkässä meillä on joukko ihmisiä, joiden ominaisuudet puolestaan ​​sisältävät objektin (ihmiset> esine> perhe). Nyt haluamme purkaa osan arvoista objektista käyttämällä for..of -silmukkaa.

Silmukassa olemme määrittäneet objektimuuttujan, jolla on sama rakenne kuin ihmiset-taulukossa, ohittaen arvot, joita emme tarvitse. Olemme määrittäneet muuttujat n & m vastaavasti nimelle ja äidin ominaisuuksille, koska nämä ovat arvot, jotka haluamme purkaa. Silmukan sisällä tulostamme muuttujat ja saamme tarvittavat arvot.

Kokonaiskuva.

Sinun on käytettävä koodin destrukturointia tai harjoiteltava sitä saadaksesi oikean kuvan. Se näyttää yksinkertaiselta esimerkeissä, koska esimerkkien tarkoituksena on vain saada sinut ymmärtämään perusteet. Monimutkaisilla / useilla operaatioilla (vähennä ()!) Purku voi hämmentyä nopeasti, mitä emme halua!

Lisäksi saatat ajatella, että uudelleenjärjestely on vain sokerisyntaksi tehtäväryhmän suorittamiselle (kuten voimme antaa muuttujille arvon jokaisesta matriisin elementistä käyttämällä for-silmukkaa). Jossakin määrin voimme sanoa, että se on sokeria, mutta kun tarkastelemme laajempaa kuvaa "The Big Picture", saamme selville, miksi uudelleenjärjestelyllä on enemmän arvoa kuin vain koodin minimoija.

JavaScriptillä on monia toimintoja sekä tietojen purkamiseen että tietojen rakentamiseen, mutta ne kaikki toimivat yhdellä elementillä kerrallaan.

Rakentamiseen

Uuttamiseen (edelleen yksi kerrallaan)

Vaikka on olemassa syntaksia useiden ominaisuuksien rakentamiseen kerrallaan, mutta sitä voidaan käyttää vain määrityksen aikaan - sitä ei voida käyttää olemassa olevan objektin muuttamiseen.

Ennen ES6: n käyttöönottoa ei ollut mekanismia kaikkien tietojen keräämiseksi kerralla. Siellä tuhoutuminen on todella tullut loistamaan. Sen avulla voit purkaa objektista useita ominaisuuksia. Olemme nähneet tämän edellä olevista esimerkeistä.

Sudenkuopat

Ajattelen vain yhtä ja keskustelimme siitä:

  • Lausunnon ei pitäisi alkaa kiharalla hakasulkeella {

Johtopäätös

Yritin yksinkertaistaa tuhoamista demonstroimalla mahdollisimman monia tuhoavia käyttötapauksia. Toivon, että se teki tämän käsitteen sinulle selväksi. Nyt voit käyttää uudelleenjärjestelyä tehokkaan ja puhtaan koodin kirjoittamiseen.