Šiuolaikinis „JavaScript“ turi daug naujų funkcijų, kurios palengvina kodo rašymą paprastai ir struktūriškai. Viena iš patogių šiuolaikinių ES6+ funkcijų yra masyvo ir objektų naikinimas.
„JavaScript“ sistemos, tokios kaip „React.js“ ir „Angular“, skatina naudoti šią techniką. Taigi labai svarbu suprasti, kas yra naikinimas ir kaip jį naudoti rašant kodą.
Kas yra „JavaScript“ objektų ir masyvų naikinimas?
„JavaScript“ naikinimas reiškia verčių išpakavimą iš masyvo arba objekto. Tai glaustesnis būdas gauti vertes iš masyvų ar objektų be didelių pastangų, kai domitės atskirais masyvo elementais arba objekto reikšmėmis.
Tai taip pat naudinga apdorojant grąžinamas reikšmes iš sudėtingos funkcijos ar išraiškos. Ši koncepcija yra viena iš geriausia praktika, kurios turėtumėte laikytis rašydami „React“ kodą.
Kaip sunaikinti masyvus
Pateikiame kodo pavyzdį, kad pajustumėte masyvo naikinimo pojūtį:
konst arr = [1, 2];
konst [a, b] = arr;
konsolė.log (a) // spausdina 1 konsolėje
konsolė.log (b) // konsolėje spausdina 2
Šis kodas naudoja destruktūrizavimą, kad priskirtų reikšmes iš arr–1 ir 2 – kintamiesiems a ir b, atitinkamai. Tai yra pagrindinė naikinimo koncepcija. Dešinėje pusėje yra masyvas arba objektas, o kairėje išpakuojate elementus ir priskiriate juos atskiriems kintamiesiems.
Po gaubtu JavaScript kopijuoja reikšmes iš arr ir priskiria juos kintamiesiems kairėje pusėje taip:
konst arr = [1,2];
konst a = arr[0];
konst b = arr[1];
Kaip matote, naikinimas yra glaustesnis būdas tai padaryti, skirtingai nei naudojant objekto ar skliaustų žymėjimą. Tačiau ši sintaksė greičiausiai bus naudinga dirbant su sudėtingais masyvais arba funkcijomis, kurios grąžina masyvus ar eilutes.
Patikrinkite toliau pateiktą pavyzdinį kodą:
konst [diena, mėnuo, data, metai, laikas, laiko juosta] = Data().split(' ')
// Calling Date() grąžina dabartinę datą tokiu formatu:
// 2023 m. vasario 20 d., pirmadienis, 13:07:29 GMT+0000
konsolė.log (diena) // spausdina pirmad
konsolė.log (mėnuo) // spausdina vasario mėn
konsolė.log (data) // spausdina 20
Šiame kodo pavyzdyje skambindami sukuriame naują eilutę su dabartine data Data(). Toliau mes naudojame padalinti (), a „JavaScript“ eilutės metodas, norėdami atskirti elementus eilutėje naudodami tarpą kaip skirtuką. padalinti ('') grąžina masyvą, o mes naudojame naikinimą, kad priskirtume reikšmes atskiriems kintamiesiems.
Atminkite, kad jei jūsų masyve yra daugiau elementų, nei išpakuojate, „JavaScript“ nepaisys papildomų elementų.
konst arr = [1, 2, 3, 4];
konst [a, b] = arr;
konsolė.log (a) // spausdina 1
konsolė.log (b) // spausdina 2
// reikšmės 3 ir 4 nepriskiriamos jokiam kintamajam; jie ignoruojami
Tokiu atveju, jei norite išsaugoti likusius elementus kintamajame, naudokite poilsio parametrą, pavyzdžiui:
konst arr = [1, 2, 3, 4];
konst [a, b, ...poilsis] = arr;
konsolė.log (poilsis) // spausdina [3,4]
Kartais jums gali nerūpėti konkretus daiktas. „JavaScript“ naikinimo modelis taip pat leidžia praleisti tam tikrus elementus, naudojant tuščią kablelį.
konst arr = [1, 2, 3, 4];
konst [a,, c] = arr;
konsolė.log (c) // spausdina 3
Aukščiau pateiktame kode naudojama tuščia vieta, kad nepaisytų reikšmės 2 masyve arr. Užuot priskyręs vertę 2 į kintamąjį c, jis pereina prie kito masyvo elemento. Ji taip pat nepaiso ketvirtosios reikšmės, nes nenurodo kintamojo, kuriame ji būtų saugoma.
Priešingai, jei jums reikia mažiau prekių nei išpakuojate, procesas priskirs neapibrėžtas vertę tiems papildomiems kintamiesiems.
konst arr = [1];
konst [a, b] = arr;
konsolė.log (a) // spausdina 1
konsolė.log (b) // spausdina neapibrėžta
Kad kintamieji nebūtų neapibrėžti, galite nustatyti numatytąsias reikšmes, jei nesate tikri dėl masyvo ilgio, kaip nurodyta toliau (numatytųjų verčių priskyrimas nėra būtinas):
konst arr = [1];
konst [a = '10', b = 'nepateikta'] = arr;
konsolė.log (a) // spausdina 1
konsolė.log (b) // spausdina "nepateikta"
Šis destruktūrizavimas priskiria vertę 1 į kintamąjį a, perrašant numatytąją reikšmę. Kintamasis b išlaiko numatytuosius nustatymus, nes nepateikiama reikšmė.
Kaip sunaikinti objektus
Objektų naikinimas ne taip skiriasi nuo masyvų. Vienintelis skirtumas yra tas, kad masyvus galima kartoti, o objektus – ne, todėl viskas atliekama šiek tiek kitaip.
Kai dirbate su objektais, kairėje priskyrimo operatoriaus pusėje esantys kintamieji taip pat inicijuojami kaip objektai:
konst asmuo = {vardas: "Alvinas", amžiaus: 10, aukščio: 1};
konst {vardas, amžius, ūgis} = asmuo;
konsolė.log (vardas) // spausdina "Alvin"
konsolė.log (aukštis) // spausdina 1
Pagal kodą naudojame nuosavybės pavadinimus iš asmuo objektas. Tačiau objekte nebūtina naudoti tikslių savybių pavadinimų. Galite sunaikinti ir saugoti reikšmes skirtingais kintamųjų pavadinimais taip:
konst asmuo = {vardas: "Alvinas", amžiaus: 10, aukščio: 1};
konst {vardas: Pirmas vardas, amžiaus: metai, aukščio: currentHeight} = asmuo;
konsolė.log (vardas) // spausdina "Alvin"
konsolė.log (currentHeight) // spausdina 1
Pirmiausia nurodykite nuosavybės reikšmę, kurią norite sunaikinti, tada nurodykite kintamojo pavadinimą, kurį naudosite reikšmei saugoti po dvitaškio. Ir kaip masyvai, taip ir neegzistuojančio nuosavybės pavadinimo sunaikinimas neapibrėžtas.
Norėdami tai padaryti, galite panašiai nurodyti numatytąsias reikšmes, jei ypatybės pavadinimas, kurį norite priskirti kintamajam, nepasiekiamas:
konst asmuo = {vardas: "Alvinas", amžiaus: 10, aukščio: 1};
konst {vardas, amžius, ūgis, vieta="Visame pasaulyje"} = asmuo;
konsolė.log (vardas) // spausdina "Alvin"
konsolė.log (vieta) // spausdina "Worldwide"
Kintamųjų tvarka kairėje objekto pusėje neturi reikšmės, nes objektai reikšmes saugo raktų ir reikšmių porose. Taigi šis kodas duos tuos pačius rezultatus:
konst asmuo = {vardas: "Alvinas", amžiaus: 10, aukščio: 1};
konst {amžius, ūgis, vardas} = asmuo;
konsolė.log (vardas) // spausdina "Alvin"
konsolė.log (aukštis) // spausdina 1
Galiausiai, panašiai kaip masyvai, taip pat galite naudoti poilsio parametrą, norėdami sunaikinti kelias reikšmes viename kintamajame, pavyzdžiui:
konst asmuo = {vardas: "Alvinas", amžiaus: 10, aukščio: 1};
konst {vardas, ...poilsis} = asmuo;
konsolė.log (vardas) // spausdina "Alvin"
konsolė.log (poilsis) // spaudiniai { amžius: 10, ūgis: 1}
Tiesiog atkreipkite dėmesį, kad poilsio parametras visada turi būti paskutinis. Priešingu atveju „JavaScript“ padarys išimtį.
Pagerinkite kodo kokybę naudodami „JavaScript“ naikinimą
Šiuolaikinės „Javascript“ funkcijos, pvz., naikinimas, leidžia rašyti gerai skaitomą kodą. Naudodami naikinimą galite greitai išpakuoti reikšmes iš masyvų ir objektų. Destruktūrizavimas taip pat gali būti naudingas kitose situacijose, pavyzdžiui, keičiant dviejų kintamųjų reikšmes. Tikimės, kad dabar suprantate, ką reiškia „JavaScript“ naikinimas, ir galėsite jį naudoti rašydami kodą.