Hogyan használhatod a JavaScript-ben a destrukturálást, hogy tisztább és hatékonyabb kódot írj

Néha el kell pusztítania, hogy valami újat építsen. -Mistborn: A kor hőse

Az ES6 bemutatta nekünk az egyik legjobban várt JavaScript funkciót: a szerkezetátalakítást. Mint fogalom, a szerkezetátalakítás nem új vagy úttörő jelentőségű, és egyes nyelvekben már régen megvolt a szerkezetátalakítás (??). De ez egy nagyon szükséges és kért szolgáltatás a JavaScriptben.

A szerkezetátalakítás a szerkezet megtörésének folyamata. A programozás összefüggésében a struktúrák az adatstruktúrák, és ezeknek az adatstruktúráknak a megsemmisítése azt jelenti, hogy az egyes értékeket kicsomagoljuk az adatszerkezetről. A JavaScript-ben a szerkezetátalakítás alkalmazható egy objektumra vagy egy tömbre.

A szerkezetátalakítás bármit megtör,… mi hasznunk van rá ??

Mielőtt válaszolna erre a kérdésre, legyen egy hivatalos definíció a szerkezetátalakításról. MDN a megmentéshez!

A romboló hozzárendelési szintaxis egy olyan JavaScript kifejezés, amely lehetővé teszi az értékek tömbökből, vagy az objektumok tulajdonságait külön változókba csomagolhatja. -MDN

Nézzünk meg néhány példát, hogy jobban megértsük a szerkezetátalakítás alapjait.

Tömbök

1. minta:

Amikor először láttam ezt az egyszerű kóddarabot, értetlen voltam. Nem értettem, ami történt. Ha olyan vagy, mint voltam, hadd próbáljam meg elmagyarázni.

Az 1. sorban 2 változót aés b. A következő sorban mindkét változó egy tömb belsejében található a bal oldalon, ami viszont egyenlő a tényleges tömbvel a menet kéz oldalán. A következő sorokban kinyomtatjuk a a& értékét, és b7-et, illetve 8-at kapunk, amelyek az RHS tömb elemei voltak. A 2. sorban bekövetkező varázslatot destruktívnak nevezzük.

Az LHS tönkreteszi az RHS-t, és az elemek kicsomagolásával nyert értékeket sorrendben rendeljük hozzá a változókhoz.

De miért van az LHS egy tömbben ???

A destrukturáló hozzárendelés hasonló szintaxist használ az LHS-n, mint az RHS, hogy meghatározza, milyen értékeket kell kicsomagolni a forrásból származó változóból.

2. minta:

Itt most egy másik változót vezettünk leftoutbe a kódba. 2 különböző típusú felhasználása leftoutvan a kódban.

  • [a,b,leftout]-> Ez rendezi a tömb harmadik elemét a to leftvárakozásoknak megfelelően.
  • [a,b,…leftout]-> Ez megadja az első 2 értéket toaa ndb, és a tömb többi részét hozzárendelik a t he leftout változóhoz.

A megoldás a kezelőben rejlik . Ez az operátor összegyűjti az összes fennmaradó argumentumot ( többi ) egy tömbbe. Ez utóbbi pontban az első 2 tömb elemet hozzárendelik a a& brendhez, és a többi argumentumot összegyűjtik egy tömbgé (szerkezetátalakítás talán ??) és hozzárendelik a leftoutváltozóhoz. Ugyanezt ellenőrizhetjük a kimenet megnézésével.

Tárgyak

1. minta:

A szerkezetátalakítás ugyanúgy működik objektumok és tömbök esetében is. Az objektum a LHS tulajdonságai a& bkészítmények, amelyeket rendre a tulajdonságait aés ba RHS objektumot. Nyomtatással 1, illetve 2-et kapunk.

Egy dolgot észre kell venni ( ha van ), hogy a szintaxisban van egy kis változás ( most megvan ).

Az objektum roncsolásakor az egész LHS és RHS be van csomagolva ( )

Láthatjuk a hibát, amelyet akkor kapunk, amikor nem csomagoljuk bele. ().Azt mondja, hogy a nyilatkozat várható.

Valójában az történik, hogy valami göndör zárójelbe {}zárása összekeveri a JavaScriptet, így blokknak és nem objektumnak tekinti. Ennek következtében deklarációt keres a blokkhoz ( függvény deklaráció ), ezért a kódot belefoglaljuk (). Ez inkább kifejezés, mint blokk teszi, és megkapjuk az eredményeinket.

2. minta:

Ismét a restkezelő. A tömbökhöz hasonlóan működik, kivéve, hogy ezúttal a többi érték összeesik egy objektumon belül, mert a használni kívánt struktúrát az LHS határozza meg.

Mire használják a szerkezetátalakítást?

Amint a fenti példákból látható, most már tudjuk a szerkezetátalakítás fontosságát. Nagyon sokféle felhasználás és különböző eset van arra vonatkozóan, hogy a destruktúrát hogyan lehet használni mind az objektumok, mind a tömbök esetében. Néhányat kipróbálunk. ( PS - a példák mind objektumokra, mind tömbökre érvényesek, hacsak másképp nem említjük. )

Változó hozzárendelés

A fenti példákban már láttuk a változók hozzárendelését, ezért nézzünk meg egy másikat.

Ebben a példában a már létrehozott tömböt közvetlenül hozzárendelik a destruktúrához. Az értékeket ennek ellenére hozzárendelik a változókhoz.

Ugyanez vonatkozik az Object-re is.

Alapértelmezett értékek

