JavaScript özellik erişimi: nokta gösterimi mi köşeli ayraç mı?

İlk formun yalnızca bir dizgi değişmezini değil, bir değişkeni kullanabileceği açık olmasının dışında, birini diğerinin üzerinde kullanmak için herhangi bir neden var mı ve eğer öyleyse hangi durumlarda?

Kodda:

// Given:
var foo = {'bar': 'baz'};

// Then
var x = foo['bar'];

// vs. 
var x = foo.bar;

Bağlam: Bu ifadeleri üreten bir kod üreticisi yazdım ve hangisinin tercih edileceğini merak ediyorum.

( Buradan temin edilir .)

Köşeli ayraç notasyonu, nokta notasyonu ile kullanılamayan karakterlerin kullanılmasına izin verir:

var foo = myForm.foo[]; // incorrect syntax
var foo = myForm["foo[]"]; // correct syntax

ASCII olmayan (UTF-8) karakterler de dahil olmak üzere myForm["ダ"]( daha fazla örnek ).

İkinci olarak, köşeli parantez gösterimi, öngörülebilir bir şekilde değişen özellik adları ile uğraşırken yararlıdır:

for (var i = 0; i < 10; i++) {
  someFunction(myForm["myControlNumber" + i]);
}

Hesabı yuvarlamak:

• Nokta gösterimi yazmak daha hızlı ve daha net okunabilir.
• Köşeli ayraç notasyonu, özel karakterler içeren özelliklere ve değişkenleri kullanarak özellik seçimine erişim sağlar

Nokta gösterimi ile kullanılamayan karakterlerin başka bir örneği, kendileri nokta içeren özellik adlarıdır .

Örneğin, bir json yanıtı adlı bir özellik içerebilir bar.Baz.

var foo = myResponse.bar.Baz; // incorrect syntax
var foo = myResponse["bar.Baz"]; // correct syntax

Köşeli ayraç gösterimi, bir değişkende depolanan ada göre özelliklere erişmenizi sağlar:

var obj = { "abc" : "hello" };
var x = "abc";
var y = obj[x];
console.log(y); //output - hello

obj.x bu durumda işe yaramaz.

JavaScript'teki özelliklere erişmenin en yaygın iki yolu nokta ve köşeli parantezdir. Her ikisi de value.x and value[x]değere sahip bir mülke erişir, ancak aynı mülke sahip olması gerekmez. Aradaki fark x'in nasıl yorumlandığıdır. Nokta kullanırken, noktadan sonraki bölüm geçerli bir değişken adı olmalı ve doğrudan özelliği adlandırmalıdır. Köşeli parantez kullanıldığında, parantezler arasındaki ifade özellik adını almak için değerlendirilir. Value.x, “x” adlı değerin özelliğini getirirken, [x] değeri x ifadesini değerlendirmeye çalışır ve sonucu özellik adı olarak kullanır.

Yani, ilgilendiğiniz mülkün "uzunluk" olarak adlandırıldığını biliyorsanız, diyorsunuz value.length. Değişkende tutulan değerle adlandırılan özelliği ayıklamak istiyorsanız i, diyorsunuz value[i]. Ve özellik adları adlı bir özelliğe erişmek istiyorsanız, herhangi bir dize olabilir çünkü “2”ya “John Doe”sen köşeli parantezleri kullanmalısınız: value[2] or value["John Doe"]. Bu özellik, “2” nor “John Doe”geçerli bir değişken adı olmadığından ve nokta gösterimi ile erişilemediğinden , özelliğin tam adını önceden bilmenize rağmen geçerlidir.

Dizilerde

Dizideki öğeler özelliklerde saklanır. Bu özelliklerin adları sayılar olduğundan ve genellikle adlarını bir değişkenten almamız gerektiğinden, bunlara erişmek için parantez sözdizimini kullanmamız gerekir. Bir dizinin length özelliği bize kaç öğe içerdiğini söyler. Bu özellik adı geçerli bir değişken adıdır ve adını önceden biliyoruz, bu nedenle bir dizinin uzunluğunu bulmak için genellikle yazmanız array.lengthdaha kolay olduğu için yazarsınız array["length"].

Nokta gösterimi internet explorer 8 bazı anahtar kelimeler ( newve gibi class) ile çalışmaz .

Bu kodu vardı:

//app.users is a hash
app.users.new = {
  // some code
}

Ve bu korkunç "beklenen belirteç" tetikler (en azından Windows xp üzerinde IE8, diğer ortamları denemedim). Bunun için basit düzeltme, parantez gösterimine geçmektir:

