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

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ấmký hiệu dấu ngoặc đơn.

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