Giới thiệu về Object trong JavaScript

Trong JavaScript, một đối tượng là một tập hợp các cặp khóa-giá trị không có thứ tự. Mỗi cặp khóa-giá trị được gọi là một thuộc tính.

Khóa của một thuộc tính có thể là một chuỗi. Và giá trị của một thuộc tính có thể là bất kỳ giá trị nào, ví dụ: một chuỗi, một số, một mảng và thậm chí là một hàm.

JavaScript cung cấp cho bạn nhiều cách để tạo một đối tượng. Cách phổ biến nhất được sử dụng là sử dụng ký hiệu theo nghĩa đen của đối tượng.

Ví dụ sau tạo một đối tượng trống bằng cách sử dụng ký hiệu theo nghĩa đen của đối tượng:

let empty = {};
Code language: JavaScript (javascript)

let person = {
    firstName: 'John',
    lastName: 'Doe'
};
Code language: JavaScript (javascript)

Truy cập thuộc tính

Để truy cập thuộc tính của một đối tượng, bạn sử dụng một trong hai ký hiệu: ký hiệu dấu chấm và ký hiệu dạng mảng.

1) Ký hiệu dấu chấm (.)

Dưới đây minh họa cách sử dụng ký hiệu dấu chấm để truy cập thuộc tính của một đối tượng:

objectName.propertyName
Code language: CSS (css)

Ví dụ: để truy cập thuộc tính firstName của đối tượng person, bạn sử dụng biểu thức sau:

person.firstName
Code language: CSS (css)

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

console.log(person.firstName);
console.log(person.lastName);
Code language: JavaScript (javascript)

2) Ký hiệu dạng mảng ([])

objectName['propertyName']
Code language: CSS (css)

Ví dụ:

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

console.log(person['firstName']);
console.log(person['lastName']);
Code language: JavaScript (javascript)

Khi tên thuộc tính chứa khoảng trắng, bạn cần đặt nó bên trong dấu ngoặc kép. Ví dụ: đối tượng địa chỉ sau có thuộc tính 'building no':

let address = {
    'building no': 3960,
    street: 'North 1st street',
    state: 'CA',
    country: 'USA'
};
Code language: JavaScript (javascript)

Để truy cập thuộc tính 'building no', bạn cần sử dụng ký hiệu dạng mảng:

address['building no'];
Code language: CSS (css)

Nếu bạn sử dụng ký hiệu dấu chấm, bạn sẽ gặp lỗi:

address.'building no';
Code language: JavaScript (javascript)

Error:

SyntaxError: Unexpected string
Code language: JavaScript (javascript)

Đọc từ một thuộc tính không tồn tại sẽ dẫn đến không xác định. Ví dụ:

console.log(address.district);
Code language: CSS (css)

Output:

undefined
Code language: JavaScript (javascript)

Sửa đổi giá trị của tài sản

Để thay đổi giá trị của một thuộc tính, bạn sử dụng toán tử gán (=). Ví dụ:

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

person.firstName = 'Jane';

console.log(person);
Code language: JavaScript (javascript)

Output:

{ firstName: 'Jane', lastName: 'Doe' }
Code language: CSS (css)

Thêm một thuộc tính mới vào một đối tượng

Unlike objects in other programming languages such as Java and C#, you can add a property to an object after object creation.

The following statement adds the age property to the person object and assigns 25 to it:

person.age = 25;

Deleting a property of an object

To delete a property of an object, you use the delete operator:

delete objectName.propertyName;
Code language: JavaScript (javascript)

The following example removes the age property from the person object:

delete person.age;
Code language: JavaScript (javascript)

If you attempt to reaccess the age property, you’ll get an undefined value.

Checking if a property exists

To check if a property exists in an object, you use the in operator:

propertyName in objectName

The in operator returns true if the propertyName exists in the objectName.

The following example creates an employee object and uses the in operator to check if the ssn and employeeId properties exist in the object:

let employee = {
    firstName: 'Peter',
    lastName: 'Doe',
    employeeId: 1
};

console.log('ssn' in employee);
console.log('employeeId' in employee);
Code language: JavaScript (javascript)

Output:

false
true