Sodobni JavaScript ima veliko novih funkcij, ki olajšajo pisanje kode na preprost in strukturiran način. Ena od priročnih sodobnih funkcij, ki so na voljo v ES6+, je destrukturiranje nizov in objektov.
Ogrodja JavaScript, kot sta React.js in Angular, spodbujajo uporabo te tehnike. Zato je bistveno razumeti, kaj je destrukturiranje in kako ga uporabljati med pisanjem kode.
Kaj je destrukturiranje objektov in matrik v JavaScriptu?
Destrukturiranje v JavaScriptu se nanaša na postopek razpakiranja vrednosti iz matrike ali predmeta. Zagotavlja bolj jedrnat način pridobivanja vrednosti iz nizov ali predmetov brez težkega dvigovanja, ko vas zanimajo posamezni elementi niza ali vrednosti v objektu.
Prav tako je v pomoč pri obdelavi vrnjenih vrednosti iz kompleksne funkcije ali izraza. Ta koncept je eden od najboljše prakse, ki jih morate upoštevati pri pisanju kode React.
Kako uničiti nize
Tukaj je vzorčna koda, da dobite občutek destrukturiranja niza:
konst arr = [1, 2];
konst [a, b] = arr;
konzola.log (a) // natisne 1 na konzolo
konzola.log (b) // natisne 2 na konzolo
Ta koda uporablja destrukturiranje za dodelitev vrednosti iz prir—1 in 2—na spremenljivke a in b, oz. To je temeljni koncept destrukturiranja. Na desni strani imate niz ali predmet, na levi strani pa razpakirate elemente in jih dodelite posameznim spremenljivkam.
Pod pokrovom JavaScript kopira vrednosti iz prir in jih dodeli spremenljivkam na levi strani takole:
konst arr = [1,2];
konst a = arr[0];
konst b = arr[1];
Kot lahko vidite, je destrukturiranje bolj jedrnat način za to, za razliko od uporabe zapisa predmeta ali oklepaja. Vendar bo ta sintaksa verjetno uporabna pri delu s kompleksnimi nizi ali funkcijami, ki vračajo nize ali nize.
Preverite spodnjo vzorčno kodo:
konst [dan, mesec, datum, leto, čas, časovni pas] = Datum().split(' ')
// Klic Date() vrne trenutni datum v formatu:
// Pon, 20. februar 2023 13:07:29 GMT+0000
konzola.log (dan) // natisne pon
konzola.log (mesec) // natisne feb
konzola.log (datum) // natisne 20
V tem vzorcu kode s klicem ustvarjamo nov niz s trenutnim datumom datum(). Nato uporabimo razdeli (), a Metoda niza JavaScript, da ločite elemente v nizu s presledkom kot ločilom. razdeli(' ') vrne matriko, mi pa z destrukturiranjem dodelimo vrednosti posameznim spremenljivkam.
Ne pozabite, da če vaša matrika vsebuje več elementov, kot jih razpakirate, bo JavaScript prezrl dodatne elemente.
konst arr = [1, 2, 3, 4];
konst [a, b] = arr;
konzola.log (a) // natisne 1
konzola.log (b) // natisne 2
// vrednosti 3 in 4 nista dodeljeni nobeni spremenljivki; so prezrti
V tem primeru, če želite preostale elemente shraniti v spremenljivko, uporabite parameter rest tako:
konst arr = [1, 2, 3, 4];
konst [a, b,... počitek] = arr;
konzola.log (ostanek) // natisne [3,4]
Včasih vam morda ni mar za določen predmet. Vzorec destrukturiranja JavaScripta omogoča tudi preskok določenih elementov z uporabo prazne vejice.
konst arr = [1, 2, 3, 4];
konst [a,, c] = arr;
konzola.log (c) // natisne 3
Zgornja koda uporablja prazen prostor, da prezre vrednost 2 v nizu prir. Namesto pripisovanja vrednosti 2 na spremenljivko c, preskoči na naslednji element v nizu. Prav tako prezre četrto vrednost, ker ne podaja spremenljivke, v katero bi jo shranila.
V nasprotju s tem, če potrebujete manj elementov, kot jih razpakirate, bo postopek dodelil nedoločeno vrednosti teh dodatnih spremenljivk.
konst arr = [1];
konst [a, b] = arr;
konzola.log (a) // natisne 1
konzola.log (b) // natisne nedefinirano
Če želite preprečiti, da spremenljivke ostanejo nedefinirane, lahko nastavite privzete vrednosti, če niste prepričani o dolžini niza, kot sledi (dodeljevanje privzetih vrednosti ni zahteva):
konst arr = [1];
konst [a = '10', b = 'ni zagotovljeno'] = arr;
konzola.log (a) // natisne 1
konzola.log (b) // natisne "ni na voljo"
To destrukturiranje pripisuje vrednost 1 na spremenljivko a, pri čemer prepiše svojo privzeto vrednost. Spremenljivka b ohrani privzeto vrednost, ker vrednost ni podana.
Kako uničiti predmete
Destrukturiranje objektov se ne razlikuje tako od nizov. Edina razlika je v tem, da so nizi ponovljivi, objekti pa ne, kar ima za posledico nekoliko drugačen način dela.
Pri delu s predmeti se spremenljivke na levi strani operatorja dodelitve prav tako inicializirajo kot objekti:
konst oseba = {ime: 'Alvin', starost: 10, višina: 1};
konst {ime, starost, višina} = oseba;
konzola.log (ime) // natisne 'Alvin'
konzola.log (višina) // natisne 1
Iz kode uporabljamo imena lastnosti iz oseba predmet. Vendar vam v predmetu ni treba uporabiti natančnih imen lastnosti. Vrednosti v različnih imenih spremenljivk lahko uničite in shranite na naslednji način:
konst oseba = {ime: 'Alvin', starost: 10, višina: 1};
konst {ime: ime, starost: leta, višina: trenutna višina} = oseba;
konzola.log (ime) // natisne 'Alvin'
konzola.log (trenutna višina) // natisne 1
Začnete z določitvijo vrednosti lastnosti, ki jo želite destrukturirati, nato pa za dvopičjem določite ime spremenljivke, ki jo boste uporabili za shranjevanje vrednosti. In tako kot nizi, bo destrukturiranje imena lastnosti, ki ne obstaja nedoločeno.
Če želite to rešiti, lahko podobno podate privzete vrednosti, če ime lastnosti, ki ga želite dodeliti spremenljivki, ni na voljo:
konst oseba = {ime: 'Alvin', starost: 10, višina: 1};
konst {ime, starost, višina, lokacija='Po vsem svetu'} = oseba;
konzola.log (ime) // natisne 'Alvin'
konzola.log (lokacija) // natisne 'Worldwide'
Vrstni red spremenljivk na levi strani pri objektu ni pomemben, saj objekti shranjujejo vrednosti v parih ključ-vrednost. Kot taka bo naslednja koda dala enake rezultate:
konst oseba = {ime: 'Alvin', starost: 10, višina: 1};
konst {starost, višina, ime} = oseba;
konzola.log (ime) // natisne 'Alvin'
konzola.log (višina) // natisne 1
Nazadnje, podobno kot pri nizih, lahko uporabite tudi parameter rest za destrukturiranje več vrednosti v eni spremenljivki takole:
konst oseba = {ime: 'Alvin', starost: 10, višina: 1};
konst {ime, ...počitek} = oseba;
konzola.log (ime) // natisne 'Alvin'
konzola.log (ostanek) // natisne { starost: 10, višina: 1 }
Upoštevajte le, da mora biti parameter rest vedno na zadnjem mestu. V nasprotnem primeru bo JavaScript vrgel izjemo.
Izboljšajte kakovost kode z destrukturiranjem JavaScripta
Sodobne funkcije Javascripta, kot je destrukturiranje, vam omogočajo pisanje zelo berljive kode. Z destrukturiranjem lahko hitro razpakirate vrednosti iz nizov in predmetov. Destrukturiranje se lahko izkaže za priročno tudi v drugih situacijah, kot je zamenjava vrednosti dveh spremenljivk. Upajmo, da zdaj razumete, kaj destrukturiranje pomeni v JavaScriptu, in ga lahko uporabljate med pisanjem kode.
