Truy cập thuộc tính JavaScript: ký hiệu chấm so với ngoặc?

Khác với thực tế rõ ràng là hình thức đầu tiên có thể sử dụng một biến và không chỉ là một chuỗi ký tự, có lý do nào để sử dụng một biến số khác, và nếu vậy trong trường hợp nào?

Trong mã:

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

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

// vs. 
var x = foo.bar;

Bối cảnh: Tôi đã viết một trình tạo mã tạo ra các biểu thức này và tôi tự hỏi cái nào thích hợp hơn.

(Có nguồn gốc từ đây .)

Ký hiệu dấu ngoặc vuông cho phép sử dụng các ký tự không thể được sử dụng với ký hiệu dấu chấm:

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

bao gồm các ký tự không phải ASCII (UTF-8), như trong myForm["ダ"]( ví dụ khác ).

Thứ hai, ký hiệu dấu ngoặc vuông rất hữu ích khi xử lý các tên thuộc tính khác nhau theo một cách có thể dự đoán được:

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

Làm tròn

• Ký hiệu chấm nhanh hơn để viết và rõ ràng hơn để đọc.
• Ký hiệu dấu ngoặc vuông cho phép truy cập vào các thuộc tính có chứa các ký tự đặc biệt và lựa chọn các thuộc tính bằng các biến

Một ví dụ khác về các ký tự không thể được sử dụng với ký hiệu dấu chấm là tên thuộc tính có chứa dấu chấm .

Ví dụ, một phản hồi json có thể chứa một thuộc tính được gọi bar.Baz.

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

Ký hiệu ngoặc cho phép bạn truy cập các thuộc tính theo tên được lưu trữ trong một biến:

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

obj.x sẽ không hoạt động trong trường hợp này.

Hai cách phổ biến nhất để truy cập các thuộc tính trong JavaScript là bằng dấu chấm và dấu ngoặc vuông. Cả hai đều value.x and value[x]truy cập vào một tài sản trên giá trị nhưng không nhất thiết phải là cùng một tài sản. Sự khác biệt là cách x được diễn giải. Khi sử dụng dấu chấm, phần sau dấu chấm phải là tên biến hợp lệ và nó trực tiếp đặt tên cho thuộc tính. Khi sử dụng dấu ngoặc vuông, biểu thức giữa các dấu ngoặc được ước tính để lấy tên thuộc tính. Trong khi value.x lấy thuộc tính của giá trị có tên là x x, giá trị [x] cố gắng đánh giá biểu thức x và sử dụng kết quả làm tên thuộc tính.

Vì vậy, nếu bạn biết rằng tài sản mà bạn quan tâm có tên là chiều dài, bạn nói value.length. Nếu bạn muốn trích xuất thuộc tính được đặt tên theo giá trị được giữ trong biến i, bạn nói value[i]. Và vì tên thuộc tính có thể là bất kỳ chuỗi nào, nếu bạn muốn truy cập thuộc tính có tên “2”hoặc “John Doe”, bạn phải sử dụng dấu ngoặc vuông : value[2] or value["John Doe"]. Đây là trường hợp mặc dù bạn biết trước tên chính xác của tài sản, bởi vì không phải “2” nor “John Doe”là tên biến hợp lệ và do đó không thể được truy cập thông qua ký hiệu dấu chấm.

Trong trường hợp Mảng

Các phần tử trong một mảng được lưu trữ trong các thuộc tính. Vì tên của các thuộc tính này là số và chúng ta thường cần lấy tên của chúng từ một biến, nên chúng ta phải sử dụng cú pháp ngoặc để truy cập chúng. Thuộc tính độ dài của một mảng cho chúng ta biết nó chứa bao nhiêu phần tử. Tên thuộc tính này là một tên biến hợp lệ và chúng tôi biết trước tên của nó, vì vậy để tìm độ dài của một mảng, bạn thường viết array.lengthvì nó dễ viết hơn array["length"].

