Kaasaegsel JavaScriptil on palju uusi funktsioone, mis muudavad koodi lihtsa ja struktureeritud kirjutamise lihtsaks. Üks ES6+ käepäraseid kaasaegseid funktsioone on massiivi ja objektide struktureerimine.
JavaScripti raamistikud, nagu React.js ja Angular, julgustavad seda tehnikat kasutama. Seega on oluline mõista, mida destruktureerimine endast kujutab ja kuidas seda koodi kirjutamisel kasutada.
Mis on objektide ja massiivide struktureerimine JavaScriptis?
Destruktureerimine JavaScriptis viitab massiivist või objektist väärtuste lahtipakkimise protsessile. See pakub ülevaatlikuma viisi massiividest või objektidest väärtuste hankimiseks ilma raske tõstmiseta, kui olete huvitatud massiivi üksikutest üksustest või väärtustest objektis.
See on abiks ka keeruka funktsiooni või avaldise tagastatavate väärtuste töötlemisel. See kontseptsioon on üks parimad tavad, mida peaksite Reacti koodi kirjutamisel järgima.
Kuidas massiive hävitada
Siin on näidiskood, et saada aimu massiivi hävitamisest:
konst arr = [1, 2];
konst [a, b] = arr;
konsool.log (a) // prindib konsoolile 1
konsool.log (b) // prindib konsoolile 2
See kood kasutab väärtuste määramiseks destruktureerimist arr—1 ja 2—muutujatele a ja b, vastavalt. See on destruktureerimise põhikontseptsioon. Paremal küljel on massiiv või objekt ning te pakite üksused lahti ja määrate need vasakul küljel üksikutele muutujatele.
Kapoti all kopeerib JavaScript väärtused arr ja määrab need vasakul asuvatele muutujatele järgmiselt:
konst arr = [1,2];
konst a = arr[0];
konst b = arr[1];
Nagu näete, on destruktureerimine selle tegemiseks kokkuvõtlikum viis, erinevalt objekti või sulgmärgi kasutamisest. See süntaks on aga tõenäoliselt kasulik, kui töötate keerukate massiivide või funktsioonidega, mis tagastavad massiive või stringe.
Kontrollige allolevat näidiskoodi:
konst [päev, kuu, kuupäev, aasta, kellaaeg, ajavöönd] = Kuupäev().split(' ')
// Calling Date() tagastab praeguse kuupäeva järgmises vormingus:
// Esmaspäev, 20. veebruar 2023, 13:07:29 GMT+0000
konsool.log (päev) // prindib esmasp
konsool.log (kuu) // prindib veebr
konsool.log (kuupäev) // prindib 20
Selles koodinäidises loome uue stringi praeguse kuupäevaga helistades Kuupäev(). Järgmisena kasutame split (), a JavaScripti stringi meetod, et eraldada stringis olevad üksused, kasutades eraldajana tühikut. split('') tagastab massiivi ja me kasutame üksikutele muutujatele väärtuste määramiseks struktureerimist.
Pidage meeles, et kui teie massiiv sisaldab rohkem üksusi, kui te lahti pakite, ignoreerib JavaScript lisaüksusi.
konst arr = [1, 2, 3, 4];
konst [a, b] = arr;
konsool.log (a) // prindib 1
konsool.log (b) // prindib 2
// väärtusi 3 ja 4 ei omistata ühelegi muutujale; neid ignoreeritakse
Sel juhul, kui soovite salvestada ülejäänud üksused muutujasse, kasutage puhkeparameetrit, näiteks:
konst arr = [1, 2, 3, 4];
konst [a, b,... ülejäänud] = arr;
konsool.log (ülejäänud) // prindib [3,4]
Mõnikord ei pruugi te konkreetsest esemest hoolida. JavaScripti destruktureerimismuster võimaldab ka teatud elemendid vahele jätta, kasutades tühja koma.
konst arr = [1, 2, 3, 4];
konst [a,, c] = arr;
konsool.log (c) // prindib 3
Ülaltoodud kood kasutab väärtuse ignoreerimiseks tühja ruumi 2 massiivi arr. Selle asemel, et omistada väärtust 2 muutujale c, liigub see massiivi järgmise üksuse juurde. Samuti ignoreerib see neljandat väärtust, kuna see ei määra muutujat selle salvestamiseks.
Seevastu kui vajate vähem üksusi kui lahti pakkite, määrab protsess selle määratlemata väärtus nendele lisamuutujatele.
konst arr = [1];
konst [a, b] = arr;
konsool.log (a) // prindib 1
konsool.log (b) // prindib määramata
Muutujate määratlemata jätmise vältimiseks saate määrata vaikeväärtused, kui te pole massiivi pikkuses kindel, järgmiselt (vaikeväärtuste määramine ei ole nõue):
konst arr = [1];
konst [a = '10', b = 'ei ole tagatud'] = arr;
konsool.log (a) // prindib 1
konsool.log (b) // prindib "pole esitatud"
See destruktureerimine määrab väärtuse 1 muutujale a, kirjutades selle vaikeväärtuse üle. Muutuv b säilitab vaikeväärtuse, kuna väärtust ei pakuta.
Kuidas objekte hävitada
Objektide destruktureerimine ei erine massiividest nii palju. Ainus erinevus seisneb selles, et massiivid on itereeritavad ja objektid mitte, mille tulemuseks on veidi erinev toimimisviis.
Objektidega töötamisel lähtestatakse ka määramisoperaatori vasakpoolses servas olevad muutujad nagu objektid:
konst inimene = {nimi: "Alvin", vanus: 10, kõrgus: 1};
konst {nimi, vanus, pikkus} = inimene;
konsool.log (nimi) // prindib 'Alvin'
konsool.log (kõrgus) // prindib 1
Koodis kasutame atribuutide nimesid isik objektiks. Siiski ei pea te objektil kasutama täpseid atribuutide nimesid. Saate struktureerida ja salvestada väärtusi erinevate muutujate nimedes järgmiselt.
konst inimene = {nimi: "Alvin", vanus: 10, kõrgus: 1};
konst {nimi: eesnimi, vanus: aastat, kõrgus: praegune Kõrgus} = inimene;
konsool.log (eesnimi) // prindib 'Alvin'
konsool.log (praegune kõrgus) // prindib 1
Alustuseks määrate atribuudi väärtuse, mida soovite hävitada, seejärel määrake muutuja nimi, mida kasutate väärtuse salvestamiseks pärast koolonit. Ja nagu massiivid, hävitatakse ka atribuudi nimi, mida pole olemas määratlemata.
Selle käsitlemiseks saate samamoodi määrata vaikeväärtused juhuks, kui atribuudi nimi, mida soovite muutujale määrata, pole saadaval:
konst inimene = {nimi: "Alvin", vanus: 10, kõrgus: 1};
konst {nimi, vanus, pikkus, asukoht="ülemaailmne"} = inimene;
konsool.log (nimi) // prindib 'Alvin'
konsool.log (asukoht) // prindib 'Worldwide'
Vasakul olevate muutujate järjekord ei ole objekti puhul oluline, kuna objektid salvestavad väärtused võtme-väärtuste paaridesse. Sellisena annab järgmine kood samu tulemusi:
konst inimene = {nimi: "Alvin", vanus: 10, kõrgus: 1};
konst {vanus, pikkus, nimi} = inimene;
konsool.log (nimi) // prindib 'Alvin'
konsool.log (kõrgus) // prindib 1
Lõpuks saate sarnaselt massiividele kasutada ka ülejäänud parameetrit, et hävitada mitu väärtust ühes muutujas, näiteks:
konst inimene = {nimi: "Alvin", vanus: 10, kõrgus: 1};
konst {nimi,... ülejäänud} = inimene;
konsool.log (nimi) // prindib 'Alvin'
konsool.log (ülejäänud) // prindib { vanus: 10, pikkus: 1 }
Pange tähele, et ülejäänud parameeter peab alati olema viimane. Vastasel juhul teeb JavaScript erandi.
Parandage oma koodi kvaliteeti JavaScripti destruktureerimisega
Javascripti kaasaegsed funktsioonid, nagu destruktureerimine, võimaldavad teil kirjutada hästi loetavat koodi. Destruktureerimise abil saate kiiresti väärtusi massiividest ja objektidest lahti pakkida. Destruktureerimine võib osutuda kasulikuks ka muudes olukordades, näiteks kahe muutuja väärtuste vahetamisel. Loodetavasti saate nüüd aru, mida JavaScriptis hävitamine tähendab, ja saate seda koodi kirjutamise ajal kasutada.