az objektum Destrukturálás használata a JavaScriptben

az objektum destrukturálás egy hasznos JavaScript funkció az objektumok tulajdonságainak kinyerésére és változókhoz kötésére.

mi a jobb, az objektum destrukturálás több tulajdonságot is kinyerhet egy utasításban, elérheti a tulajdonságokat a beágyazott objektumokból, és beállíthat egy alapértelmezett értéket, ha a tulajdonság nem létezik.

ebben a bejegyzésben elmagyarázom, hogyan kell használni az objektumpusztítást a JavaScript – ben.

1. Az objektum destrukturálásának szükségessége

képzelje el, hogy egy objektum egyes tulajdonságait szeretné kibontani. Az ES2015 előtti környezetben a következő kódot kell írni:

var hero = { name: 'Batman', realName: 'Bruce Wayne'};var name = hero.name;var realName = hero.realName;name; // => 'Batman',realName; // => 'Bruce Wayne'

a hero.name tulajdonság értéke a name változóhoz van hozzárendelve. Ugyanígy hero.realName érték van rendelve realName.

a tulajdonságok eléréséhez és a változókhoz való hozzárendeléséhez boilerplate kód szükséges. A var name = hero.name írásával meg kell említenünk a name kötést 2-szer, és ugyanezt a realName – re.

itt hasznos az objektum destrukturáló szintaxisa: elolvashat egy tulajdonságot, és hozzárendelheti annak értékét egy változóhoz anélkül, hogy megkettőzné a tulajdonság nevét. Több mint, hogy el tudja olvasni több tulajdonság ugyanabból az objektumból csak egy nyilatkozatot!

írjuk át újra a fenti szkriptet, és alkalmazzuk az objektum destrukturálását a name és realName:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, realName } = hero;name; // => 'Batman',realName; // => 'Bruce Wayne'

const { name, realName } = hero egy objektum destrukturáló hozzárendelés. Ez az utasítás meghatározza a name és realName változókat, majd a hero.name és hero.realName tulajdonságok értékeit megfelelő módon hozzárendeli hozzájuk.

a 2 megközelítés összehasonlítása az objektum tulajdonságainak eléréséhez:

const name = hero.name;const realName = hero.realName;// is equivalent to:const { name, realName } = hero;

látható, hogy az objektum destrukturálása kézibb, mert sem a tulajdonságnevek, sem az objektum változó nem duplikálódik.

2. Tulajdonság kibontása

az objektum destrukturálásának alapvető szintaxisa meglehetősen egyszerű:

const { identifier } = expression;

ahol identifier az elérendő tulajdonság neve, és expression egy objektumnak kell értékelnie. A destrukturálás után a identifier változó tartalmazza a tulajdonság értékét.

itt található az egyenértékű kód egy tulajdonság-hozzáférővel:

const identifier = expression.identifier;

próbáljuk ki az objektum megsemmisítését a gyakorlatban:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name } = hero;name; // => 'Batman'

a const { name } = hero utasítás meghatározza a name változót, és inicializálja a hero.name tulajdonság értékével.

3. Több tulajdonság kibontása

az objektum több tulajdonságra történő megsemmisítéséhez soroljon fel annyi tulajdonságot, amennyit csak akar vesszők hozzáadásával , között:

const { identifier1, identifier2, ..., identifierN } = expression;

ahol a identifier1,…, identifierN az elérendő tulajdonságok nevei, és a expression – nek ki kell értékelnie egy objektumot. A destrukturálás után a identifier1, …, identifierN változók tartalmazzák a megfelelő tulajdonságértékeket.

itt van a megfelelő kód:

const identifier1 = expression.identifier1;const identifier2 = expression.identifier2;// ...const identifierN = expression.identifierN;

vessünk egy pillantást az első szakasz példájára, ahol 2 tulajdonságot vonunk ki:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, realName } = hero;name; // => 'Batman',realName; // => 'Bruce Wayne'

const { name, realName } = hero 2 name és realName változót hoz létre a megfelelő tulajdonságok hero.name és hero.realNameértékeivel.

4. Alapértelmezett értékek

ha a destrukturált objektum nem rendelkezik a destrukturálási hozzárendelésben megadott tulajdonsággal, akkor a változóhoz undefinedtartozik. Lássuk, hogyan történik:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies } = hero;enemies; // => undefined

a enemies változó megsemmisítése után undefined, mert a enemies tulajdonság nem létezik a heroobjektumban.

szerencsére beállíthat egy alapértelmezett értéket, ha a tulajdonság nem létezik a destrukturált objektumban. Itt van az alapvető szintaxis:

const { identifier = defaultValue } = expression;

ahol identifier az elérendő tulajdonság neve, és expression egy objektumnak kell értékelnie. A destrukturálás után a identifier változó tartalmazza a tulajdonság értékét, vagy defaultValue – vel van hozzárendelve, ha a identifier tulajdonság nem létezik.

itt van a megfelelő kód:

const identifier = expression.identifier === undefined ? defaultValue : expression.identifier;

változtassuk meg az előző kódmintát, és használjuk az alapértelmezett érték funkciót:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies = } = hero;enemies; // => 

most a undefined helyett a enemies változó alapértelmezés szerint .

5. Aliases

ha a tulajdonságoktól eltérő nevű változókat szeretne létrehozni, akkor használhatja az objektumpusztítás aliasing funkcióját.

const { identifier: aliasIdentifier } = expression;

identifier az access tulajdonság neve, a aliasIdentifier a változó neve, a expression pedig egy objektumnak kell értékelnie. A destrukturálás után a aliasIdentifier változó tartalmazza a tulajdonság értékét.

