kuinka objektin Destructuringiä käytetään Javascriptissä

objektin destructuring on hyödyllinen JavaScript-ominaisuus, jolla voidaan purkaa objektien ominaisuuksia ja sitoa ne muuttujiin.

mikä parasta, objektin destructuring voi poimia useita ominaisuuksia yhdessä lauseessa, voi käyttää ominaisuuksia sisäkkäisistä kohteista ja voi asettaa oletusarvon, jos ominaisuutta ei ole olemassa.

tässä viestissä selitän, miten objektin tuhoamista käytetään Javascriptissä.

1. Kohteen tuhoutumisen tarve

Kuvittele haluavasi purkaa joitakin objektin ominaisuuksia. Es2015: tä edeltävässä ympäristössä sinun on kirjoitettava seuraava koodi:

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

ominaisuus hero.name arvo on osoitettu muuttujalle name. Samalla tavalla hero.realName arvoksi annetaan realName.

tällainen tapa käyttää ominaisuuksia ja antaa ne muuttujille vaatii boilerplate-koodin. Kirjoittamalla var name = hero.name on mainittava name sitova 2 kertaa, ja sama realName.

siinä objektin destructing syntaksi on hyödyllinen: voit lukea ominaisuuden ja antaa sen arvon muuttujalle ilman, että toistat ominaisuuden nimeä. Lisäksi, voit lukea useita ominaisuuksia samasta objektista vain yhdessä lauseessa!

muokataan yllä oleva komentosarja uudelleen ja käytetään objektin destruointia, jotta ominaisuudet name ja realName:

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

const { name, realName } = hero on objektin tuhoamistehtävä. Tässä lauseessa määritellään muuttujat name ja realName, minkä jälkeen niille annetaan ominaisuuksien arvot hero.name ja hero.realName vastaavasti.

vertaamalla 2: ta tapaa päästä käsiksi objektin ominaisuuksiin:

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

on nähtävissä, että objektin destructuring on handier, koska kumpikaan omaisuuden nimet tai objektin muuttuja on päällekkäinen.

2. Ominaisuuden poistaminen

objektin destructuring perussyntaksi on melko yksinkertainen:

const { identifier } = expression;

missä identifier on kohteen nimi ja expression pitäisi arvioida kohteeseen. Destruoinnin jälkeen muuttuja identifier sisältää ominaisuuden arvon.

tässä on vastaava koodi, joka käyttää ominaisuutta accessor:

const identifier = expression.identifier;

kokeillaan esineen tuhoamista käytännössä:

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

lausekkeessa const { name } = hero määritellään muuttuja name ja alustetaan se arvolla hero.name omaisuus.

3. Puretaan useita ominaisuuksia

tuhotaksesi objektin useiksi ominaisuuksiksi, luettele niin monta ominaisuutta kuin haluat lisätä pilkkuja , väliltä:

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

missä identifier1,…, identifierN ovat käyttöoikeuksien kohteiden nimiä, ja expression tulisi arvioida kohteeseen. Destruktion jälkeen muuttujilla identifier1,…, identifierN on vastaavat ominaisuudet.

tässä vastaava koodi:

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

Katsotaanpa katsomaan uudelleen esimerkki ensimmäisestä osasta, jossa 2 ominaisuudet puretaan:

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

const { name, realName } = hero luo 2 muuttujaa name ja realName, joille on annettu vastaavien ominaisuuksien arvot hero.name ja hero.realName.

4. Oletusarvot

jos destructuring – kohteella ei ole destructuring-tehtävässä määriteltyä ominaisuutta, muuttuja saa arvon undefined. Katsotaan, miten se tapahtuu.:

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

destruktion jälkeen muuttuja enemies on undefined, koska ominaisuutta enemies ei ole objektissa hero.

onneksi voit asettaa oletusarvon, jos ominaisuutta ei ole tuhoutuneessa kohteessa. Tässä perussyntaksi:

const { identifier = defaultValue } = expression;

missä identifier on kohteen nimi ja expression pitäisi arvioida kohteeseen. Destruktion jälkeen muuttuja identifier sisältää ominaisuuden arvon tai sille annetaan arvo defaultValue, jos identifier ominaisuutta ei ole olemassa.

tässä vastaava koodi:

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

muutetaan edellistä koodinäytettä ja käytetään oletusarvon ominaisuutta:

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

nyt muuttujan enemies oletusarvo on sen sijaan, että se olisi undefined.

5. Peitenimet

jos haluat luoda muuttujia, joilla on eri nimet kuin ominaisuuksilla, voit käyttää objektin destructuring-ominaisuutta.

const { identifier: aliasIdentifier } = expression;

identifier on käytettävän ominaisuuden nimi, aliasIdentifier on muuttujan nimi, ja expression tulisi arvioida kohteeseen. Destruoinnin jälkeen muuttuja aliasIdentifier sisältää ominaisuuden arvon.

