JavaScript Object Destructuring

Summary: tässä opetusohjelmassa opit JavaScript object destructuringista, joka määrittää objektin ominaisuudet yksittäisille muuttujille.

jos haluat oppia tuhoamaan array, voit tarkistaa array destructuring opetusohjelma.

Johdatus JavaScript-objektin destructuring-toimeksiantoon

Oletetaan, että sinulla on person objekti, jolla on kaksi ominaisuutta: firstName ja lastName.

Code language: JavaScript (javascript)

ennen ES6: ta, kun haluat määrittää person objektin ominaisuudet muuttujille, teet sen tyypillisesti näin:

Code language: JavaScript (javascript)

ES6 esittelee objektin destructing syntaksin, joka tarjoaa vaihtoehtoisen tavan määrittää objektin ominaisuudet muuttujille:

Code language: JavaScript (javascript)

tässä esimerkissä ominaisuudet firstName ja lastName annetaan muuttujille fName ja lName.

tässä syntaksissa:

Code language: JavaScript (javascript)

kaksoispistettä edeltävä tunniste (:) on objektin ominaisuus ja kaksoispisteen jälkeinen tunniste on muuttuja.

huomaa, että ominaisuuden nimi on aina vasemmalla, oli se sitten objektin kirjaimellinen tai objektin destructing syntaksi.

jos muuttujilla on samat nimet kuin olion ominaisuuksilla, koodin voi tiivistää seuraavasti:

Code language: JavaScript (javascript)

tässä esimerkissä julistimme kaksi muuttujaa firstName ja lastName, ja annoimme samassa lauseessa muuttujille henkilön objektin ominaisuudet.

julistus ja määräys on mahdollista erottaa toisistaan. Sinun on kuitenkin ympäröitävä muuttujat sulkeissa:

jos et käytä sulkeita, JavaScript-moottori tulkitsee vasemman puolen lohkoksi ja heittää syntaksivirheen.

kun muuttujalle annetaan objektin destruoinnin avulla ominaisuus, jota ei ole olemassa, muuttujan arvoksi asetetaan undefined. Esimerkiksi:

Code language: JavaScript (javascript)

tässä esimerkissä middleName ominaisuutta ei ole person oliossa, joten middleName muuttuja on undefined.

oletusarvojen asettaminen

voit määrittää muuttujalle oletusarvon, kun objektin ominaisuutta ei ole olemassa. Esimerkiksi:

Code language: JavaScript (javascript)

tässä esimerkissä osoitimme tyhjän merkkijonon middleName muuttujalle, kun henkilöobjektilla ei ole middleName ominaisuutta.

myös currentAge ominaisuus annetaan age muuttujalle, jonka oletusarvo on 18.

kun henkilöesineellä kuitenkin on middleName ominaisuus, tehtävä toimii normaalisti:

Code language: JavaScript (javascript)

nollakohdan tuhoaminen

funktio voi palauttaa kohteen tai nollan joissakin tilanteissa. Esimerkiksi:

Code language: JavaScript (javascript)

ja käytät objektin tuhoamistehtävää:

Code language: JavaScript (javascript)

koodi heittää a TypeError:

Code language: JavaScript (javascript)

voit välttää tämän käyttämällä OR – operaattoria (||), joka palauttaa null – objektin tyhjälle objektille:

Code language: JavaScript (javascript)

nyt mitään virhettä ei tapahdu. Ja firstName ja lastName tulee olemaan undefined.

sisäkkäinen objekti destructuring

olettaen, että sinulla on employee objekti, jonka ominaisuutena on name objekti:

Code language: JavaScript (javascript)

seuraavassa lauseessa tuhotaan sisäkkäisen name kohteen ominaisuudet yksittäisiksi muuttujiksi:

Code language: JavaScript (javascript)

on mahdollista tehdä ominaisuuden moninainen siirto useille muuttujille:

Code language: JavaScript (javascript)

destructing funktion argumentit

Oletetaan, että sinulla on funktio, joka näyttää henkilöobjektin:

Code language: JavaScript (javascript)

funktioon välitetty objektiargumentti on mahdollista tuhota näin:

Code language: JavaScript (javascript)

se näyttää vähemmän verbaalinen varsinkin kun käytät monia ominaisuuksia argumentti objekti. Tätä tekniikkaa käytetään usein Reactissa.

Summary

• Object destructuring määrittää objektin ominaisuudet oletusarvoisesti muuttujille, joilla on samat nimet.