Kako koristiti destrukturiranje u JavaScript-u za pisanje čišćeg i snažnijeg koda

Ponekad morate uništiti da biste izgradili nešto novo.-Mistborn: Junak vijeka

ES6 nas je upoznao s jednom od najočekivanijih JavaScript značajki: destrukturiranjem. Kao koncept, destrukturiranje nije novo ili revolucionarno, a neki su jezici već imali destrukturiranje (??) puno prije. Ali to je bila prijeko potrebna i tražena značajka u JavaScript-u.

Destrukturiranje je postupak razbijanja strukture. U kontekstu programiranja, strukture su podatkovne strukture, a destrukturiranje tih podatkovnih struktura znači raspakiranje pojedinačnih vrijednosti iz podatkovne strukture. U JavaScriptu se destrukturiranje može primijeniti na objekt ili niz.

Destrukturiranje čini, razbija sve što ... kakva korist od toga ??

Prije nego što odgovorimo na to pitanje, imajmo formalnu definiciju Destrukturiranja. MDN u pomoć!

Zadatak destrukturirajući sintaksa je JavaScript izraz koji omogućuje da se raspakirati vrijednosti iz polja, ili svojstva od objekata, u različite varijable. -MDN

Pogledajmo neke primjere kako bismo bolje razumjeli osnove destrukturiranja.

Nizovi

Uzorak 1:

Kad sam prvi put vidio ovaj jednostavni komad koda, bio sam zbunjen. Nisam shvatio što se dogodilo. Ako ste poput mene, dopustite mi da pokušam objasniti.

U retku 1 definiramo 2 varijable ai b. U sljedećem su retku obje varijable unutar polja s lijeve strane, što je pak izjednačeno sa stvarnim nizom na strani vožnje. U sljedećim redovima ispisujemo vrijednosti a& bi dobivamo 7 odnosno 8 koji su bili elementi u RHS polju. Magija koja se događa u 2. redu naziva se destrukturiranje.

LHS destrukturira RHS i vrijednosti dobivene raspakiranjem elemenata dodjeljuju se varijablama redom.

Ali zašto je LHS unutar niza ???

Zadatak destrukturiranja koristi sličnu sintaksu na LHS-u u usporedbi s RHS-om kako bi definirao koje vrijednosti treba raspakirati iz izvorne varijable.

Uzorak 2:

Ovdje smo uveli još jednu varijablu leftoutu kod. U leftoutkodu imamo dvije različite vrste upotrebe .

  • [a,b,leftout]-> Ovo dodjeljuje treći element u polju to leftprema očekivanjima.
  • [a,b,…leftout]-> To daje prve 2 vrijednosti toaa ndb, a ostatak polja dodjeljuje se he leftovarijabli t ut.

Rješenje leži u operatoru. Ovaj operator sažima sve preostale argumente ( ostatak ) u jedan niz. U potonjoj točki, prva 2 elementa niza dodijeljena su a& b, a ostatak argumenata sažet je u niz (možda restrukturiranje ??) i dodijeljen leftoutvarijabli. To možemo provjeriti gledanjem rezultata.

Predmeti

Uzorak 1:

Destrukturiranje jednako djeluje i na objekte i na nizove. Objekt u LHS ima svojstva a& bkoja se dodjeljuju odnosno svojstva a& bRHS objekta. Dobivamo 1 i 2 njihovim ispisom.

Jedna stvar koju treba primijetiti ( ako imate ) je da je došlo do lagane promjene u sintaksi ( sada to imate ).

U objektnom destrukturiranju, cijeli LHS i RHS umotani su unutra ( )

Možemo vidjeti pogrešku koju dobijemo kad je ne umotamo u sebe ().. Kaže da se očekuje izjava izjave.

Ono što se zapravo događa jest da zatvaranje nečega u kovrčave zagrade {}zbunjuje JavaScript tako da ga smatra blokom, a ne objektom. Zbog toga traži deklaraciju za blok ( deklaracija funkcije ), pa kôd prilažemo unutar (). To ga čini izrazom, a ne blokom, i mi dobivamo svoje rezultate.

Uzorak 2:

Opet restoperater. Djeluje baš kao u nizovima, osim što su ovaj put ostale vrijednosti sažete unutar objekta jer strukturu koja se koristi definira LHS.

Čemu služi destruktura?

Kao što se vidi iz gornjih primjera, sada znamo važnost destrukturiranja. Puno je upotreba i različitih slučajeva kako se destrukturiranje može koristiti i za objekte i za nizove. Pokušat ćemo neke od njih. ( PS - primjeri vrijede i za objekte i za nizove ako nije drugačije navedeno. )

Dodjela varijable

Već smo vidjeli kako se varijable dodjeljuju u gornjim primjerima, pa pogledajmo još jednu.

U ovom primjeru već stvoreni niz izravno je dodijeljen za destrukturiranje. Vrijednosti su ipak dodijeljene varijablama.

Isto vrijedi i za Objekt.

Zadane vrijednosti

