Akses properti JavaScript: notasi vs kurung?

Selain fakta jelas bahwa bentuk pertama dapat menggunakan variabel dan bukan hanya string literal, apakah ada alasan untuk menggunakan satu di atas yang lain, dan jika demikian dalam kasus yang mana?

Dalam kode:

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

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

// vs. 
var x = foo.bar;

Konteks: Saya telah menulis pembuat kode yang menghasilkan ekspresi ini dan saya ingin tahu mana yang lebih disukai.

(Berasal dari sini .)

Notasi braket persegi memungkinkan penggunaan karakter yang tidak dapat digunakan dengan notasi titik:

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

termasuk karakter non-ASCII (UTF-8), seperti pada myForm["ダ"]( lebih banyak contoh ).

Kedua, notasi braket persegi berguna ketika berhadapan dengan nama properti yang bervariasi dengan cara yang dapat diprediksi:

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

Pembulatan:

• Notasi dot lebih cepat untuk ditulis dan lebih jelas untuk dibaca.
• Notasi braket persegi memungkinkan akses ke properti yang mengandung karakter khusus dan pemilihan properti menggunakan variabel

Contoh lain dari karakter yang tidak dapat digunakan dengan notasi titik adalah nama properti yang mengandung titik .

Misalnya respons json dapat berisi properti yang disebut bar.Baz.

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

Notasi braket memungkinkan Anda untuk mengakses properti dengan nama yang disimpan dalam variabel:

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

obj.x tidak akan berfungsi dalam kasus ini.

Dua cara paling umum untuk mengakses properti dalam JavaScript adalah dengan titik dan dengan tanda kurung. Keduanya value.x and value[x]mengakses properti berdasarkan nilai — tetapi tidak harus properti yang sama. Perbedaannya terletak pada bagaimana x ditafsirkan. Saat menggunakan titik, bagian setelah titik harus nama variabel yang valid, dan langsung menamai properti. Saat menggunakan tanda kurung siku, ekspresi antara tanda kurung dievaluasi untuk mendapatkan nama properti. Sedangkan value.x mengambil properti nilai bernama "x", nilai [x] mencoba untuk mengevaluasi ekspresi x dan menggunakan hasilnya sebagai nama properti.

Jadi, jika Anda tahu bahwa properti yang Anda minati disebut "panjang", kata Anda value.length. Jika Anda ingin mengekstrak properti yang dinamai dengan nilai yang disimpan dalam variabel i, Anda katakan value[i]. Dan karena nama properti dapat berupa string apapun, jika Anda ingin mengakses properti bernama “2”atau “John Doe”, Anda harus menggunakan tanda kurung siku: value[2] or value["John Doe"]. Ini adalah kasusnya meskipun Anda tahu nama properti yang tepat sebelumnya, karena tidak “2” nor “John Doe”ada nama variabel yang valid dan karenanya tidak dapat diakses melalui notasi titik.

Dalam hal Array

Elemen-elemen dalam array disimpan di properti. Karena nama-nama properti ini adalah angka dan kita sering perlu mendapatkan namanya dari variabel, kita harus menggunakan sintaks braket untuk mengaksesnya. Properti panjang array memberitahu kita berapa banyak elemen yang dikandungnya. Nama properti ini adalah nama variabel yang valid, dan kami tahu namanya sebelumnya, jadi untuk menemukan panjang array, Anda biasanya menulis array.lengthkarena lebih mudah untuk menulis daripada array["length"].

Notasi dot tidak berfungsi dengan beberapa kata kunci (seperti newdan class) di internet explorer 8.

Saya punya kode ini:

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

Dan ini memicu "indentifier yang diharapkan" yang ditakuti (setidaknya pada IE8 pada windows xp, saya belum mencoba lingkungan lain). Perbaikan sederhana untuk itu adalah beralih ke notasi braket:

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

Hati-hati saat menggunakan notasi ini: Misalnya. jika kita ingin mengakses fungsi yang ada di induk jendela. Di IE:

window['parent']['func']

tidak setara dengan

window.['parent.func']

Kami dapat menggunakan:

window['parent']['func'] 

atau

window.parent.func 

untuk mengaksesnya

Secara umum, mereka melakukan pekerjaan yang sama.
Namun demikian, notasi braket memberi Anda kesempatan untuk melakukan hal-hal yang tidak dapat Anda lakukan dengan notasi titik, seperti

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

Ini dapat diperluas ke properti apa pun yang mengandung karakter khusus.

Anda perlu menggunakan tanda kurung jika nama properti memiliki karakter khusus:

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

Selain itu, saya rasa itu hanya masalah selera. IMHO, notasi titik lebih pendek dan membuatnya lebih jelas bahwa itu adalah properti daripada elemen array (walaupun tentu saja JavaScript tidak memiliki array asosiatif pula).

Notasi braket dapat menggunakan variabel, jadi ini berguna dalam dua contoh di mana notasi titik tidak akan berfungsi:

1) Ketika nama properti ditentukan secara dinamis (ketika nama pastinya tidak diketahui sampai runtime).

2) Saat menggunakan loop for..in untuk melewati semua properti dari suatu objek.

sumber: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

Anda harus menggunakan notasi braket persegi saat -

1. Nama properti adalah angka.

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

2. Nama properti memiliki karakter khusus.

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

3. Nama properti ditetapkan ke variabel dan Anda ingin mengakses nilai properti oleh variabel ini.

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

Kasus dimana [] notasi bermanfaat:

Jika objek Anda dinamis dan mungkin ada beberapa nilai acak di kunci seperti numberdan []atau karakter khusus lainnya, misalnya -

var a = { 1 : 3 };

Sekarang jika Anda mencoba mengakses seperti a.1itu akan melalui kesalahan, karena mengharapkan string di sana.

Notasi dot selalu lebih disukai. Jika Anda menggunakan beberapa IDE atau editor teks "pintar", itu akan menampilkan nama yang tidak terdefinisi dari objek itu. Gunakan notasi tanda kurung hanya ketika Anda memiliki nama dengan tanda hubung seperti atau sesuatu yang serupa tidak valid. Dan juga jika namanya disimpan dalam variabel.

Izinkan saya menambahkan beberapa kasus penggunaan notasi braket persegi. Jika Anda ingin mengakses properti mengatakan x-proxydalam suatu objek, maka -akan ditafsirkan secara salah. Mereka adalah beberapa kasus lain juga seperti ruang, titik, dll., Di mana operasi titik tidak akan membantu Anda. Juga jika Anda memiliki kunci dalam variabel maka satu-satunya cara untuk mengakses nilai kunci dalam suatu objek adalah dengan notasi braket. Semoga Anda mendapatkan lebih banyak konteks.

Contoh di mana notasi titik gagal

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[]);

Nama-nama properti tidak boleh mengganggu aturan sintaks javascript agar Anda dapat mengaksesnya json.property_name