Ký hiệu dấu chấm không hoạt động với một số từ khóa (như newvà class) trong trình duyệt internet explorer 8.

Tôi đã có mã này:

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

Và điều này kích hoạt "trình thụt dự kiến" đáng sợ (ít nhất là trên IE8 trên windows xp, tôi chưa thử các môi trường khác). Cách khắc phục đơn giản đó là chuyển sang ký hiệu ngoặc:

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

Hãy cẩn thận trong khi sử dụng các ký hiệu này: Ví dụ. nếu chúng ta muốn truy cập một chức năng có trong cha mẹ của một cửa sổ. Trong IE:

window['parent']['func']

không tương đương với

window.['parent.func']

Chúng tôi có thể sử dụng:

window['parent']['func'] 

hoặc là

window.parent.func 

để truy cập nó

Nói chung, họ làm cùng một công việc.
Tuy nhiên, ký hiệu khung cung cấp cho bạn cơ hội để thực hiện những thứ mà bạn không thể làm với ký hiệu dấu chấm, như

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

Điều này có thể được mở rộng cho bất kỳ tài sản có chứa các ký tự đặc biệt.

Bạn cần sử dụng dấu ngoặc nếu tên thuộc tính có các ký tự đặc biệt:

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

Ngoài ra, tôi cho rằng đó chỉ là vấn đề của hương vị. IMHO, ký hiệu dấu chấm ngắn hơn và nó rõ ràng hơn rằng đó là một thuộc tính chứ không phải là một phần tử mảng (mặc dù tất nhiên JavaScript không có mảng kết hợp nào).

Ký hiệu khung có thể sử dụng các biến, vì vậy nó rất hữu ích trong hai trường hợp trong đó ký hiệu dấu chấm sẽ không hoạt động:

1) Khi tên thuộc tính được xác định động (khi tên chính xác không được biết cho đến khi chạy).

2) Khi sử dụng vòng lặp for..in để đi qua tất cả các thuộc tính của một đối tượng.

nguồn: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

Bạn phải sử dụng ký hiệu ngoặc vuông khi -

1. Tên tài sản là số.

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

2. Tên tài sản có ký tự đặc biệt.

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

3. Tên thuộc tính được gán cho một biến và bạn muốn truy cập giá trị thuộc tính theo biến này.

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

Trường hợp []ký hiệu là hữu ích:

Nếu đối tượng của bạn là động và có thể có một số giá trị ngẫu nhiên trong các khóa như numbervà []hoặc bất kỳ ký tự đặc biệt nào khác, chẳng hạn -

var a = { 1 : 3 };

Bây giờ nếu bạn cố gắng truy cập như a.1nó sẽ thông qua một lỗi, bởi vì nó đang mong đợi một chuỗi ở đó.

Ký hiệu chấm luôn luôn thích hợp hơn. Nếu bạn đang sử dụng một số IDE hoặc trình soạn thảo văn bản "thông minh hơn", nó sẽ hiển thị các tên không xác định từ đối tượng đó. Chỉ sử dụng ký hiệu ngoặc khi bạn có tên giống như dấu gạch ngang hoặc một cái gì đó tương tự không hợp lệ. Và cũng nếu tên được lưu trữ trong một biến.

Hãy để tôi thêm một số trường hợp sử dụng của ký hiệu ngoặc vuông. Nếu bạn muốn truy cập một thuộc tính nói x-proxytrong một đối tượng, thì -sẽ bị hiểu sai. Đây là một số trường hợp khác giống như không gian, dấu chấm, v.v., trong đó thao tác chấm sẽ không giúp bạn. Ngoài ra nếu bạn có khóa trong một biến thì chỉ có cách truy cập giá trị của khóa trong một đối tượng là bằng ký hiệu ngoặc. Hy vọng bạn có được một số bối cảnh.

Một ví dụ trong đó ký hiệu dấu chấm không thành công

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

Tên thuộc tính không nên can thiệp vào các quy tắc cú pháp của javascript để bạn có thể truy cập chúng dưới dạng json.property_name