Ponekad se može dogoditi da definiramo nbroj varijabli da bismo dobili vrijednosti iz destrukturiranja, ali niz / objekt može imati samo n-xelemente. U tom xće se slučaju dodijeliti varijable undefined.

Možemo vidjeti da bje to nedefinirano jer niz jednostavno nema toliko elemenata za destrukturiranje i dodjeljivanje svake varijable.

Rješenje za to je davanje zadanih vrijednosti varijablama, pa ako nema dovoljno elemenata, varijable uzimaju zadane vrijednosti, a ne ostaju nedefinirane.

Zamjena

Zamjena je postupak izmjene vrijednosti između 2 ili više varijabli. Standardni način izvođenja zamjene je ili upotreba privremene varijable ili upotreba XOR-a. U JavaScriptu se isto može učiniti pomoću destrukturiranja.

Zamijenite pomoću varijable temp. Kôd je samorazumljiv.

Korištenjem destrukture samo mijenjamo položaj elemenata i Voilà! Zamjena gotova.

Zanemarivanje vrijednosti

Možemo uhvatiti i koristiti samo potrebne vrijednosti, a nepotrebne vrijednosti odbiti ili zanemariti.

Ovdje možemo vidjeti da smo zanemarili srednju vrijednost ne dodijelivši je bilo kojoj varijabli čime smo uštedjeli gnjavažu.

Neizravna dodjela povrata funkcije

Ovdje možemo vidjeti da funkcija x vraća niz. Na liniji 4 gdje destrukturiramo, pružamo poziv funkcije koji vraća niz, a ne polje izravno. To čini kod urednim i lakim za čitanje i razumijevanje.

Dodjela novim varijablama

Svojstva se mogu otpakirati iz objekta i dodijeliti varijabli s drugačijim imenom od svojstva objekta.

Možemo vidjeti da su vrijednosti svojstava također varijable kojima su vrijednosti dodijeljene destrukturiranjem.

Destrukturiranje ugniježđenih objekata i polja

Kao što vidimo, ti podaci su objekt koji ima svojstvo koje se naziva lokacija, a koje pak sadrži niz čiji su elementi objekti.

Destrukturiranjem moramo dobiti vrijednosti svih svojstava prisutnih unutar objekta unutar polja s lokacijama.

Tako smo stvorili objekt nazvan obj koji sadrži istu strukturu kao i podatkovni objekt, a vrijednosti koje želimo raspakirati daju se kao varijable (milatituda, moja dužina, moj grad). Oni su pak izjednačeni s nizom podataka (isto kao i sintaksa destrukturiranja prije). Kada se varijable ispišu, dobivamo odgovarajuće vrijednosti.

Destrukturiranje s for-of loop

U gornjem isječku koda imamo niz objekata ljudi čija svojstva zauzvrat sadrže objekt (ljudi> objekt> obitelj). Sada želimo raspakirati neke vrijednosti iz objekta pomoću petlje for..of.

U petlji smo dodijelili objektnu varijablu, s istom strukturom kao u polju people, zanemarujući vrijednosti koje nam nisu potrebne. Varijablama n & m dodijelili smo svojstva imena i majke, jer su to vrijednosti koje želimo raspakirati. Unutar petlje ispisujemo varijable i dobivamo potrebne vrijednosti.

Velika slika.

Morate koristiti destrukturiranje u svom kodu ili ga vježbati da biste ga zapravo uhvatili. Čini se jednostavnim u primjerima jer su primjeri samo da biste razumjeli osnove. Složenim / višestrukim operacijama (smanjite ()!) Desktrukturiranje može brzo zbuniti, što mi ne želimo!

Štoviše, možda mislite i da je destrukturiranje samo šećerna sintaksa za obavljanje skupa zadataka (poput varijablama možemo dati vrijednost svakog elementa iz niza pomoću for petlje). Do određene mjere možemo reći da je to šećer, ali kada pogledamo širu sliku 'Velika slika', shvatit ćemo zašto destrukturiranje ima veću vrijednost od pukog minimizatora koda.

JavaScript ima mnogo operacija kako za izdvajanje, tako i za konstruiranje podataka, ali sve one istovremeno rade na jednom elementu.

Za konstrukciju

Za vađenje (još uvijek jedno po jedno)

Iako postoji sintaksa za konstrukciju više svojstava odjednom, ali ona se može koristiti samo u vrijeme dodjele - ne može se koristiti za izmjenu postojećeg objekta.

Prije uvođenja ES6 nije postojao mehanizam za izdvajanje svih podataka odjednom. Tu je zaista došlo do izražaja destrukturiranje. Omogućuje vam izdvajanje više svojstava iz objekta. To smo vidjeli u gornjim primjerima.

Zamke

Jedinog se mogu sjetiti, a mi smo o njemu razgovarali:

  • Izjava ne smije započeti kovrčavom zagradom {

Zaključak

Pokušao sam pojednostaviti destrukturiranje demonstrirajući što više slučajeva upotrebe destrukturiranja. Nadam se da vam je jasno objasnio ovaj koncept. Sada možete koristiti destrukturiranje za pisanje moćnog i čistog koda.