Free Press

Accessing Properties on an Object

Det finns två sätt att komma åt egenskaper på ett objekt:

• Dot Notation
• Bracket Notation

Dot Notation används oftast. Nedan kommer vi att dyka ner i var och en av dem och upptäcka några av skillnaderna.

Dot Notation

Låt oss först titta på Dot notation. Se exemplet nedan:

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

Jag vill fästa din uppmärksamhet på den femte raden där vi använder punktnotering: let sound = obj.cat;. Detta är ett exempel på punktnotering. Du kan komma åt egenskaper på ett objekt genom att ange objektets namn, följt av en punkt (punkt) följt av egenskapsnamnet. Detta är syntaxen: objectName.propertyName;.

När du arbetar med punktnotering kan egenskapsidentifieringar endast vara alfanumeriska (och _ och $). Egenskaper kan inte börja med ett nummer.

Punktnotering är mycket lättare att läsa än parentesnotering och används därför oftare. Det finns dock ett andra sätt att komma åt egenskaper på ett objekt som du bör känna till. Det kallas parentesnotering.

Bracket Notation

Här är ett exempel på parentesnotering:

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

Tillämpa återigen din uppmärksamhet på den femte raden: let sound = obj;. Du kan få tillgång till egenskaper på ett objekt genom att ange objektets namn följt av egenskapsnamnet inom parentes. Här är syntaxen: objectName.

Du har förmodligen sett parentesnotationen när du arbetar med Arrays. I exemplet nedan får vi tillgång till det andra elementet i vår arr genom att använda syntaxen: arrayName

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

Men parentesnotationen är också användbar när man arbetar med objekt.

När man arbetar med parentesnotation behöver egenskapsidentifierare bara vara en sträng. De kan innehålla alla tecken, även mellanslag. Variabler kan också användas så länge variabeln upplöses till en String.

Detta innebär att det finns färre begränsningar när man arbetar med parentesbeteckning. Vi kan nu ha mellanslag i våra strängar och kan till och med börja strängar med siffror.

Kanske viktigast av allt är att vi nu kan använda variabler för att få tillgång till egenskaper i ett objekt. Det är viktigt att variabeln du använder refererar till en sträng.

Ta en titt på det här variabelexemplet. Det kan vara lite förvirrande till en början, så ha tålamod med mig:

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

Ovanstående exempel liknar ett tidigare exempel som vi redan har sett. Den största skillnaden är att vi nu använder parentesnotering för att skicka in en variabel. Var försiktig, det kan se ut som om vi letar efter egenskapen dog i vår obj, men det är inte helt korrekt. dog är en variabel med värdet 'cat'. Eftersom vi använder parenteser skickas strängvärdet in och vi söker efter egenskapen 'cat' – obj. Således loggas meow till konsolen.

Nedan försöker vi göra samma sak, men med punktnotering:

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

Det bör direkt märkas att vi får tillbaka woof. Detta skiljer sig mycket från det andra exemplet och det beror på att vi inte kan använda variabler med punktnotering. Om vi försöker leta upp obj.dog kommer vi faktiskt bara att leta efter strängvärdet 'dog' i vårt objekt istället för att använda variabelvärdet. Således returnerar obj.dog woof.

Recap

Det finns några viktiga skillnader mellan punkt- och parentesnotation:

Punktnotation:

• Egenskapernas identiteter kan bara vara alfanumeriska (och _ och $)
• Egenskapernas identiteter kan inte börja med ett tal.
• Fastighetsidentifierare kan inte innehålla variabler.
• OK – obj.prop_1, obj.prop$
• Not OK – obj.1prop, obj.prop name

Bracket-notation:

• Fejlighetsidentifierare måste vara en sträng eller en variabel som refererar till en sträng.
• Det är okej att använda variabler, mellanslag och strängar som börjar med siffror
• OK – obj, obj

Tack för att du läste! Om du är redo att äntligen lära dig webbutveckling kan du kolla in The Ultimate Guide to Learning Full Stack Web Development in 6 months, för 30 dollar. Om du bara vill förbättra dina JavaScript-kunskaper kan du kolla in: A Beginners Guide to Advanced JavaScript

Jag publicerar 4 artiklar om webbutveckling varje vecka. Överväg att skriva in din e-postadress här om du vill bli upptagen i min e-postlista som skickas en gång i veckan, eller följ mig på Twitter.