JavaScript - Hiển thị Đối tượng

Xin chào các pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình đầy.exciting vào thế giới hiển thị đối tượng trong JavaScript. Là người giáo viên máy tính gần gũi của bạn, tôi ở đây để hướng dẫn bạn từng bước trong cuộc phiêu lưu này. Vậy, hãy cầm lấy những枝 c魔法 ảo của bạn (bàn phím), và cùng nhau tạo ra phép màu JavaScript!

Hiển thị Đối tượng trong JavaScript

Trước hết, đối tượng trong JavaScript là gì? Hãy tưởng tượng bạn có một hộp ma thuật có thể chứa thông tin khác nhau về một điều gì đó. Đó chính là bản chất của một đối tượng! Nó là một容器 chứa dữ liệu và chức năng liên quan.

Hãy bắt đầu với một ví dụ đơn giản:

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

Ở đây, chúng ta đã tạo một đối tượng wizard với các thuộc tính như name, age, và house. Nhưng làm thế nào để hiển thị đối tượng này? Nếu chúng ta cố gắng in nó đơn giản:

console.log(wizard);

Chúng ta có thể thấy điều này trong console:

{name: "Harry", age: 17, house: "Gryffindor"}

Không thực sự thú vị phải không? Hãy cùng khám phá những cách ma thuật hơn để hiển thị đối tượng của chúng ta!

Truy cập các Thuộc tính Đối tượng

Một trong những cách đơn giản nhất để hiển thị thông tin đối tượng là truy cập trực tiếp vào các thuộc tính của nó. Điều này giống như mở hộp ma thuật và nhìn từng mục một.

console.log("Name: " + wizard.name);
console.log("Age: " + wizard.age);
console.log("House: " + wizard.house);

Điều này sẽ выводить:

Name: Harry
Age: 17
House: Gryffindor

Tuyệt vời hơn! Bây giờ chúng ta có thể thấy rõ từng thuộc tính. Nhưng nếu chúng ta muốn hiển thị tất cả các thuộc tính mà không cần gõ chúng một cách riêng lẻ? Đó là lúc phép thuật tiếp theo của chúng ta phát huy tác dụng!

Sử dụng phương pháp JSON.stringify()

JSON.stringify() giống như một lời phù thủy revelio cho đối tượng. Nó biến đối tượng của chúng ta thành một chuỗi được định dạng đẹp mắt.

let wizardString = JSON.stringify(wizard);
console.log(wizardString);

Điều này sẽ выводить:

{"name":"Harry","age":17,"house":"Gryffindor"}

Bây giờ, điều này trông có tổ chức hơn! Nhưng đợi đã, còn nhiều hơn nữa! Chúng ta có thể làm cho nó đẹp hơn:

let prettyWizard = JSON.stringify(wizard, null, 2);
console.log(prettyWizard);

Và voilà!

{
"name": "Harry",
"age": 17,
"house": "Gryffindor"
}

Con số 2 trong lời phù thủy của chúng ta xác định số lượng khoảng trống cho indentation. Hãy tự do điều chỉnh nó theo sở thích của bạn!

Sử dụng phương pháp Object.entries()

Bây giờ, hãy học một phép thuật cao cấp hơn: Object.entries(). Phương pháp này biến đối tượng của chúng ta thành một mảng các cặp khóa-giá trị.

let wizardEntries = Object.entries(wizard);
console.log(wizardEntries);

Điều này выводить:

[
["name", "Harry"],
["age", 17],
["house", "Gryffindor"]
]

Chúng ta sau đó có thể sử dụng điều này để tạo một giao diện hiển thị như bảng:

wizardEntries.forEach(([key, value]) => {
console.log(`${key}: ${value}`);
});

Điều này cho chúng ta:

name: Harry
age: 17
house: Gryffindor

Sử dụng vòng lặp for...in

Cuối cùng, hãy khám phá vòng lặp for...in. Đây giống như một lời phù thủy cho phép chúng ta đi qua từng thuộc tính của đối tượng một cách từng bước.

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

Điều này sẽ выводить kết quả tương tự như ví dụ trước:

name: Harry
age: 17
house: Gryffindor

Bây giờ, hãy để chúng ta汇总 tất cả các phương pháp vào một bảng tham khảo nhanh:

Phương pháp	Mô tả	Ví dụ
Truy cập trực tiếp	Truy cập thuộc tính trực tiếp	console.log(wizard.name)
JSON.stringify()	Chuyển đổi đối tượng thành chuỗi JSON	console.log(JSON.stringify(wizard))
Object.entries()	Chuyển đổi đối tượng thành mảng các cặp khóa-giá trị	console.log(Object.entries(wizard))
Vòng lặp for...in	Lặp qua các thuộc tính của đối tượng	for (let prop in wizard) { console.log(prop) }

Nhớ rằng, các pháp sư trẻ, thực hành làm cho hoàn hảo! Hãy thử các phương pháp này với các đối tượng khác nhau và xem chúng hành xử như thế nào. Trước khi bạn biết điều đó, bạn sẽ hiển thị đối tượng như một pháp sư JavaScript thực thụ!

Khi chúng ta kết thúc bài học hôm nay về hiển thị đối tượng trong JavaScript, tôi nhớ lại một sự cố hài hước từ một trong những lớp học của mình. Một học sinh đã vô tình gõ console.log(lizard) thay vì console.log(wizard), và chúng tôi đã dành 10 phút gỡ lỗi tại sao một loài bò sát lại xuất hiện trong mã của chúng tôi! Hãy luôn nhớ kiểm tra chính tả trong lập trình - nó có thể giúp bạn tránh được những lỗi ma thuật thực sự!

Đó là tất cả cho bài học hôm nay về hiển thị đối tượng trong JavaScript. Hãy tiếp tục thực hành, 保持 tò mò, và quan trọng nhất, hãy vui vẻ với những cuộc phiêu lưu lập trình của bạn. Đến gặp lại lần sau, chúc may mắn với mã của bạn và đối tượng của bạn luôn hiển thị đẹp mắt!

Credits: Image by storyset