app.users['new'] = {
  // some code
}

Bu gösterimleri kullanırken dikkatli olun: Örneğin. pencerenin üst öğesinde bulunan bir işleve erişmek istiyorsak. IE'de:

window['parent']['func']

eşdeğer değil

window.['parent.func']

Ya kullanabiliriz:

window['parent']['func'] 

veya

window.parent.func 

ona erişmek için

Genel olarak, aynı işi yaparlar.
Bununla birlikte, parantez notasyonu size nokta notasyonu ile yapamayacağınız şeyleri yapma fırsatı verir, örneğin

var x = elem["foo[]"]; // can't do elem.foo[];

Bu, özel karakterler içeren herhangi bir özelliğe genişletilebilir.

Özellik adlarında özel karakterler varsa köşeli ayraç kullanmanız gerekir:

var foo = {
    "Hello, world!": true,
}
foo["Hello, world!"] = false;

Bunun dışında sanırım sadece bir tat meselesi. IMHO, nokta gösterimi daha kısadır ve bir dizi öğesi yerine bir özellik olduğunu daha açık hale getirir (elbette JavaScript'in ilişkilendirilebilir dizileri olmasa da).

Köşeli ayraç gösterimi değişkenleri kullanabilir, bu nedenle nokta gösteriminin çalışmadığı iki durumda yararlıdır:

1) Özellik adları dinamik olarak belirlendiğinde (tam adlar çalışma zamanına kadar bilinmediğinde).

2) Bir nesnenin tüm özelliklerini gözden geçirmek için for..in döngüsü kullanılırken.

kaynak: https://developer.mozilla.org/tr-TR/docs/Web/JavaScript/Guide/Working_with_Objects

Aşağıdaki durumlarda köşeli parantez gösterimini kullanmalısınız -

1. Özellik adı sayıdır.

   var ob = {
     1: 'One',
     7 : 'Seven'
   }
   ob.7  // SyntaxError
   ob[7] // "Seven"

2. Mülk adının özel bir karakteri vardır.

   var ob = {
     'This is one': 1,
     'This is seven': 7,
   }  
   ob.'This is one'  // SyntaxError
   ob['This is one'] // 1

3. Özellik adı bir değişkene atanır ve bu değişkenin özellik değerine erişmek istediğinizde.

   var ob = {
     'One': 1,
     'Seven': 7,
   }
   
   var _Seven = 'Seven';
   ob._Seven  // undefined
   ob[_Seven] // 7

[]Gösterimin yararlı olduğu durum:

Nesneniz dinamikse ve numberve []veya başka herhangi bir özel karakter gibi anahtarlarda rastgele değerler olabilir , örneğin -

var a = { 1 : 3 };

Şimdi bu şekilde erişmeyi denerseniz, a.1bir hata ile olacaktır, çünkü orada bir dize bekliyor.

Nokta gösterimi her zaman tercih edilir. Bazı "daha akıllı" IDE veya metin düzenleyici kullanıyorsanız, o nesneden tanımlanmamış adlar gösterir. Köşeli ayraç gösterimini yalnızca benzer tire veya benzeri geçersiz adlara sahip olduğunuzda kullanın. Ve ayrıca ad bir değişkende saklanıyorsa.

Köşeli parantez notasyonunu biraz daha kullanalım. x-proxyBir nesnede bir özelliğe erişmek istiyorsanız , -yanlış yorumlanır. Bunlar, nokta işleminin size yardımcı olmayacağı alan, nokta vb.Gibi diğer bazı durumlardır. Ayrıca, u değişkene sahip bir anahtar varsa, o zaman bir nesnede anahtarın değerine erişmenin tek yolu parantez gösterimidir. Umarım biraz daha bağlam elde edersiniz.

Nokta gösteriminin başarısız olduğu bir örnek

json = { 
   "value:":4,
   'help"':2,
   "hello'":32,
   "data+":2,
   "😎":'😴',
   "a[]":[ 
      2,
      2
   ]
};

// correct
console.log(json['value:']);
console.log(json['help"']);
console.log(json["help\""]);
console.log(json['hello\'']);
console.log(json["hello'"]);
console.log(json["data+"]);
console.log(json["😎"]);
console.log(json["a[]"]);

// wrong
console.log(json.value:);
console.log(json.help");
console.log(json.hello');
console.log(json.data+);
console.log(json.😎);
console.log(json.a[]);

Özellik adlarının, javascript sözdizimi kurallarına müdahale etmemesi gerekir. json.property_name