JavaScript - Thuộc tính đối tượng

Xin chào, những pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ cùng lặn vào thế giới kỳ diệu của các thuộc tính đối tượng trong JavaScript. Là người giáo viên khoa học máy tính gần gũi của bạn, tôi ở đây để hướng dẫn bạn qua hành trình thú vị này. Nào, hãy lấy những枝 ma thuật của bạn (bàn phím) và cùng thực hiện những phép mã hóa!

Thuộc tính đối tượng trong JavaScript

Các đối tượng trong JavaScript giống như những két két báu vật - chúng chứa đựng thông tin quý giá dưới dạng các thuộc tính. Mỗi thuộc tính là một cặp khóa-giá trị, nơi khóa giống như một nhãn và giá trị chính là kho báu. Hãy tạo đối tượng đầu tiên của chúng ta:

let wizard = {
name: "Harry",
age: 17,
house: "Gryffindor"
};

Ở đây, chúng ta đã tạo một đối tượng wizard với ba thuộc tính: name, age, và house. Mỗi thuộc tính có một khóa (như "name") và một giá trị (như "Harry").

Truy cập thuộc tính đối tượng

Bây giờ chúng ta đã có đối tượng wizard, làm thế nào để truy cập các thuộc tính của nó? Có hai cách để làm điều này:

1. Dấu chấm (Dot Notation)
2. Dấu ngoặc vuông (Bracket Notation)

Hãy thử cả hai:

// Dấu chấm
console.log(wizard.name);  // Output: Harry

// Dấu ngoặc vuông
console.log(wizard["house"]);  // Output: Gryffindor

Dấu chấm dễ sử dụng hơn và thường được sử dụng phổ biến. Tuy nhiên, dấu ngoặc vuông rất hữu ích khi các tên thuộc tính có khoảng trống hoặc ký tự đặc biệt, hoặc khi bạn sử dụng một biến để truy cập thuộc tính.

let property = "age";
console.log(wizard[property]);  // Output: 17

Truy cập thuộc tính đối tượng con

Đôi khi, các đối tượng có thể chứa các đối tượng khác. Nó giống như một con búp bê嵌套! Hãy mở rộng đối tượng wizard của chúng ta:

let wizard = {
name: "Harry",
age: 17,
house: "Gryffindor",
wand: {
wood: "Holly",
core: "Feather of Phoenix",
length: 11
}
};

Để truy cập các thuộc tính con, chúng ta chỉ cần nối tiếp dấu chấm hoặc dấu ngoặc vuông:

console.log(wizard.wand.wood);  // Output: Holly
console.log(wizard["wand"]["core"]);  // Output: Feather of Phoenix

Thêm hoặc cập nhật thuộc tính đối tượng

Các đối tượng trong JavaScript là có thể thay đổi, có nghĩa là chúng ta có thể thay đổi chúng sau khi tạo. Hãy tặng pháp sư của chúng ta một kỹ năng mới:

// Thêm một thuộc tính mới
wizard.skill = "Quidditch";

// Cập nhật một thuộc tính hiện có
wizard.age = 18;

console.log(wizard.skill);  // Output: Quidditch
console.log(wizard.age);  // Output: 18

Xóa thuộc tính đối tượng

Đôi khi, chúng ta cần làm biến mất các thuộc tính. Để làm điều này, chúng ta sử dụng toán tử delete:

delete wizard.house;
console.log(wizard.house);  // Output: undefined

Poof! Thuộc tính "house" đã biến mất. Nhớ rằng, việc sử dụng delete chỉ loại bỏ thuộc tính khỏi đối tượng, nó không ảnh hưởng đến bất kỳ biến nào có thể đã giữ giá trị của thuộc tính đó.

Liệt kê các thuộc tính của đối tượng

Nếu chúng ta muốn xem tất cả các thuộc tính của một đối tượng, chúng ta có thể sử dụng vòng lặp for...in:

for (let key in wizard) {
console.log(key + ": " + wizard[key]);
}

Điều này sẽ liệt kê tất cả các thuộc tính có thể枚举 của đối tượng wizard. Nhưng đợi đã, còn nhiều hơn nữa! Chúng ta cũng có thể sử dụng Object.keys(), Object.values(), hoặc Object.entries() để lấy các mảng của các khóa, giá trị hoặc cả hai của đối tượng:

console.log(Object.keys(wizard));    // Output: ["name", "age", "wand", "skill"]
console.log(Object.values(wizard));  // Output: ["Harry", 18, {wood: "Holly", core: "Feather of Phoenix", length: 11}, "Quidditch"]
console.log(Object.entries(wizard)); // Output: [["name", "Harry"], ["age", 18], ["wand", {...}], ["skill", "Quidditch"]]

Thuộc tính của thuộc tính

Mỗi thuộc tính trong JavaScript đều có một số thuộc tính xác định hành vi của nó. Những thuộc tính này giống như các đặc điểm tính cách của thuộc tính. Hãy gặp chúng:

1. value: Giá trị của thuộc tính (rõ ràng!)
2. writable: Chúng ta có thể thay đổi giá trị của thuộc tính này không?
3. enumerable: Thuộc tính này có nên xuất hiện khi chúng ta liệt kê các thuộc tính của đối tượng không?
4. configurable: Chúng ta có thể xóa thuộc tính này hoặc thay đổi các thuộc tính của nó không?

Mặc định, tất cả những thuộc tính này đều được đặt thành true cho các thuộc tính chúng ta tạo bình thường. Nhưng chúng ta có thể thay đổi chúng bằng cách sử dụng Object.defineProperty():

Object.defineProperty(wizard, "name", {
writable: false,
enumerable: false
});

wizard.name = "Ron";  // Điều này sẽ không hoạt động
console.log(wizard.name);  // Output: Harry

for (let key in wizard) {
console.log(key);  // "name" sẽ không xuất hiện ở đây
}

Dưới đây là bảng tóm tắt các phương thức thuộc tính chúng ta đã học:

Phương thức	Mô tả
object.property	Truy cập một thuộc tính bằng dấu chấm
object["property"]	Truy cập một thuộc tính bằng dấu ngoặc vuông
object.property = value	Thêm hoặc cập nhật một thuộc tính
delete object.property	Xóa một thuộc tính
for...in	Liệt kê các thuộc tính của đối tượng
Object.keys(object)	Lấy một mảng các khóa của đối tượng
Object.values(object)	Lấy một mảng các giá trị của đối tượng
Object.entries(object)	Lấy một mảng các cặp [khóa, giá trị] của đối tượng
Object.defineProperty()	Định nghĩa một thuộc tính mới hoặc thay đổi một thuộc tính hiện có

Và thế là bạn đã hoàn thành khóa học nhanh về các thuộc tính đối tượng trong JavaScript, các nhà mã hóa trẻ! Nhớ rằng, thực hành là cách tốt nhất để hoàn thiện, vì vậy hãy tiếp tục thử nghiệm với các khái niệm này. Trước khi bạn biết, bạn sẽ có thể tạo ra các đối tượng phức tạp như một pháp sư JavaScript thực thụ!

Credits: Image by storyset