Có hai cách để thiết lập, 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 đơn.
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 một đối tượng 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." }
Việc tạo chuỗi khoá thuộc tính 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 đối tượng vốn là các thuộc tính của một đối tượng:
const myObj = {
"myProp": {
"childProp" : true
}
};
myObj.myProp.childProp;
> true;
Tuy nhiên, việc sử dụng cú pháp này khi một khoá được chỉ định trong chuỗi có thể không được xác định có thể gây ra lỗi. Trong ví dụ sau, myMissingProp
không phải là thuộc tính của đối tượng myObj
, vì vậy, việc cố gắng truy cập vào myObj.myMissingProp
sẽ dẫn đến 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 đã giới thiệu "toán tử nối tuỳ chọn" (?.
) để truy cập an toàn vào các thuộc tính lồng nhau của đố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 như các giá trị cố định kiểu chuỗi. Điều này có nghĩa là bạn chỉ có thể sử dụng ký hiệu dấu chấm để truy cập vào các 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, 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 khoá cố định chuỗi "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 là 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 số ngẫu nhiên để chọn một trong ba thuộc tính của đối tượng:
const colors = {
"color1" : "red",
"color2" : "blue",
"color3" : "green"
};
const randomNumber = Math.ceil( Math.random() * 3 );
colors[ "color" + randomNumber ];
> "blue"
Cũng như ký hiệu dấu chấm, bạn có thể sử dụng ký hiệu dấu ngoặc đơn để truy cập và tạo các 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." }