Nykyaikaisessa JavaScriptissä on monia uusia ominaisuuksia, jotka tekevät koodin kirjoittamisesta helppoa yksinkertaisella ja jäsennellyllä tavalla. Yksi ES6+:n kätevistä moderneista ominaisuuksista on taulukoiden ja objektien tuhoaminen.
JavaScript-kehykset, kuten React.js ja Angular, rohkaisevat käyttämään tätä tekniikkaa. Joten on tärkeää ymmärtää, mistä destructuring on kyse ja miten sitä käytetään koodia kirjoitettaessa.
Mikä on objektien ja taulukon tuhoaminen JavaScriptissä?
JavaScriptin rakenteen purkaminen viittaa arvojen purkamiseen taulukosta tai objektista. Se tarjoaa tiiviimmän tavan saada arvoja taulukoista tai objekteista ilman raskaita nostoja, kun olet kiinnostunut yksittäisistä taulukon kohteista tai arvoista objektissa.
Se on hyödyllinen myös, kun käsitellään monimutkaisen funktion tai lausekkeen palauttavia arvoja. Tämä käsite on yksi parhaita käytäntöjä, joita sinun tulee noudattaa kirjoittaessasi React-koodia.
Kuinka tuhota taulukoita
Tässä on esimerkkikoodi, jonka avulla saat käsityksen taulukon tuhoamisesta:
konst arr = [1, 2];
konst [a, b] = arr;
konsoli.log (a) // tulostaa 1:n konsoliin
konsoli.log (b) // tulostaa 2 konsoliin
Tämä koodi käyttää destructuring arvojen määrittämiseen arr—1 ja 2—muuttujiin a ja b, vastaavasti. Tämä on tuhoamisen taustalla oleva peruskäsite. Sinulla on matriisi tai objekti oikealla puolella, ja purat kohteet ja määrität ne yksittäisiin muuttujiin vasemmalla puolella.
Kotelon alla JavaScript kopioi arvot kohteesta arr ja määrittää ne vasemman puolen muuttujiin seuraavasti:
konst arr = [1,2];
konst a = arr[0];
konst b = arr[1];
Kuten näet, destrukturointi on ytimekkäämpi tapa tehdä tämä, toisin kuin objektin tai hakasulkeiden merkinnän käyttäminen. Tämä syntaksi on kuitenkin todennäköisesti hyödyllinen, kun työskentelet monimutkaisten taulukoiden tai funktioiden kanssa, jotka palauttavat taulukoita tai merkkijonoja.
Tarkista alla oleva esimerkkikoodi:
konst [päivä, kuukausi, päivämäärä, vuosi, aika, aikavyöhyke] = Päivämäärä().jakaa(' ')
// Calling Date() palauttaa nykyisen päivämäärän muodossa:
// Ma 20.2.2023 13:07:29 GMT+0000
konsoli.log (päivä) // tulostaa ma
konsoli.log (kuukausi) // tulostaa helmikuuta
konsoli.log (päivämäärä) // tulostaa 20
Tässä koodiesimerkissä luomme uuden merkkijonon nykyisellä päivämäärällä soittamalla Päivämäärä(). Seuraavaksi käytämme jakaa(), a JavaScript-merkkijonomenetelmä, erotellaksesi merkkijonon kohteet käyttämällä välilyöntiä erottimena. split('') palauttaa taulukon, ja määritämme arvot yksittäisille muuttujille rakenteen muuttamisen avulla.
Muista, että jos matriisi sisältää enemmän kohteita kuin purat, JavaScript ohittaa ylimääräiset kohteet.
konst arr = [1, 2, 3, 4];
konst [a, b] = arr;
konsoli.log (a) // tulostaa 1
konsoli.log (b) // tulostaa 2
// arvoja 3 ja 4 ei ole määritetty millekään muuttujalle; ne jätetään huomiotta
Tässä tapauksessa, jos haluat tallentaa loput kohteet muuttujaan, käytä lepoparametria seuraavasti:
konst arr = [1, 2, 3, 4];
konst [a, b, ...lepo] = arr;
konsoli.log (loppu) // tulostaa [3,4]
Joskus et ehkä välitä tietystä tuotteesta. JavaScriptin tuhoava kuvio mahdollistaa myös tiettyjen elementtien ohituksen käyttämällä tyhjää pilkkua.
konst arr = [1, 2, 3, 4];
konst [a,, c] = arr;
konsoli.log (c) // tulostaa 3
Yllä oleva koodi käyttää tyhjää tilaa ohittaakseen arvon 2 taulukossa arr. Arvon antamisen sijaan 2 muuttuvaan c, se hyppää taulukon seuraavaan kohteeseen. Se jättää huomioimatta myös neljännen arvon, koska se ei määritä muuttujaa, johon se tallennetaan.
Sitä vastoin, jos tarvitset vähemmän kohteita kuin purat, prosessi määrittää määrittelemätön arvo näille ylimääräisille muuttujille.
konst arr = [1];
konst [a, b] = arr;
konsoli.log (a) // tulostaa 1
konsoli.log (b) // tulostaa määrittelemättömänä
Jotta muuttujat eivät jää määrittämättömiksi, voit asettaa oletusarvot, jos et ole varma taulukon pituudesta, seuraavasti (oletusarvojen määrittäminen ei ole vaatimus):
konst arr = [1];
konst [a = '10', b = 'ei sisälly'] = arr;
konsoli.log (a) // tulostaa 1
konsoli.log (b) // tulostaa "ei toimitettu"
Tämä rakennemuutos määrittää arvon 1 muuttuvaan a, korvaa sen oletusarvon. Muuttuva b säilyttää oletuksensa, koska arvoa ei anneta.
Kuinka tuhota esineitä
Objektien tuhoaminen ei eroa niin paljon taulukoista. Ainoa ero on, että taulukot ovat iteroitavissa ja objektit eivät, mikä johtaa hieman erilaiseen tapaan tehdä asioita.
Objektien kanssa työskennellessä myös määritysoperaattorin vasemmalla puolella olevat muuttujat alustetaan kuten objektit:
konst henkilö = {nimi: "Alvin", ikä: 10, korkeus: 1};
konst {nimi, ikä, pituus} = henkilö;
konsoli.log (nimi) // tulostaa 'Alvin'
konsoli.log (korkeus) // tulostaa 1
Koodissa käytämme kiinteistöjen nimiä henkilö esine. Sinun ei kuitenkaan tarvitse käyttää objektissa tarkkoja ominaisuuksien nimiä. Voit tuhota ja tallentaa arvot eri muuttujien nimiin seuraavasti:
konst henkilö = {nimi: "Alvin", ikä: 10, korkeus: 1};
konst {nimi: etunimi, ikä: vuotta, korkeus: currentHeight} = henkilö;
konsoli.log (etunimi) // tulostaa 'Alvin'
konsoli.log (currentHeight) // tulostaa 1
Aloitat määrittämällä ominaisuusarvon, jonka haluat tuhota, ja määritä sitten muuttujan nimi, jota käytät arvon tallentamiseen kaksoispisteen jälkeen. Ja kuten matriiseja, myös sellaisen ominaisuuden nimen tuhoaminen, jota ei ole olemassa määrittelemätön.
Voit hoitaa tämän määrittämällä vastaavasti oletusarvot siltä varalta, että muuttujalle määritettävä ominaisuuden nimi ei ole käytettävissä:
konst henkilö = {nimi: "Alvin", ikä: 10, korkeus: 1};
konst {nimi, ikä, pituus, sijainti='Maailmanlaajuinen'} = henkilö;
konsoli.log (nimi) // tulostaa 'Alvin'
konsoli.log (sijainti) // tulostaa 'Worldwide'
Muuttujien järjestyksellä vasemmalla ei ole väliä objektin kanssa, koska objektit tallentavat arvot avain-arvo-pareina. Sellaisenaan seuraava koodi antaa samat tulokset:
konst henkilö = {nimi: "Alvin", ikä: 10, korkeus: 1};
konst {ikä, pituus, nimi} = henkilö;
konsoli.log (nimi) // tulostaa 'Alvin'
konsoli.log (korkeus) // tulostaa 1
Lopuksi, kuten taulukoita, voit myös käyttää rest-parametria useiden arvojen rakenteen tuhoamiseen yhdessä muuttujassa, kuten:
konst henkilö = {nimi: "Alvin", ikä: 10, korkeus: 1};
konst {nimi, ...loppu} = henkilö;
konsoli.log (nimi) // tulostaa 'Alvin'
konsoli.log (loppu) // tulostaa { ikä: 10, pituus: 1 }
Huomaa vain, että lopun parametrin on aina oltava viimeinen. Muuten JavaScript tekee poikkeuksen.
Paranna koodisi laatua JavaScriptin rakenteen muuttamisella
Javascriptin nykyaikaiset ominaisuudet, kuten rakenteen tuhoaminen, mahdollistavat erittäin luettavan koodin kirjoittamisen. Destructuringin avulla voit nopeasti purkaa arvot taulukoista ja objekteista. Rakennemuutos voi osoittautua käteväksi myös muissa tilanteissa, kuten kahden muuttujan arvojen vaihtamisessa. Toivottavasti ymmärrät nyt mitä tuhoaminen tarkoittaa JavaScriptissä, ja voit käyttää sitä koodia kirjoittaessasi.