Free Press

Accessing Properties on an Object

Der er to måder at tilgå egenskaber på et objekt på:

• Dot Notation
• Bracket Notation

Det er mest almindeligt at bruge dot notation. Nedenfor dykker vi ned i hver af dem og opdager nogle af forskellene.

Dot Notation

Lader os først se på Dot notation. Se dette eksempel nedenfor:

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

Jeg vil gerne henlede din opmærksomhed på den femte linje, hvor vi bruger punktnotation: let sound = obj.cat;. Dette er et eksempel på punktnotation. Du kan få adgang til egenskaber på et objekt ved at angive objektets navn, efterfulgt af et punktum (punktum) efterfulgt af egenskabsnavnet. Dette er syntaksen: objectName.propertyName;.

Når der arbejdes med punktnotation, kan egenskabsidentifikatorer kun være alfanumeriske (og _ og $). Egenskaber kan ikke starte med et tal.

Punktnotation er meget nemmere at læse end parentesnotation og bruges derfor oftere. Der er dog en anden måde at få adgang til egenskaber på et objekt på, som du bør være opmærksom på. Den kaldes parentesnotation.

Bracket Notation

Her er et eksempel på parentesnotation:

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

Gør igen opmærksom på den femte linje: let sound = obj;. Du kan få adgang til egenskaber på et objekt ved at angive objektets navn efterfulgt af egenskabsnavnet i parenteser. Her er syntaksen: objectName.

Du har sikkert set parentesnotationen, når du arbejder med Arrays. I nedenstående eksempel får vi adgang til det andet element i vores arr ved at bruge syntaksen: arrayName

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

Men parentesnotationen er også nyttig, når vi arbejder med objekter.

Når vi arbejder med parentesnotationen, behøver egenskabsidentifikatorer kun at være en String. De kan indeholde alle tegn, herunder mellemrum. Variabler kan også bruges, så længe variablen opløses til en String.

Det betyder, at der er færre begrænsninger, når man arbejder med parentesnotation. Vi kan nu have mellemrum i vores strings, og vi kan endda starte strings med tal.

Men måske vigtigst af alt kan vi nu bruge variabler til at få adgang til egenskaber i et objekt. Det er vigtigt, at den variabel, du bruger, refererer til en String.

Tag et kig på dette variabeleksempel. Det er måske lidt forvirrende i starten, så bær over med mig:

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

Overstående eksempel ligner et tidligere eksempel, som vi allerede har set. Den største forskel er, at vi nu bruger parentes- notation til at sende en variabel ind. Vær forsigtig, det kan se ud som om, at vi leder efter dog-egenskaben i vores obj, men det er ikke helt korrekt. dog er en variabel med en værdi på 'cat'. Da vi bruger parenteser, overføres strengværdien, og vi søger efter 'cat'-egenskaben – obj. Således logges meow til konsollen.

Nedenfor prøver vi at gøre det samme, men med punktnotation:

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

Der bør du straks bemærke, at vi får woof tilbage. Dette er meget forskelligt fra det andet eksempel, og det er fordi vi ikke kan bruge variabler med punktnotation. Hvis vi forsøger at slå obj.dog op, vil vi faktisk bare søge efter strengværdien af 'dog' i vores objekt i stedet for at bruge variabelværdien. Således returnerer obj.dog woof.

Recap

Der er nogle vigtige forskelle mellem punkt- og parentesnotation:

Punktnotation:

• Ejendomsidentifikatorer kan kun være alfanumeriske (og _ og $)
• Ejendomsidentifikatorer kan ikke starte med et tal.
• Egenskabsidentifikatorer kan ikke indeholde variabler.
• OK – obj.prop_1, obj.prop$
• Not OK – obj.1prop, obj.prop name

Bracket notation:

• Egenskabsidentifikatorer skal være en String eller en variabel, der refererer til en String.
• Det er i orden at bruge variabler, mellemrum og Strings, der starter med tal
• OK – obj, obj

Tak for læsningen! Hvis du er klar til endelig at lære webudvikling, kan du tjekke The Ultimate Guide to Learning Full Stack Web Development in 6 months, for $30. Hvis du bare ønsker at forbedre dine JavaScript-færdigheder, kan du tjekke ud: A Beginners Guide to Advanced JavaScript

Jeg udgiver 4 artikler om webudvikling hver uge. Overvej venligst at indtaste din e-mail her, hvis du gerne vil tilføjes til min ugentlige e-mail-liste, eller følg mig på Twitter.