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."
Atama operatörlerini kullanarak yeni mülklere erişmek, mevcut mülkleri değiştirmek veya yeni mülkler oluşturmak için nokta gösterimini kullanabilirsiniz:
const myObj = {};
myObj.myProp = "String value.";
myObj;
> Object { myProp: "String value." }
Nokta gösterimi kullanılarak zincirlenen özellik anahtarları, bir nesnenin özelliklerinin özelliklerine erişmenizi sağlar:
const myObj = {
"myProp": {
"childProp" : true
}
};
myObj.myProp.childProp;
> true;
Ancak zincirde belirtilen bir anahtar tanımlanmamış olabileceğinde bu söz dizimini kullanmak hatalara neden olabilir. Aşağıdaki örnekte myMissingProp
, myObj
nesnesinin bir özelliği değildir. Bu nedenle myObj.myMissingProp
öğesine erişmeye çalışmak undefined
ile sonuçlanır. 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 değişmezleri gibi tırnak içine alınmaz. 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. mümkünse daha fazla özellik anahtarı belirtin. 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.
Köşeli parantez 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, önemli ölçüde daha fazla izin verir ve parantez içindeki değer, veri türünden bağımsız olarak dize değişmez ifadesi olarak değerlendirildiği için kafa karıştıracak kadar izin verici olabilir. Örneğin, burada false
boole değeri ve
sayı değeri 10
, 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 yeni atama operatörlerini kullanarak şunları yapabilirsiniz:
const myObj = {};
myObj[ "myProp" ] = "String value.";
myObj;
> Object { myProp: "String value." }