JavaScript objektum destrukturálása

Összegzés: ebben az oktatóanyagban megismerheti a JavaScript objektum destrukturálását, amely egy objektum tulajdonságait hozzárendeli az egyes változókhoz.

ha meg szeretné tudni, hogyan kell megsemmisíteni egy tömböt, akkor nézze meg a tömb megsemmisítésének oktatóanyagát.

Bevezetés a JavaScript objektum destrukturáló hozzárendelésbe

tegyük fel, hogy van egy person objektum, amelynek két tulajdonsága van: firstNameés lastName.

Code language: JavaScript (javascript)

az ES6 előtt, amikor a person objektum tulajdonságait szeretné hozzárendelni a változókhoz, általában így kell tennie:

Code language: JavaScript (javascript)

az ES6 bemutatja az objektum destrukturáló szintaxist, amely alternatív módot kínál az objektum tulajdonságainak változókhoz rendelésére:

Code language: JavaScript (javascript)

ebben a példában a firstName és lastName tulajdonságok a fName és lName változókhoz vannak hozzárendelve.

ebben a szintaxisban:

Code language: JavaScript (javascript)

a kettőspont előtti azonosító (:) az objektum tulajdonsága, a kettőspont utáni azonosító pedig a változó.

figyeljük meg, hogy a tulajdonság neve mindig a bal oldalon, hogy ez egy objektum literal vagy objektum destructuring szintaxis.

ha a változóknak ugyanaz a neve, mint az objektum tulajdonságainak, akkor a kódot tömörebbé teheti az alábbiak szerint:

Code language: JavaScript (javascript)

ebben a példában két firstName és lastName változót deklaráltunk, és a person objektum tulajdonságait hozzárendeltük a változókhoz ugyanabban az utasításban.

lehetséges a deklaráció és a hozzárendelés elválasztása. A változókat azonban zárójelben kell körülvenni:

ha nem használja a zárójeleket, a JavaScript motor a bal oldalt blokkként értelmezi, és szintaktikai hibát dob.

amikor egy nem létező tulajdonságot rendel egy változóhoz az objektum destrukturálásával, a változó értéke undefined. Például:

Code language: JavaScript (javascript)

ebben a példában a middleName tulajdonság nem létezik a person objektumban, ezért a middleNameváltozó undefined.

alapértelmezett értékek beállítása

alapértelmezett értéket rendelhet a változóhoz, ha egy objektum tulajdonsága nem létezik. Például:

Code language: JavaScript (javascript)

ebben a példában az üres karakterláncot a middleName változóhoz rendeltük, amikor a személy objektum nem rendelkezik middleName tulajdonsággal.

ezenkívül a currentAge tulajdonságot a age változóhoz rendeljük, alapértelmezett értéke 18.

Ha azonban a személy objektum rendelkezik a middleName tulajdonsággal, a hozzárendelés a szokásos módon működik:

Code language: JavaScript (javascript)

Destructuring A null objektum

egy függvény visszaadhat egy objektumot vagy null bizonyos helyzetekben. Például:

Code language: JavaScript (javascript)

és az objektum destrukturáló hozzárendelést használja:

Code language: JavaScript (javascript)

a kód egy TypeError:

Code language: JavaScript (javascript)

ennek elkerülése érdekében használhatja a OR operátort (||), hogy a null objektumot egy üres objektumra állítsa vissza:

Code language: JavaScript (javascript)

most nem fordul elő hiba. És a firstName és lastName undefinedlesz.

beágyazott objektum destructuring

feltételezve, hogy van egy employee objektum ,amely egy name objektum, mint a tulajdonság:

Code language: JavaScript (javascript)

a következő utasítás megsemmisíti a beágyazott name objektum tulajdonságait egyedi változókká:

Code language: JavaScript (javascript)

lehetőség van egy tulajdonság többszörös hozzárendelésére több változóhoz:

Code language: JavaScript (javascript)

Destrukturáló függvény argumentumok

tegyük fel, hogy van olyan függvénye, amely megjeleníti a személy objektumot:

Code language: JavaScript (javascript)

a függvénybe átadott objektum argumentumot így lehet megsemmisíteni:

Code language: JavaScript (javascript)

kevésbé bőbeszédűnek tűnik, különösen akkor, ha az argumentum objektum számos tulajdonságát használja. Ezt a technikát gyakran használják a React – ban.

Összegzés

• az objektum destrukturálása alapértelmezés szerint azonos nevű változókhoz rendeli az objektum tulajdonságait.