Kā izmantot destrukturēšanu JavaScript, lai uzrakstītu tīrāku, jaudīgāku kodu

Dažreiz jums ir jāiznīcina, lai izveidotu kaut ko jaunu. -Mistborn: laikmetu varonis

ES6 iepazīstināja mūs ar vienu no gaidītākajām JavaScript funkcijām: pārstrukturēšanu. Kā jēdziens, pārstrukturēšana nav jauna vai revolucionāra, un dažās valodās pārstrukturēšana (??) jau bija sen. Bet tā bija ļoti vajadzīga un pieprasīta JavaScript funkcija.

Pārstrukturēšana ir struktūras sadalīšanas process. Programmēšanas kontekstā struktūras ir datu struktūras, un šo datu struktūru pārstrukturēšana nozīmē atsevišķu vērtību izpakošanu no datu struktūras. JavaScript valodā objektam vai masīvam var piemērot strukturēšanu.

Pārstrukturēšana padara, salauž visu ... kāda mums no tā noder ??

Pirms atbildēsim uz šo jautājumu, pieņemsim oficiālu definīciju pārstrukturēšanai. MDN glābšanai!

Destrukturēšanas uzdevums Sintakse ir JavaScript izteiksme, kas ļauj izkravāt vērtībām no masīviem, vai īpašumu no priekšmetiem, uz atšķirīgiem mainīgajiem. -MDN

Apskatīsim dažus piemērus, lai labāk izprastu pārstrukturēšanas pamatus.

Masīvi

1. paraugs:

Kad es pirmo reizi ieraudzīju šo vienkāršo koda fragmentu, es biju neizpratnē. Es nesapratu, kas notika. Ja jūs esat tāds kā es, ļaujiet man mēģināt paskaidrot.

1. rindā mēs definējam 2 mainīgos aun b. Nākamajā rindā abi mainīgie atrodas masīva iekšpusē kreisajā pusē, kas savukārt tiek pielīdzināts faktiskajam masīvam braucamās puses pusē. Turpmākajās rindiņās mēs izdrukājam a& vērtības bun iegūstam attiecīgi 7 un 8, kas bija elementi RHS masīvā. Maģiju, kas notiek 2. rindā, sauc par iznīcināšanu.

LHS sagrauj RHS, un vērtības, kas iegūtas, izsaiņojot elementus, mainīgajiem tiek piešķirtas secībā.

Bet kāpēc LHS atrodas masīva iekšienē ???

Destrukturēšanas uzdevumā LHS salīdzinājumā ar RHS tiek izmantota līdzīga sintakse, lai definētu, kuras vērtības izpakot no iegūtā mainīgā.

2. paraugs:

leftoutTagad mēs kodā esam ieviesuši vēl vienu mainīgo . Mums ir 2 dažādi leftoutkoda izmantošanas veidi.

  • [a,b,leftout]-> Tas piešķir trešo masīva elementu to left, kā paredzēts.
  • [a,b,…leftout]-> Tas dod pirmās 2 vērtības attiecīgi toaa ndb, un pārējā masīva daļa tiek piešķirta he leftomainīgajam t ut.

Risinājums slēpjas operatorā. Šis operators visus pārējos argumentus ( atlikušos ) sapulcē vienā masīvā. Pēdējā punktā pirmie 2 masīva elementi tiek piešķirti attiecīgi a& b, un pārējie argumenti tiek sakļauti masīvā (pārstrukturēšana varbūt ??) un piešķir leftoutmainīgajam. To pašu mēs varam pārbaudīt, aplūkojot produkciju.

Objekti

1. paraugs:

Pārstrukturēšana darbojas vienādi gan objektu, gan masīvu gadījumā. Ar LHS objekts ir īpašības, aun b, kas ir piešķirti attiecīgi īpašībām aun bno RHS objektu. Mēs attiecīgi iegūstam 1 un 2, tos izdrukājot.

