Có hai cách để cài đặt, thay đổi và truy cập vào các thuộc tính của một đối tượng: ký hiệu dấu chấm và ký hiệu dấu ngoặc.
Ký hiệu dấu chấm
Như đã thấy trong một số ví dụ trước, ký hiệu dấu chấm sử dụng dấu chấm (.
) giữa
và khoá thuộc tính đang được truy cập:
const myObj = {
"myProp": "String value."
};
myObj.myProp;
> "String value."
Bạn có thể sử dụng ký hiệu dấu chấm để truy cập, thay đổi hoặc tạo thuộc tính mới bằng cách sử dụng toán tử gán:
const myObj = {};
myObj.myProp = "String value.";
myObj;
> Object { myProp: "String value." }
Khoá thuộc tính dạng chuỗi bằng ký hiệu dấu chấm cho phép bạn truy cập vào các thuộc tính của các đối tượng mà bản thân chúng là thuộc tính của một đối tượng:
const myObj = {
"myProp": {
"childProp" : true
}
};
myObj.myProp.childProp;
> true;
Tuy nhiên, bạn có thể không dùng cú pháp này khi khoá được chỉ định trong chuỗi
xác định có thể gây ra lỗi. Trong ví dụ sau, myMissingProp
không phải là
của đối tượng myObj
, vì vậy cố gắng truy cập vào myObj.myMissingProp
kết quả bằng undefined
. Cố gắng truy cập vào một tài sản trên undefined
như thể
đó là một đối tượng, gây ra lỗi:
const myObj = {
"myProp": {
"childProp" : true
}
};
> myObj.myMissingProp
> undefined
myObj.myMissingProp.childProp;
> Uncaught TypeError: myObj.myMissingProp is undefined
Để giải quyết vấn đề này, ES2020 đã ra mắt một "toán tử tạo chuỗi không bắt buộc" (?.
)
để truy cập an toàn vào các thuộc tính lồng nhau của các đối tượng.
const myObj = {
"myProp": {
"childProp" : true
}
};
myObj.myMissingProp?.childProp;
> undefined
Các khoá được truy cập bằng ký hiệu dấu chấm không được đặt trong dấu ngoặc kép, chẳng hạn như chuỗi giá trị cố định. Tức là bạn chỉ có thể sử dụng ký hiệu dấu chấm để truy cập vào khoá thuộc tính là giá trị nhận dạng hợp lệ:
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'
Do đó, tốt nhất bạn nên tuân thủ các quy tắc về giá trị nhận dạng khi chỉ định khoá thuộc tính bất cứ khi nào có thể. Nếu điều này không thể áp dụng cho một khoá nhất định, cú pháp ký hiệu dấu ngoặc đơn thay thế cho phép bạn đặt và truy cập khoá đối tượng dựa trên chuỗi không tuân theo quy tắc về giá trị nhận dạng.
Ký hiệu dấu ngoặc
Ký hiệu dấu ngoặc vuông sử dụng một bộ dấu ngoặc ([]
) chứa giá trị được đánh giá
một chuỗi (hoặc một Ký hiệu) biểu thị
khoá thuộc tính.
const myObj = {
"myProp": "String value."
};
myObj["myProp"];
> "String value."
Cú pháp này thoải mái hơn đáng kể và có thể thoải mái hơn
gây nhầm lẫn, vì giá trị trong ngoặc được đánh giá là giá trị cố định kiểu chuỗi
bất kể loại dữ liệu. Ví dụ: ở đây là giá trị boolean false
và
giá trị số 10
được dùng để truy cập vào các thuộc tính liên kết với chuỗi
khoá cố định "false"
và "10"
:
const myObj = {
"false": 25,
"10" : true,
"key with spaces": true
};
myObj[false];
> 25
myObj[10];
> true
myObj["key with spaces"];
> true
Điểm mạnh của cú pháp này nằm ở tính linh hoạt, cho phép sử dụng các chuỗi được tạo động để truy cập vào các thuộc tính. Ví dụ sau đây sử dụng một số ngẫu nhiên để chọn một trong ba thuộc tính của một đối tượng:
const colors = {
"color1" : "red",
"color2" : "blue",
"color3" : "green"
};
const randomNumber = Math.ceil( Math.random() * 3 );
colors[ "color" + randomNumber ];
> "blue"
Giống như ký hiệu dấu chấm, bạn có thể sử dụng ký hiệu dấu ngoặc để vừa truy cập vừa tạo mới thuộc tính, sử dụng toán tử gán:
const myObj = {};
myObj[ "myProp" ] = "String value.";
myObj;
> Object { myProp: "String value." }