Ako používať deštrukturalizáciu v JavaScripte na napísanie čistejšieho a výkonnejšieho kódu

-Niekedy musíte zničiť, aby ste postavili niečo nové.-Mistborn: The Hero of Ages

ES6 nám predstavil jednu z najočakávanejších funkcií JavaScriptu: deštrukturalizáciu. Pojem „deštrukturalizácia“ nie je nijako nový alebo prelomový a niektoré jazyky už mali deštrukturalizáciu (??) dávno predtým. Ale bola to veľmi potrebná a požadovaná funkcia v JavaScripte.

Deštrukturalizácia je proces narušenia štruktúry. V rámci programovania sú štruktúrami dátové štruktúry a zničenie týchto dátových štruktúr znamená vybalenie jednotlivých hodnôt z dátovej štruktúry. V JavaScripte je možné deštrukturalizáciu použiť na objekt alebo pole.

Deštrukturalizácia robí, rozbíja čokoľvek ... aké to máme využitie ??

Predtým, ako odpovieme na túto otázku, poďme mať formálnu definíciu pojmu deštrukturalizácia. MDN na záchranu!

Štruktúry priradenie syntax je výraz JavaScript, ktorý umožňuje rozbaliť hodnoty z poľa, alebo vlastnosti z objektov, do rôznych premenných. -MDN

Pozrime sa na niekoľko príkladov, aby sme lepšie pochopili základy deštrukcie.

Polia

Ukážka 1:

Keď som prvýkrát uvidel tento jednoduchý kúsok kódu, bol som zmätený. Nedostal som, čo sa stalo. Ak ste ako ja, dovoľte mi to vysvetliť.

V riadku 1 definujeme 2 premenné aa b. V nasledujúcom riadku sú obe premenné vo vnútri poľa na ľavej strane, ktoré sa zase rovná skutočnému poľu na strane jazdnej ruky. V nasledujúcich riadkoch vytlačíme hodnoty a& ba dostaneme 7 a 8, ktoré boli prvkami v poli RHS. Kúzlo odohrávajúce sa v rade 2 sa nazýva deštruktívne.

LHS deštruuje RHS a hodnoty získané rozbalením prvkov sú priradené premenným v poradí.

Ale prečo je LHS v poli ???

Priradenie deštrukturalizácie používa podobnú syntax na LHS v porovnaní s RHS na definovanie, ktoré hodnoty sa majú vybaliť z premennej zdroja.

Ukážka 2:

Tu sme teraz zaviedli leftoutdo kódu ďalšiu premennú . V leftoutkóde máme 2 rôzne typy použitia .

  • [a,b,leftout]-> Týmto to leftsa podľa očakávania priradí tretí prvok v poli .
  • [a,b,…leftout]-> Toto dáva prvé 2 hodnoty toaa ndb a zvyšok poľa je priradený k he leftopremennej t ut.

Riešenie spočíva v obsluhe. Tento operátor zbalí všetky zostávajúce argumenty ( zvyšok ) do jedného poľa. V druhom bode sú prvé 2 prvky poľa priradené k a& brespektíve a zvyšok argumentov je zbalený do poľa (možno reštrukturalizácia ??) a priradený k leftoutpremennej. To isté môžeme overiť pri pohľade na výstup.

Predmety

Ukážka 1:

Deštrukturalizácia funguje rovnako pre objekt aj pole. Objekt v LHS má vlastnosti a&, bktoré sú priradené k vlastnostiam a& bobjektu RHS. Ich vytlačením dostaneme 1, respektíve 2.

Jedna vec, ktorú si musíte všimnúť ( ak máte ) je, že došlo k miernej zmene syntaxe ( teraz máte ).

Pri deštrukturalizácii objektov sú všetky LHS a RHS zabalené dovnútra ( )

Vidíme chybu, ktorú dostaneme, keď ju zabalíme dovnútra. ().Očakáva sa vyhlásenie o vyhlásení.

To, čo sa v skutočnosti deje, je to, že uzavretie niečoho do zložených zátvoriek {}zamieňa JavaScript, takže to považuje za blok a nie za objekt. Z tohto dôvodu hľadá deklaráciu pre blok ( deklaráciu funkcie ), takže kód priložíme k nej (). Vďaka tomu je výraz skôr ako blok a dostávame svoje výsledky.

Ukážka 2:

Opäť restoperátor. Funguje rovnako ako v poliach, ibaže tentoraz sú zvyšné hodnoty zbalené vo vnútri objektu, pretože štruktúru, ktorú treba použiť, definuje LHS.

Na čo sa používa deštrukturalizácia?

Ako je zrejmé z vyššie uvedených príkladov, teraz vieme, aké dôležité je ničenie. Existuje veľa použití a rôzne prípady, ako je možné použiť deštrukturalizáciu pre objekty aj polia. Niektoré z nich vyskúšame. ( PS - príklady platia pre objekty aj polia, pokiaľ nie je uvedené inak. )

Variabilné priradenie

Ako sme priraďovali premenné, už sme videli vo vyššie uvedených príkladoch, poďme sa teda pozrieť na iný.

V tomto príklade je už vytvorené pole priamo priradené na deštrukciu. Napriek tomu sú hodnotám priradené hodnoty.

To isté platí pre Objekt.

Základné hodnoty