Viena lieta, kas jāievēro ( ja jums ir ), ir tāda, ka sintakse nedaudz mainās ( tagad jums ir ).

Objektu iznīcināšanas procesā visa LHS un RHS tiek iesaiņota iekšpusē ( )

Mēs varam redzēt kļūdu, kuru mēs saņemam, kad to neaptinam. ().Tajā teikts, ka ir gaidāma paziņojuma deklarācija.

Patiesībā notiek tas, ka kaut ko ievietojot cirtainās iekavās, {}JavaScript tiek sajaukts, tāpēc tas to uzskata par bloku, nevis objektu. Sakarā ar to tā meklē deklarāciju blokam ( funkciju deklarācija ), tāpēc kodu pievienojam (). Tas padara to par izteiksmi, nevis bloku, un mēs iegūstam savus rezultātus.

2. paraugs:

Atkal restoperators. Darbojas tāpat kā masīvos, izņemot to, ka šoreiz pārējās vērtības tiek sakļautas objekta iekšienē, jo izmantojamo struktūru nosaka LHS.

Kāpēc tiek izmantota pārstrukturēšana?

Kā redzams no iepriekš minētajiem piemēriem, tagad mēs zinām, cik svarīga ir pārstrukturēšana. Ir daudz lietojumu un dažādi gadījumi, kā iznīcināšanu var izmantot gan objektiem, gan masīviem. Mēs izmēģināsim dažus no tiem. ( PS - piemēri ir derīgi gan objektiem, gan masīviem, ja vien nav norādīts citādi. )

Mainīgs uzdevums

Iepriekš redzamajos piemēros mēs jau redzējām, kā mainīgie tiek piešķirti, tāpēc apskatīsim citu.

Šajā piemērā jau izveidots masīvs tiek tieši piešķirts pārstrukturēšanai. Tomēr vērtības tiek piešķirtas mainīgajiem.

Tas pats attiecas uz objektu.

Noklusējuma vērtības

Dažreiz var gadīties, ka mēs definējam nmainīgo skaitu, lai iegūtu vērtības no pārstrukturēšanas, bet masīvā / objektā var būt tikai n-xelementi. Šajā gadījumā xtiks piešķirti mainīgie undefined.

Mēs varam redzēt, ka tas bnav definēts, jo masīvā vienkārši nav tik daudz elementu, lai strukturētu un piešķirtu katru mainīgo.

Risinājums ir dot mainīgajiem noklusējuma vērtības, tādēļ, ja elementu nav pietiekami daudz, mainīgie ņem noklusējuma vērtības, nevis paliek nedefinēti.

Maiņa

Mainīšana ir vērtību apmaiņas process starp diviem vai vairākiem mainīgajiem. Standarta maiņas veikšanas veids ir vai nu pagaidu mainīgā izmantošana, vai XOR izmantošana. JavaScript to pašu var izdarīt, izmantojot pārstrukturēšanu.

Mainīt, izmantojot mainīgu temp. Kods nav pašsaprotams.

Izmantojot destrukturēšanu, mēs vienkārši mainām elementu un Voilà pozīciju! Maiņa izdarīta.

Vērtību ignorēšana

Mēs varam uztvert un izmantot tikai nepieciešamās vērtības un noraidīt vai ignorēt nevajadzīgās vērtības.

Šeit mēs varam redzēt, ka mēs ignorējām vidējo vērtību, nepiešķirot to nevienam mainīgajam, tādējādi ietaupot mums nepatikšanas.

Netieša funkcijas atdeves piešķiršana

Šeit mēs varam redzēt, ka funkcija x atgriež masīvu. 4. līnijā, kur mēs strukturējam, mēs nodrošinām funkciju izsaukumu, kas atgriež masīvu, nevis tieši masīvu. Tas padara kodu kārtīgu, viegli lasāmu un saprotamu.

Piešķiršana jauniem mainīgajiem

Rekvizītus var izpakot no objekta un piešķirt mainīgajam ar citu nosaukumu nekā objekta rekvizīts.

