Moderni JavaScript ima mnogo novih značajki koje olakšavaju pisanje koda na jednostavan i strukturiran način. Jedna od zgodnih modernih značajki dostupnih u ES6+ je destrukturiranje polja i objekata.
JavaScript okviri poput React.js i Angular potiču korištenje ove tehnike. Stoga je bitno razumjeti što je destrukturiranje i kako ga koristiti tijekom pisanja koda.
Što je destrukturiranje objekata i polja u JavaScriptu?
Destrukturiranje u JavaScriptu odnosi se na proces raspakiranja vrijednosti iz niza ili objekta. Omogućuje sažetiji način dobivanja vrijednosti iz nizova ili objekata bez teškog podizanja kada ste zainteresirani za pojedinačne stavke niza ili vrijednosti u objektu.
Također je korisno pri obradi povratnih vrijednosti iz složene funkcije ili izraza. Ovaj koncept je jedan od najbolje prakse koje biste trebali slijediti dok pišete React kod.
Kako destrukturirati nizove
Evo primjera koda da biste dobili osjećaj destrukturiranja niza:
konst arr = [1, 2];
konst [a, b] = arr;
konzola.log (a) // ispisuje 1 na konzoli
konzola.log (b) // ispisuje 2 na konzoli
Ovaj kod koristi destrukturiranje za dodjelu vrijednosti iz arr—1 i 2—na varijable a i b, odnosno. Ovo je temeljni koncept koji stoji iza destrukturiranja. Na desnoj strani imate niz ili objekt, a na lijevoj strani raspakirate stavke i dodjeljujete ih pojedinačnim varijablama.
Ispod haube, JavaScript kopira vrijednosti iz arr i dodjeljuje ih varijablama na lijevoj strani ovako:
konst arr = [1,2];
konst a = arr[0];
konst b = arr[1];
Kao što vidite, destrukturiranje je koncizniji način za to, za razliku od korištenja notacije objekta ili zagrade. Međutim, ova će sintaksa vjerojatno biti korisna pri radu sa složenim nizovima ili funkcijama koje vraćaju nizove ili nizove.
Provjerite primjer koda u nastavku:
konst [dan, mjesec, datum, godina, vrijeme, vremenska zona] = Datum().podjela(' ')
// Pozivanje Date() vraća trenutni datum u formatu:
// Pon, 20. veljače 2023. 13:07:29 GMT+0000
konzola.log (dan) // ispisuje pon
konzola.log (mjesec) // ispisuje velj
konzola.log (datum) // ispisuje 20
U ovom primjeru koda stvaramo novi niz s trenutnim datumom pozivanjem Datum(). Dalje, koristimo podjela(), a JavaScript string metoda, za odvajanje stavki u nizu koristeći razmak kao razdjelnik. podjela(' ') vraća niz, a mi koristimo destrukturiranje za dodjelu vrijednosti pojedinačnim varijablama.
Imajte na umu da ako vaš niz sadrži više stavki nego što ih raspakirate, JavaScript će zanemariti dodatne stavke.
konst arr = [1, 2, 3, 4];
konst [a, b] = arr;
konzola.log (a) // ispisuje 1
konzola.log (b) // ispisuje 2
// vrijednosti 3 i 4 nisu dodijeljene nijednoj varijabli; ignoriraju se
U ovom slučaju, ako želite pohraniti preostale stavke u varijablu, upotrijebite rest parametar ovako:
konst arr = [1, 2, 3, 4];
konst [a, b, ...odmor] = arr;
konzola.log (ostatak) // ispisuje [3,4]
Ponekad vam možda nije stalo do određene stavke. JavaScriptov uzorak destrukturiranja također vam omogućuje da preskočite određene elemente korištenjem praznog zareza.
konst arr = [1, 2, 3, 4];
konst [a,, c] = arr;
konzola.log (c) // ispisuje 3
Gornji kod koristi prazan prostor za zanemarivanje vrijednosti 2 u nizu arr. Umjesto pripisivanja vrijednosti 2 na varijablu c, preskače na sljedeću stavku u nizu. Također zanemaruje četvrtu vrijednost jer ne specificira varijablu u koju bi je pohranila.
Nasuprot tome, ako trebate manje stavki nego što ih raspakirate, proces će dodijeliti nedefiniran vrijednost tim dodatnim varijablama.
konst arr = [1];
konst [a, b] = arr;
konzola.log (a) // ispisuje 1
konzola.log (b) // ispisuje nedefinirano
Kako biste spriječili da varijable budu nedefinirane, možete postaviti zadane vrijednosti ako niste sigurni u duljinu niza na sljedeći način (dodjeljivanje zadanih vrijednosti nije uvjet):
konst arr = [1];
konst [a = '10', b = 'nije osigurano'] = arr;
konzola.log (a) // ispisuje 1
konzola.log (b) // ispisuje "nije navedeno"
Ovo destrukturiranje dodjeljuje vrijednost 1 na varijablu a, prepisujući njegovu zadanu vrijednost. Varijabilna b zadržava zadanu vrijednost jer vrijednost nije navedena.
Kako uništiti objekte
Destrukturiranje objekata nije toliko različito od nizova. Jedina je razlika u tome što se nizovi mogu ponavljati, a objekti nisu, što rezultira malo drugačijim načinom obavljanja stvari.
Kada radite s objektima, varijable na lijevoj strani operatora dodjele također se inicijaliziraju kao objekti:
konst osoba = {Ime: 'Alvin', dob: 10, visina: 1};
konst {ime, dob, visina} = osoba;
konzola.log (ime) // ispisuje 'Alvin'
konzola.log (visina) // ispisuje 1
Iz koda koristimo nazive svojstava iz osoba objekt. Međutim, ne morate koristiti točne nazive svojstava u objektu. Možete destrukturirati i pohraniti vrijednosti u različitim imenima varijabli na sljedeći način:
konst osoba = {Ime: 'Alvin', dob: 10, visina: 1};
konst {Ime: ime, dob: godine, visina: trenutna visina} = osoba;
konzola.log (ime) // ispisuje 'Alvin'
konzola.log (trenutna visina) // ispisuje 1
Počinjete određivanjem vrijednosti svojstva koje želite destrukturirati, a zatim nakon dvotočke navodite naziv varijable koju ćete koristiti za pohranjivanje vrijednosti. I kao nizovi, destrukturiranje naziva svojstva koje ne postoji bit će nedefiniran.
Da biste to riješili, na sličan način možete odrediti zadane vrijednosti u slučaju da naziv svojstva koji želite dodijeliti varijabli nije dostupan:
konst osoba = {Ime: 'Alvin', dob: 10, visina: 1};
konst {ime, dob, visina, lokacija='U cijelom svijetu'} = osoba;
konzola.log (ime) // ispisuje 'Alvin'
konzola.log (lokacija) // ispisuje 'Worldwide'
Redoslijed varijabli na lijevoj strani nije bitan za objekt budući da objekti pohranjuju vrijednosti u parovima ključ-vrijednost. Kao takav, sljedeći kod će dati iste rezultate:
konst osoba = {Ime: 'Alvin', dob: 10, visina: 1};
konst {dob, visina, ime} = osoba;
konzola.log (ime) // ispisuje 'Alvin'
konzola.log (visina) // ispisuje 1
Na kraju, slično nizovima, također možete koristiti parametar rest za destrukturiranje nekoliko vrijednosti u jednoj varijabli na sljedeći način:
konst osoba = {Ime: 'Alvin', dob: 10, visina: 1};
konst {ime, ...odmor} = osoba;
konzola.log (ime) // ispisuje 'Alvin'
konzola.log (ostatak) // ispisuje { dob: 10, visina: 1 }
Imajte na umu da parametar rest uvijek mora biti zadnji. U suprotnom, JavaScript će izbaciti iznimku.
Poboljšajte kvalitetu svog koda s destrukturiranjem JavaScripta
Moderne značajke Javascripta, poput destrukturiranja, omogućuju vam pisanje vrlo čitljivog koda. Pomoću destrukturiranja možete brzo raspakirati vrijednosti iz nizova i objekata. Destrukturiranje se također može pokazati korisnim u drugim situacijama, poput zamjene vrijednosti dviju varijabli. Nadamo se da sada razumijete što destrukturiranje znači u JavaScriptu i da ga možete koristiti dok pišete kod.