Trình truy cập tài sản

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