Mēs varam redzēt, ka īpašību vērtības ir arī mainīgie, kuriem vērtības tiek piešķirtas, pārstrukturējot.

Ligzdotu objektu un masīvu iznīcināšana

Kā redzam, šie dati ir objekts, kuram ir rekvizīts, ko sauc par atrašanās vietu, kas savukārt satur masīvu, kura elementi ir objekti.

Pārstrukturējot, mums jāsaņem visu īpašību vērtības, kas atrodas objektā lokācijas masīva iekšpusē.

Tāpēc mēs izveidojām objektu ar nosaukumu obj, kas satur tādu pašu struktūru kā datu objekts, un vērtības, kuras mēs vēlamies izpakot, sniedz kā mainīgos (mylatitude, mylongitude, mycity). Tie savukārt tiek pielīdzināti datu masīvam (tas pats, kas iepriekš bija strukturēšanas sintakse). Kad mainīgie tiek izdrukāti, mēs iegūstam attiecīgās vērtības.

Pārstrukturēšana, izmantojot for-of loop

Iepriekš minētajā koda fragmentā mums ir objektu masīvs cilvēkiem, kuru rekvizītos savukārt ir objekts (cilvēki> objekts> ģimene). Tagad mēs vēlamies izpakot dažas objekta vērtības, izmantojot for..of loop.

Cilpā mēs esam piešķīruši objekta mainīgo ar tādu pašu struktūru kā masīvā people, ignorējot mums nevajadzīgās vērtības. Vārdam un mātes īpašībām mēs esam piešķīruši mainīgos n & m, jo ​​šīs ir vērtības, kuras mēs vēlamies izpakot. Cilpas iekšpusē mēs izdrukājam mainīgos un iegūstam nepieciešamās vērtības.

Lielais attēls.

Jums ir jāizmanto destrukturēšana savā kodā vai jāpielieto tā, lai faktiski to saķertu. Piemēros tas šķiet vienkārši, jo piemēri ir tikai tāpēc, lai jūs saprastu pamatus. Veicot sarežģītas / vairākas darbības (samaziniet ()!), Pārstrukturēšana var ātri sajaukt, ko mēs nevēlamies!

Turklāt jūs varētu domāt, ka pārstrukturēšana ir tikai cukura sintakse, veicot uzdevumu kopu (piemēram, mēs varam piešķirt mainīgajiem katra masīva elementa vērtību, izmantojot for loop). Zināmā mērā mēs varam teikt, ka tas ir cukurs, bet, aplūkojot plašāku attēlu "The Big Picture", mēs uzzināsim, kāpēc pārstrukturēšanai ir lielāka vērtība nekā tikai koda minimizētājs.

JavaScript ir daudz darbību gan datu iegūšanai, gan konstruēšanai, taču tās visas vienlaikus darbojas ar vienu elementu.

Par konstruēšanu

Iegūšanai (joprojām pa vienam)

Lai gan vairāku rekvizītu konstruēšanai vienlaikus ir sintakse, taču to var izmantot tikai piešķiršanas laikā - to nevar izmantot, lai mainītu esošu objektu.

Pirms ES6 ieviešanas nebija mehānisma visu datu iegūšanai vienlaikus. Tur tiešām ir spīdējusi pārstrukturēšana. Tas ļauj no objekta iegūt vairākas īpašības. Mēs to redzējām iepriekš minētajos piemēros.

Kļūdas

Es varu iedomāties tikai vienu, un mēs to apspriedām:

  • Paziņojums nedrīkst sākties ar cirtainu iekavu {

Secinājums

Es mēģināju vienkāršot iznīcināšanu, parādot pēc iespējas vairāk destruktīvas izmantošanas gadījumu. Es ceru, ka tas jums šo jēdzienu padarīja skaidru. Tagad jūs varat izmantot pārstrukturēšanu, lai ierakstītu spēcīgu un tīru kodu.