vastaava koodi:

const aliasIdentifier = expression.identifier;

tässä on esimerkki objektin destructing alias ominaisuus:

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

kun tarkastellaan arvoa const { realName: secretName } = hero, destrukturointi määrittelee uuden muuttujan secretName (alias muuttujan) ja antaa sille arvon hero.realName.

6. Erotettaessa ominaisuuksia sisäkkäisistä kohteista

edellisissä esimerkeissä oliot olivat tavallisia: ominaisuuksilla on alkeellisia tietotyyppejä (esimerkiksi merkkijonoja).

usein esineitä voi pesiä toisissa kohteissa. Toisin sanoen jotkin ominaisuudet voivat sisältää esineitä.

tällaisessa tapauksessa voit vielä käyttää objektin destruointia ja käyttää ominaisuuksia syvältä. Tässä perussyntaksi:

const { nestedObjectProp: { identifier } } = expression;

nestedObjectProp on sen ominaisuuden nimi, jolla on sisäkkäinen esine. identifier on sisäkkäisestä kohteesta käytettävä ominaisuuden nimi. expression arvioidaan tuhoutuneeseen kohteeseen.

Destructionin jälkeen muuttuja identifier sisältää sisäkkäisen kohteen ominaisarvon.

yllä oleva syntaksi vastaa:

const identifier = expression.nestedObjectProp.identifier;

taso pesintä voit poimia ominaisuuksia on rajoittamaton. Jos haluat poimia ominaisuuksia syvältä, lisää vain lisää sisäkkäisiä kihara henkselit:

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

esimerkiksi kohde hero sisältää sisäkkäisen kohteen { city: 'Gotham'}.

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

objektin destructing const { address: { city } } = hero let ’ s you access the property city from the sisäkkäinen object.

7. Puretaan dynaaminen nimiominaisuus

voit purkaa muuttujiin ominaisuuksia dynaamisella nimellä(ominaisuuden nimi tunnetaan suoritettaessa):

const { : identifier } = expression;

propName lauseke tulee arvioida ominaisuuden nimeen (yleensä merkkijonoon), ja identifier tulee ilmoittaa destruoinnin jälkeen luotu muuttujan nimi. Toinen expression pitäisi arvioida kohteeseen, jonka haluat tuhota.

vastaava koodi ilman objektin tuhoamista:

const identifier = expression;

katsotaanpa esimerkkiä, jossa prop omistaa ominaisuuden nimen:

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

const { : name } = hero on objektin destructuring, joka antaa muuttujalle name arvon hero, missä prop on muuttuja, jolla on ominaisuuden nimi.

8. Rest object jälkeen destructuring

rest syntaksi on hyödyllinen kerätä loput ominaisuudet jälkeen destructuring:

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

missä identifier on kohteen nimi ja expression pitäisi arvioida kohteeseen.

Destructionin jälkeen muuttuja identifier sisältää ominaisuuden arvon. rest muuttuja on tavallinen objekti, jolla on jäljellä ominaisuuksia.

esimerkiksi puretaan ominaisuus name, mutta pidetään loput ominaisuudet:

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

destructuring const { name, ...realHero } = hero extracts the property name.

samalla kerätään muuttujaanrealHero: { realName: 'Bruce Wayne' } jäljellä olevat ominaisuudet (realNametässä tapauksessa).

9. Yleiskäyttötapaukset

9.1 sitovat ominaisuuksia muuttujiin

kuten monissa esimerkeissä aiemmin on nähty, objektin destructuring sitoo ominaisuuksien arvoja muuttujiin.

objektin destructuring voi määrittää arvot muuttujille, jotka on ilmoitettu käyttämällä const, let ja var. Tai jopa määrittää jo olemassa olevalle muuttujalle.

esimerkiksi näin tuhotaan käyttämällä let lausetta:

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

kuinka tuhota käyttäen var statement:

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

ja miten tuhota jo ilmoitettu muuttuja:

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

minusta on tyydyttävää yhdistää for..of sykli objektin tuhoamiseen ja purkaa ominaisuus heti:

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

9.2 Funktioparametrien destructuring

yleensä objektin destructuring voidaan sijoittaa minne tahansa, missä toimeksianto tapahtuu.

esimerkiksi kohteen voi tuhota suoraan funktion parametriluettelon sisällä:

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

function({ name }) tuhoaa funktioparametrin luoden muuttujan name, jolla on arvo name ominaisuus.

10. Yhteenveto

objektin destructuring on tehokas ominaisuus, jonka avulla voit poimia ominaisuuksia objektista ja sitoa nämä arvot muuttujiin.

pidän erityisesti siitä, että objektin destructuring on tiivis syntaksi ja kyky purkaa useita muuttujia yhteen lauseeseen.

toivottavasti postaukseni on auttanut sinua näkemään kuinka hyödyllistä esineiden tuhoaminen on!