Moderný JavaScript má mnoho nových funkcií, ktoré uľahčujú písanie kódu jednoduchým a štruktúrovaným spôsobom. Jednou z praktických moderných funkcií dostupných v ES6+ je deštrukcia polí a objektov.
JavaScriptové rámce ako React.js a Angular podporujú používanie tejto techniky. Preto je nevyhnutné pochopiť, o čom je deštrukcia a ako ju používať pri písaní kódu.
Čo je deštrukcia objektov a polí v JavaScripte?
Deštrukcia v JavaScripte sa týka procesu rozbaľovania hodnôt z poľa alebo objektu. Poskytuje stručnejší spôsob získavania hodnôt z polí alebo objektov bez ťažkého zdvíhania, keď vás zaujímajú jednotlivé položky poľa alebo hodnoty v objekte.
Je to užitočné aj pri spracovaní vracajúcich sa hodnôt z komplexnej funkcie alebo výrazu. Tento koncept je jedným z osvedčené postupy, ktoré by ste mali dodržiavať pri písaní kódu React.
Ako deštruktúrovať polia
Tu je vzorový kód, aby ste získali predstavu o deštrukcii poľa:
konšt arr = [1, 2];
konšt [a, b] = arr;
konzoly.log (a) // vypíše 1 na konzole
konzoly.log (b) // vypíše 2 na konzole
Tento kód používa deštrukciu na priradenie hodnôt arr—1 a 2 — k premenným a a b, resp. Toto je základný koncept deštrukcie. Na pravej strane máte pole alebo objekt a na ľavej strane rozbaľujete položky a priraďujete ich k jednotlivým premenným.
Pod kapotou JavaScript kopíruje hodnoty z arr a priradí ich k premenným na ľavej strane takto:
konšt arr = [1,2];
konšt a = arr[0];
konšt b = arr[1];
Ako vidíte, deštrukcia je stručnejší spôsob, ako to urobiť, na rozdiel od použitia zápisu objektu alebo zátvorky. Táto syntax však bude pravdepodobne užitočná pri práci so zložitými poľami alebo funkciami, ktoré vracajú polia alebo reťazce.
Skontrolujte vzorový kód nižšie:
konšt [deň, mesiac, dátum, rok, čas, časové pásmo] = Dátum().rozdeliť(' ')
// Calling Date() vráti aktuálny dátum vo formáte:
// Pondelok 20. február 2023 13:07:29 GMT+0000
konzoly.log (deň) // vytlačí po
konzoly.log (mesiac) // vytlačí feb
konzoly.log (dátum) // vytlačí 20
V tejto ukážke kódu vytvárame nový reťazec s aktuálnym dátumom volaním Dátum(). Ďalej použijeme rozdeliť (), a Metóda reťazca JavaScript, na oddelenie položiek v reťazci pomocou medzery ako oddeľovača. rozdeliť (' ') vráti pole a na priradenie hodnôt jednotlivým premenným použijeme deštrukciu.
Pamätajte, že ak vaše pole obsahuje viac položiek, ako rozbaľujete, JavaScript bude ignorovať ďalšie položky.
konšt arr = [1, 2, 3, 4];
konšt [a, b] = arr;
konzoly.log (a) // vytlačí 1
konzoly.log (b) // vytlačí 2
// hodnoty 3 a 4 nie sú priradené žiadnej premennej; sú ignorované
V tomto prípade, ak chcete uložiť zostávajúce položky do premennej, použite parameter odpočinku, ako je tento:
konšt arr = [1, 2, 3, 4];
konšt [a, b,... zvyšok] = arr;
konzoly.log (odpočinok) // vytlačí [3,4]
Niekedy vás môže nezaujímať konkrétna položka. Vzor deštrukcie JavaScriptu tiež umožňuje preskočiť určité prvky pomocou prázdnej čiarky.
konšt arr = [1, 2, 3, 4];
konšt [a,, c] = arr;
konzoly.log (c) // vytlačí 3
Vyššie uvedený kód používa prázdne miesto na ignorovanie hodnoty 2 v poli arr. Namiesto priradenia hodnoty 2 na premenlivé c, preskočí na ďalšiu položku v poli. Tiež ignoruje štvrtú hodnotu, pretože nešpecifikuje premennú, do ktorej by sa mala uložiť.
Na rozdiel od toho, ak potrebujete menej položiek, ako ich rozbaľujete, proces priradí nedefinované hodnotu pre tieto premenné navyše.
konšt arr = [1];
konšt [a, b] = arr;
konzoly.log (a) // vytlačí 1
konzoly.log (b) // vypíše nedefinované
Ak chcete zabrániť tomu, aby boli premenné nedefinované, môžete nastaviť predvolené hodnoty, ak si nie ste istí dĺžkou poľa nasledovne (priradenie predvolených hodnôt nie je podmienkou):
konšt arr = [1];
konšt [a = '10', b = 'neboli poskytnuté'] = arr;
konzoly.log (a) // vytlačí 1
konzoly.log (b) // vypíše "not provided"
Táto deštrukcia priradí hodnotu 1 na premenlivé a, čím sa prepíše jeho predvolená hodnota. Variabilné b zachová predvolenú hodnotu, pretože nie je zadaná hodnota.
Ako deštruovať objekty
Deštrukcia objektov sa až tak nelíši od polí. Jediný rozdiel je v tom, že polia sú iterovateľné a objekty nie, čo vedie k trochu odlišnému spôsobu vykonávania vecí.
Pri práci s objektmi sa premenné na ľavej strane operátora priradenia tiež inicializujú ako objekty:
konšt osoba = {názov: 'alvin', Vek: 10, výška: 1};
konšt {meno, vek, výška} = osoba;
konzoly.log (meno) // vytlačí 'Alvin'
konzoly.log (výška) // vytlačí 1
Z kódu používame názvy vlastností z osoba objekt. V objekte však nemusíte používať presné názvy vlastností. Hodnoty môžete deštruktúrovať a uložiť do rôznych názvov premenných nasledovne:
konšt osoba = {názov: 'alvin', Vek: 10, výška: 1};
konšt {názov: krstné meno, Vek: roky, výška: aktuálna výška} = osoba;
konzoly.log (firstName) // vytlačí 'Alvin'
konzoly.log (currentHeight) // vytlačí 1
Začnete zadaním hodnoty vlastnosti, ktorú chcete deštruktúrovať, a potom zadajte názov premennej, ktorý použijete na uloženie hodnoty za dvojbodkou. A ako polia, deštrukcia názvu vlastnosti, ktorý neexistuje, bude nedefinované.
Aby ste to zvládli, môžete podobne zadať predvolené hodnoty v prípade, že názov vlastnosti, ktorú chcete priradiť premennej, nie je dostupný:
konšt osoba = {názov: 'alvin', Vek: 10, výška: 1};
konšt {meno, vek, výška, poloha='celosvetovo'} = osoba;
konzoly.log (meno) // vytlačí 'Alvin'
konzoly.log (umiestnenie) // vypíše 'Celosvetovo'
Na poradí premenných na ľavej strane pri objekte nezáleží, pretože objekty ukladajú hodnoty v pároch kľúč – hodnota. Nasledujúci kód ako taký prinesie rovnaké výsledky:
konšt osoba = {názov: 'alvin', Vek: 10, výška: 1};
konšt {vek, vyska, meno} = osoba;
konzoly.log (meno) // vytlačí 'Alvin'
konzoly.log (výška) // vytlačí 1
Nakoniec, podobne ako v poliach, môžete použiť aj parameter rest na deštruktúrovanie niekoľkých hodnôt v jednej premennej, ako je to takto:
konšt osoba = {názov: 'alvin', Vek: 10, výška: 1};
konšt {meno, ...ostatok} = osoba;
konzoly.log (meno) // vytlačí 'Alvin'
konzoly.log (odpočinok) // výtlačky { vek: 10, výška: 1 }
Len si všimnite, že parameter odpočinku musí byť vždy posledný. V opačnom prípade JavaScript vyvolá výnimku.
Zlepšite kvalitu svojho kódu pomocou deštrukcie JavaScriptu
Moderné funkcie Javascriptu, ako je deštrukcia, vám umožňujú písať vysoko čitateľný kód. Pomocou deštrukcie môžete rýchlo rozbaliť hodnoty z polí a objektov. Deštrukcia sa môže ukázať ako užitočná aj v iných situáciách, ako je napríklad výmena hodnôt dvoch premenných. Dúfajme, že teraz chápete, čo znamená deštrukcia v JavaScripte, a môžete ho použiť pri písaní kódu.