Niekedy sa môže stať, že definujeme npočet premenných, aby sme získali hodnoty z deštrukcie, ale pole / objekt môže mať iba n-xprvky. V takom prípade xbudú priradené premenné undefined.

Vidíme, že bto nie je definované, pretože pole jednoducho nemá toľko prvkov na deštrukciu a priradenie každej premennej.

Riešením je dať predvoleným hodnotám premenné, takže ak nie je dostatok prvkov, premenné namiesto nich nedefinujú pôvodné hodnoty.

Zámena

Zamieňanie je proces zámeny hodnôt medzi 2 alebo viacerými premennými. Štandardným spôsobom výmeny je použitie dočasnej premennej alebo použitie XOR. V JavaScripte to isté možno urobiť pomocou deštrukturalizácie.

Zamieňajte pomocou variabilnej teploty. Kód je samozrejmý.

Pomocou deštrukturalizácie iba zameníme polohu prvkov a Voilà! Výmena hotová.

Ignorovanie hodnôt

Môžeme zachytiť a použiť iba požadované hodnoty a nepotrebné hodnoty odmietnuť alebo ignorovať.

Tu vidíme, že sme strednú hodnotu ignorovali tak, že sme ju nepriradili k žiadnej premennej, čo nám ušetrí ťažkosti.

Nepriame priradenie návratu funkcie

Tu vidíme, že funkcia x vráti pole. Na riadku 4, kde zničíme, poskytujeme volanie funkcie, ktoré vracia pole a nie pole priamo. Kód je upravený, ľahko čitateľný a ľahko pochopiteľný.

Priradenie k novým premenným

Vlastnosti je možné rozbaliť z objektu a priradiť ich k premennej s iným názvom, ako je vlastnosť objektu.

Vidíme, že hodnoty vlastností sú tiež premenné, ktorým sú hodnoty priradené pomocou deštrukturalizácie.

Vnorené objekty a deštrukcia poľa

Ako vidíme, tieto údaje sú objektom, ktorý má vlastnosť nazývanú umiestnenie, ktorá zase obsahuje pole, ktorého prvkami sú objekty.

Pri deštrukturalizácii musíme získať hodnoty všetkých vlastností nachádzajúcich sa vo vnútri objektu vo vnútri poľa umiestnenia.

Vytvorili sme teda objekt s názvom obj, ktorý obsahuje rovnakú štruktúru ako dátový objekt, a hodnoty, ktoré chceme rozbaliť, sú poskytované ako premenné (mylatitude, mylongitude, mycity). Tie sa zase rovnajú údajovému poľu (rovnako ako predtým deštruktívna syntax). Po vytlačení premenných dostaneme príslušné hodnoty.

Deštrukturalizácia so slučkou for-of

Vo vyššie uvedenom útržku kódu máme pole objektov people, ktorých vlastnosti zase obsahujú objekt (people> object> family). Teraz chceme rozbaliť niektoré hodnoty z objektu pomocou slučky for..of.

V cykle sme priradili objektovú premennú s rovnakou štruktúrou ako v poli people, pričom ignorujeme hodnoty, ktoré nepotrebujeme. K vlastnostiam mena a matky sme priradili premenné n & m, pretože to sú hodnoty, ktoré chceme rozbaliť. Vo vnútri slučky vytlačíme premenné a dostaneme potrebné hodnoty.

Veľký obrázok.

Aby ste sa dostali na pravú mieru, musíte vo svojom kóde použiť deštrukturalizáciu alebo ju nacvičiť. V príkladoch sa to zdá byť jednoduché, pretože príklady slúžia iba na to, aby ste pochopili základné informácie. Pri zložitých / viacerých operáciách (redukovať ()!) By mohla byť desštrukturalizácia rýchlo mätúca, čo nechceme!

Okrem toho si tiež môžete myslieť, že deštrukturalizácia je iba syntaxou cukru na vykonávanie súboru úloh (napríklad môžeme dať premenným hodnotu každého prvku z poľa pomocou slučky for). Do istej miery môžeme povedať, že ide o cukor, ale keď sa pozrieme na širší obrázok „The Big Picture“, zistíme, prečo má deštrukturalizácia väčšiu hodnotu ako len minimalizátor kódu.

JavaScript má veľa operácií na extrakciu aj na konštrukciu dát, všetky však pracujú na jednom prvku súčasne.

Na stavbu

Na vyťaženie (stále po jednom)

Existuje síce syntax na zostavenie viacerých vlastností súčasne, ale je možné ju použiť iba v čase priradenia - nemožno ju použiť na zmenu existujúceho objektu.

Pred zavedením ES6 neexistoval žiadny mechanizmus na extrahovanie všetkých údajov naraz. To je miesto, kde sa skutočne prejavilo ničenie. Umožňuje vám extrahovať z objektu viac vlastností. Videli sme to na vyššie uvedených príkladoch.

Úskalia

Existuje iba jeden, na ktorý si spomeniem a diskutovali sme o ňom:

  • Výrok by nemal začínať zloženou zátvorkou {

Záver

Snažil som sa zjednodušiť deštrukturalizáciu demonštrovaním čo najväčšieho počtu prípadov použitia deštrukturalizácie. Dúfam, že vám to objasnilo tento koncept. Teraz môžete použiť deštrukturalizáciu na napísanie výkonného a čistého kódu.