Free Press

Objektin ominaisuuksien käyttäminen

Objektin ominaisuuksiin päästään käsiksi kahdella tavalla:

• Pistemerkintä
• Suljinmerkintä

Pistemerkintää käytetään useimmiten. Alla sukellamme kumpaankin ja löydämme joitakin eroja.

Pistemerkintä

Katsotaan ensin pistemerkintää. Tarkastellaan tätä alla olevaa esimerkkiä:

let obj = {
cat: 'meow',
dog: 'woof'
};let sound = obj.cat;console.log(sound);
// meow

Tahdon kiinnittää huomionne viidenteen riviin, jossa käytämme pisteen merkintätapaa: let sound = obj.cat;. Tämä on esimerkki pisteen merkintätavasta. Voit käyttää objektin ominaisuuksia määrittämällä objektin nimen, jota seuraa piste (piste) ja sen jälkeen ominaisuuden nimi. Tämä on syntaksi: objectName.propertyName;.

Pistemerkintää käytettäessä ominaisuustunnukset voivat olla vain aakkosnumeerisia (ja _ ja $). Ominaisuudet eivät voi alkaa numerolla.

Pistemerkintä on paljon helpompi lukea kuin sulkujen merkintätapa, ja siksi sitä käytetään useammin. On kuitenkin olemassa toinenkin tapa käyttää objektin ominaisuuksia, josta sinun on syytä olla tietoinen. Sitä kutsutaan sulkujen merkintätavaksi.

Sulkujen merkintätapa

Tässä on esimerkki sulkujen merkintätavasta:

let obj = {
cat: 'meow',
dog: 'woof'
};let sound = obj;console.log(sound);
// meow

Vetäkää taas huomionne viidennelle riville: let sound = obj;. Voit käyttää objektin ominaisuuksia määrittämällä objektin nimen ja sen jälkeen suluissa olevan ominaisuuden nimen. Tässä on syntaksi: objectName.

Olet luultavasti nähnyt sulkujen merkintätapoja työskennellessäsi Arrayn kanssa. Alla olevassa esimerkissä käytämme arr:n toista elementtiä käyttämällä syntaksia: arrayName

let arr = ;let letter = arr;console.log(letter);
// b

Mutta sulkujen merkintätapa on käyttökelpoinen myös objektien kanssa työskenneltäessä.

Sulkujen merkintätavalla työskenneltäessä ominaisuustunnisteiden täytyy olla vain merkkijono. Ne voivat sisältää mitä tahansa merkkejä, myös välilyöntejä. Myös muuttujia voidaan käyttää, kunhan muuttuja ratkeaa merkkijonoksi.

Tämä tarkoittaa, että sulkujen merkintätavalla työskenneltäessä on vähemmän rajoituksia. Voimme nyt käyttää merkkijonoissa välilyöntejä ja voimme jopa aloittaa merkkijonot numeroilla.

Periaatteessa tärkeintä on, että voimme nyt käyttää muuttujia objektin ominaisuuksien käyttämiseen. On tärkeää, että käyttämäsi muuttuja viittaa merkkijonoon.

Katsokaa tätä esimerkkiä muuttujasta. Se saattaa olla aluksi hieman hämmentävä, joten ole kärsivällinen:

let obj = {
cat: 'meow',
dog: 'woof'
};let dog = 'cat';
let sound = obj;console.log(sound);
// meow

Yllä oleva esimerkki on samanlainen kuin aiempi esimerkki, jonka olemme jo nähneet. Suurin ero on se, että käytämme nyt sulkujen merkintätapaa muuttujan siirtämiseen. Ole varovainen, se saattaa näyttää siltä, että etsimme dog-ominaisuutta obj-ominaisuudestamme, mutta se ei ole täysin oikein. dog on muuttuja, jonka arvo on 'cat'. Koska käytämme sulkuja, merkkijonon arvo välitetään ja etsimme 'cat'-ominaisuutta – obj. Näin ollen meow kirjautuu konsoliin.

Alhaalla yritämme tehdä saman asian, mutta pistemerkinnällä:

let obj = {
cat: 'meow',
dog: 'woof'
};let dog = 'cat';
let sound = obj.dog;console.log(sound);
// woof

Heti alkuun sinun pitäisi huomata, että saamme takaisin woof. Tämä on hyvin erilainen kuin toisessa esimerkissä, ja se johtuu siitä, että emme voi käyttää muuttujia pisteen merkintätavalla. Kun yritämme etsiä obj.dog, etsimme itse asiassa vain merkkijonon 'dog' arvoa objektimme sisällä sen sijaan, että käyttäisimme muuttujan arvoa. Näin ollen obj.dog palauttaa woof.

Kertaus

Piste- ja hakasulkeisnotaation välillä on joitakin tärkeitä eroja:

Pistemerkintä:

• Ominaisuustunnukset voivat olla vain aakkosnumeerisia (ja _ ja $)
• Ominaisuustunnukset eivät voi alkaa numerolla.
• Ominaisuustunnisteet eivät voi sisältää muuttujia.
• OK – obj.prop_1, obj.prop$
• Ei OK – obj.1prop, obj.prop name

Bracket-merkintätapa:

• Ominaisuustunnisteiden on oltava merkkijono tai muuttuja, joka viittaa merkkijonoon.
• Muuttujia, välilyöntejä ja numeroilla alkavia merkkijonoja saa käyttää
• OK – obj, obj

Kiitos lukemisesta! Jos olet valmis vihdoin ja viimein opettelemaan web-kehitystä, tutustu The Ultimate Guide to Learning Full Stack Web Development in 6 months, hintaan 30 dollaria. Jos haluat vain parantaa JavaScript-taitojasi, tutustu: A Beginners Guide to Advanced JavaScript

Julkaisen viikoittain 4 artikkelia web-kehityksestä. Harkitse sähköpostiosoitteesi syöttämistä tähän, jos haluat tulla kerran viikossa julkaistavalle sähköpostilistalleni, tai seuraa minua Twitterissä.