Néha előfordulhat, hogy na változók számát definiáljuk , hogy értékeket kapjunk a destrukcióból, de a tömbben / objektumban csak n-xelemek lehetnek. Ebben az esetben xváltozókat rendelünk hozzá undefined.

Láthatjuk, hogy ez bnem definiált, mert a tömbnek egyszerűen nincs annyi eleme, hogy minden változót felépítsen és hozzárendeljen.

Ennek megoldása az, hogy alapértelmezett értékeket adunk a változóknak, tehát ha nincs elég elem, akkor a változók alapértelmezett értékeket vesznek fel, nem pedig meghatározatlanok.

Csere

A csere az értékek két vagy több változó közötti cseréje. A csere elvégzésének szokásos módja egy ideiglenes változó vagy az XOR használata. A JavaScript-ben ugyanez elvégezhető a szerkezetátalakítással.

Cserélje változó hőmérsékleten. A kód magától értetődő.

A szerkezetátalakítással csak felcseréljük az elemek és a Voilà pozícióját! Csere kész.

Az értékek figyelmen kívül hagyása

Csak azokat az értékeket rögzíthetjük és használhatjuk, amelyekre szükség van, és elutasíthatjuk vagy figyelmen kívül hagyhatjuk a felesleges értékeket.

Itt láthatjuk, hogy figyelmen kívül hagytuk a középső értéket azzal, hogy nem rendeltük hozzá egyetlen változóhoz sem, ezzel megspórolva a fáradságot.

A függvény visszatérésének közvetett hozzárendelése

Itt láthatjuk, hogy az x függvény egy tömböt ad vissza. A 4. sorban, ahol felépítjük, megadjuk a függvényhívást, amely a tömböt adja vissza, és nem közvetlenül a tömböt. Tisztává, könnyen olvashatóvá és érthetővé teszi a kódot.

Hozzárendelés új változókhoz

A tulajdonságok kicsomagolhatók egy objektumból és hozzárendelhetők az objektum tulajdonságától eltérő névvel rendelkező változóhoz.

Láthatjuk, hogy a tulajdonságok értékei olyan változók is, amelyekhez az értékeket destrukturálás útján rendeljük hozzá.

Beágyazott objektum és tömb rombolása

Mint láthatjuk, ezek az adatok egy objektum, amelynek van egy tulajdonságának nevezett helye, amely viszont tartalmaz egy tömböt, amelynek elemei objektumok.

A szerkezetátalakítással meg kell kapnunk az objektumon belül található összes tulajdonság értékét a helytömbön belül.

Ezért létrehoztunk egy objektum nevű objektumot, amely ugyanazt a struktúrát tartalmazza, mint az adatobjektum, és a kicsomagolni kívánt értékeket változóként adjuk meg (mylatitude, mylongitude, mycity). Ezeket viszont megegyezik az adattömbökkel (ugyanaz, mint az előzőekben a szétválasztó szintaxis). A változók kinyomtatásakor megkapjuk a megfelelő értékeket.

Szerkezetátalakítás for-ciklus segítségével

A fenti kódrészletben olyan objektumokból álló emberek tömbje található, amelyek tulajdonságai viszont tartalmaznak egy objektumot (emberek> objektum> család). Most a for..of ciklus használatával szeretnénk kicsomagolni néhány értéket az objektumból.

A ciklusban hozzárendeltünk egy objektumváltozót, ugyanazzal a felépítéssel, mint a People tömbben, figyelmen kívül hagyva a nem szükséges értékeket. Az n & m változókat rendeltük a névhez és az anyatulajdonságokhoz, mert ezeket az értékeket szeretnénk kicsomagolni. A hurok belsejében kinyomtatjuk a változókat, és megkapjuk a szükséges értékeket.

A nagy kép.

A kódban destrukturálást kell használnia, vagy gyakorolnia kell, hogy valóban leragadjon. A példákban egyszerűnek tűnik, mert a példák csak az alapok megértésére szolgálnak. Bonyolult / több művelettel (csökkentse ()!) A szétválasztás gyorsan összezavarodhat, amit nem akarunk!

Sőt, azt is gondolhatja, hogy a szerkezetátalakítás csak cukorszintaxis egy feladatsor végrehajtásához (például adhatunk a változóknak egy tömb minden elemének értékét egy for ciklus segítségével). Bizonyos mértékig mondhatjuk, hogy cukor, de ha megnézzük a „The Big Picture” tágabb képet, akkor megtudjuk, miért van több értelme a pusztításnak, mint pusztán egy kódminimalizáló.

A JavaScript számos művelettel rendelkezik mind az adatok kinyerésére, mind az adatok összeállítására, de mindegyik egyszerre csak egy elemen működik.

A konstrukcióhoz

Kivonáshoz (még mindig egyenként)

Bár létezik szintaxis több tulajdonság egyidejű létrehozására, de csak a hozzárendeléskor használható - nem használható meglévő objektum megváltoztatására.

Az ES6 bevezetése előtt nem volt mechanizmus az összes adat egyszerre történő kinyerésére. Ott robbant ki igazán a szerkezetátalakítás. Ez lehetővé teszi több tulajdonság kinyerését egy objektumból. Láttuk ezt a fenti példákban.

Buktatók

Csak egy jut eszembe, és megbeszéltük:

  • A kijelentés nem kezdődhet göndör zárójelben {

Következtetés

Megpróbáltam egyszerűsíteni a roncsolást azzal, hogy bemutattam a lehető legtöbb romboló felhasználási esetet. Remélem, világossá tette ezt a koncepciót számodra. Most roncsolással használhatja a hatékony és tiszta kódot.