Bir nesneyi ayarlamak, değiştirmek ve özelliklere erişmek için iki yöntem vardır: nokta gösterimi ve parantez gösterimi.
Nokta gösterimi
Önceki bazı örneklerde olduğu gibi, nokta gösterimi, bir nokta (.
) ile
nesne ve erişilen özellik anahtarı:
const myObj = {
"myProp": "String value."
};
myObj.myProp;
> "String value."
Mülklere erişmek, mevcut mülkleri değiştirmek veya yeni mülk oluşturmak için atama operatörleri:
const myObj = {};
myObj.myProp = "String value.";
myObj;
> Object { myProp: "String value." }
Nokta gösterimi kullanarak özellik anahtarlarını zincirlemek, kendileri bir nesnenin özelliği olan nesneler:
const myObj = {
"myProp": {
"childProp" : true
}
};
myObj.myProp.childProp;
> true;
Bununla birlikte, zincirde belirtilen bir anahtarın eşleşmemesi durumunda bu söz diziminin kullanılması
hatalara neden olabilir. Aşağıdaki örnekte, myMissingProp
bir
özelliği olduğundan myObj.myMissingProp
öğesine erişmeye çalışıyorsunuz.myObj
sonuç: undefined
. Ardından, undefined
hizmetindeki bir mülke erişmeye çalışılıyor.
bir nesneyse hataya neden oluyor:
const myObj = {
"myProp": {
"childProp" : true
}
};
> myObj.myMissingProp
> undefined
myObj.myMissingProp.childProp;
> Uncaught TypeError: myObj.myMissingProp is undefined
Bu sorunu çözmek için ES2020, "isteğe bağlı zincir operatörü"nü kullanıma sundu. (?.
)
güvenli bir şekilde oturum açmanızı sağlar.
const myObj = {
"myProp": {
"childProp" : true
}
};
myObj.myMissingProp?.childProp;
> undefined
Nokta gösterimi kullanılarak erişilen anahtarlar, dize gibi tırnak işaretleri arasına alınmaz. bilmeniz gerekir. Bu, yalnızca mülk anahtarlarına erişmek için nokta gösterimini kullanabileceğiniz anlamına gelir tanımlayıcılar olmalıdır:
const myObj = {
"1": true,
"key with spaces": true
};
myObj.1;
> Uncaught SyntaxError: unexpected token: numeric literal
myObj.key with spaces;
> Uncaught SyntaxError: unexpected token: keyword 'with'
Bu nedenle, tanımlayıcı kurallarına uymak en iyi uygulamadır. özellik anahtarlarını aklınızda bulundurun. Bu, bir web sitesi için alternatif bir köşeli parantez gösterimi söz dizimi, tanımlayıcı kurallarına uymayan dize tabanlı nesne anahtarlarıdır.
Ayraç gösterimi
Ayraç gösterimi, şunu değerlendiren bir değer içeren parantezler ([]
) kullanır
temsil eden bir dize (veya bir Sembol)
özellik anahtarı.
const myObj = {
"myProp": "String value."
};
myObj["myProp"];
> "String value."
Bu söz dizimi çok daha serbest ve potansiyel olarak yeterince serbesttir
kafa karıştırıcıdır, çünkü parantez içindeki değer bir dizedeki değer olarak değerlendirilir
veri türünden bağımsız olarak
ayarlamanızı sağlar. Örneğin, burada false
boole değeri ve
10
sayı değeri, dizeyle ilişkilendirilen özelliklere erişmek için kullanılır
"false"
ve "10"
değişmez anahtarları :
const myObj = {
"false": 25,
"10" : true,
"key with spaces": true
};
myObj[false];
> 25
myObj[10];
> true
myObj["key with spaces"];
> true
Bu söz diziminin gücü, esnekliğinden kaynaklanmaktadır ve dizeler için dinamik olarak oluşturulur. Aşağıdaki örnekte nesnenin üç özelliğinden birini seçmek için rastgele sayı:
const colors = {
"color1" : "red",
"color2" : "blue",
"color3" : "green"
};
const randomNumber = Math.ceil( Math.random() * 3 );
colors[ "color" + randomNumber ];
> "blue"
Nokta gösteriminde olduğu gibi, ayraç gösterimini kullanarak hem yeni hem de atama operatörlerini kullanarak şunları yapabilirsiniz:
const myObj = {};
myObj[ "myProp" ] = "String value.";
myObj;
> Object { myProp: "String value." }