az egyenértékű kód:

const aliasIdentifier = expression.identifier;

Íme egy példa az objektum destrukturáló alias funkcióra:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { realName: secretName } = hero;secretName; // => 'Bruce Wayne'

a const { realName: secretName } = hero – re nézve a destucturing meghatároz egy új secretName változót (alias változót), és a hero.realNameértéket rendeli hozzá.

6. Tulajdonságok kinyerése beágyazott objektumokból

az előző példákban az objektumok egyszerűek voltak: a tulajdonságok primitív adattípusokkal rendelkeznek (pl.

az objektumok gyakran beágyazhatók más objektumokba. Más szavakkal, egyes tulajdonságok objektumokat tartalmazhatnak.

ebben az esetben továbbra is használhatja az objektum destructuring és access tulajdonságait mélyről. Itt van az alapvető szintaxis:

const { nestedObjectProp: { identifier } } = expression;

nestedObjectProp a beágyazott objektumot tartalmazó tulajdonság neve. identifier a beágyazott objektumból elérendő tulajdonság neve. expression kell értékelni, hogy a destructured tárgy.

a destrukturálás után a identifier változó tartalmazza a beágyazott objektum tulajdonságértékét.

a fenti szintaxis egyenértékű:

const identifier = expression.nestedObjectProp.identifier;

a fészkelés szintje, amelyből kivonhatja a tulajdonságokat, korlátlan. Ha ki akarja vonni a tulajdonságokat a mélyből, csak adjon hozzá további beágyazott göndör zárójeleket:

const { propA: { propB: { propC: { .... } } } } = object;

például a hero objektum beágyazott objektumot tartalmaz { city: 'Gotham'}.

const hero = { name: 'Batman', realName: 'Bruce Wayne', address: { city: 'Gotham' }};// Object destructuring:const { address: { city } } = hero;city; // => 'Gotham'

az objektum destructuring const { address: { city } } = hero nézzük meg a tulajdonság city a beágyazott objektum.

7. Dinamikus név tulajdonság kibontása

dinamikus névvel rendelkező változók tulajdonságai kibonthatók (a tulajdonság neve futásidőben ismert):

const { : identifier } = expression;

propName a kifejezésnek egy tulajdonságnévre (általában egy karakterláncra) kell értékelnie, a identifier pedig a destrukturálás után létrehozott változó nevét kell jeleznie. A második expression kiértékeli a megsemmisíteni kívánt objektumot.

ekvivalens kód objektumpusztítás nélkül:

const identifier = expression;

nézzünk meg egy példát, ahol prop tartja a tulajdonság nevét:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const prop = 'name';const { : name } = hero;name; // => 'Batman'

const { : name } = hero egy objektum destrukturálása, amely a name változóhoz rendeli a hero értéket, ahol a prop a tulajdonság nevét tartalmazó változó.

8. Rest objektum destrukturálás után

a rest szintaxis hasznos a destrukturálás után fennmaradó tulajdonságok összegyűjtésére:

const { identifier, ...rest } = expression;

ahol identifier az elérendő tulajdonság neve, és expression egy objektumnak kell értékelnie.

a destrukturálás után a identifier változó tartalmazza a tulajdonság értékét. rest változó egy egyszerű objektum a fennmaradó tulajdonságokkal.

például bontsuk ki a name tulajdonságot, de tartsuk meg a többi tulajdonságot:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, ...realHero } = hero;realHero; // => { realName: 'Bruce Wayne' }

a const { name, ...realHero } = hero destrukturálás kivonja a name tulajdonságot.

ugyanakkor a fennmaradó tulajdonságokat (ebben az esetbenrealName) összegyűjtjük a realHero: { realName: 'Bruce Wayne' } változóba.

9. Gyakori használati esetek

9.1 tulajdonságok kötése változókhoz

amint azt korábban sok példa látta, az objektum destrukturálása a tulajdonságértékeket a változókhoz köti.

az objektum destrukturálása értékeket rendelhet a const, letés var használatával deklarált változókhoz. Vagy akár hozzárendelhet egy már meglévő változóhoz.

például itt van, hogyan kell megsemmisíteni a let utasítás használatával:

// letconst hero = { name: 'Batman',};let { name } = hero;name; // => 'Batman'

hogyan kell megsemmisíteni a var utasítás használatával:

// varconst hero = { name: 'Batman',};var { name } = hero;name; // => 'Batman'

és hogyan lehet megsemmisíteni egy már deklarált változót:

// existing variablelet name;const hero = { name: 'Batman',};({ name } = hero);name; // => 'Batman'

kielégítőnek találom a for..of ciklus kombinálását az objektum destrukturálásával, hogy azonnal kivonjam az ingatlant:

const heroes = ;for (const { name } of heroes) { console.log(name); // logs 'Batman', 'Joker'}

9.2 Funkcióparaméter destrukturálás

általában az objektum destrukturálása bárhol elhelyezhető, ahol egy hozzárendelés történik.

például megsemmisíthet egy objektumot egy függvény paraméterlistáján belül:

const heroes = ;const names = heroes.map( function({ name }) { return name; });names; // => 

function({ name }) megsemmisíti a függvényparamétert, létrehozva egy name változót, amely a name tulajdonság értékét tartja.

10. Összegzés

az objektum destrukturálása egy hatékony funkció, amely lehetővé teszi a tulajdonságok kivonását egy objektumból, és ezeket az értékeket változókhoz köti.

különösen szeretem a tárgy destructuring a tömör szintaxis és a képesség, hogy kivonat több változó egy nyilatkozatot.

remélhetőleg a bejegyzésem segített meglátni, mennyire hasznos az objektum megsemmisítése!