Akses properti JavaScript: notasi vs kurung?


394

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.


3
Hanya untuk memasukkan, bukan jawaban untuk pertanyaan awal Anda (karena Anda sudah punya banyak penjelasan bagus sejauh ini), tetapi dari segi kecepatan tidak ada perbedaan yang layak disebutkan: jsperf.com/dot-vs-square-brackets . Tes di atas hanya memberikan margin 2% paling baik untuk mereka, mereka leher dan leher.
tanpa disadari


Pertanyaan / jawaban ini dapat digunakan juga untuk kunci UTF-8.
Peter Krauss

Jawaban:


422

(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

45
Contoh-contoh kode dan kata-kata ringkasan tampak sangat familier. dev-archive.net/articles/js-dot-notation
Quentin

61
Tidak perlu menemukan kembali roda, kan? Mengutipnya sebagai referensi.
Aron Rotteveel

13
Notasi dot lebih cepat (setidaknya untuk saya) menguji browser Anda jsperf.com/dot-notation-vs-bracket-notation/2
Dave Chen

4
di chrome 44 pada notasi braket mesin saya lebih cepat
Austin France

2
@chenghuayang Ketika Anda ingin mengakses properti dari objek yang kuncinya disimpan dalam variabel, Anda tidak bisa dengan notasi titik.
Abdul

105

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.


12

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


Bisakah Anda menguraikan lebih lanjut tentang array.length? Anda mengatakan bahwa properti yang diakses oleh notasi titik tidak dievaluasi sehingga dalam kasus array.length tidak akan memberikan kita "panjang" string, bukan nilai yang dievaluasi, dalam hal ini jumlah item dalam array? The elements in an array are stored in propertiesini yang membingungkan saya. Apa yang Anda maksud dengan disimpan di properti? Apa itu properti? Dalam array pemahaman saya hanya sekelompok nilai tanpa properti. Jika mereka disimpan di properti, kenapa tidak property: value/ array asosiatif?
Limpuls

Jawaban ini sangat berharga karena menjelaskan perbedaan antara kedua notasi.
chessweb

11

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
}

Jawaban yang membantu. Terima kasih.
Ilyas karim


8

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


6

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.


5

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



3

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

1

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.


1

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.


Dan ada juga situasi di mana notasi braket tidak diperbolehkan sama sekali, bahkan jika Anda tidak memiliki tanda hubung. Misalnya, Anda bisa menulis Math.sqrt(25), tetapi tidak Math['sqrt'](25).
Tn. Lister

0

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.


0

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.