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."

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." }