Mülk erişimcileri

Bir nesneyi ayarlamak, değiştirmek ve özelliklere erişmek için iki yöntem vardır: nokta gösterimi ve parantez 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." }