Giới Thiệu
JavaScript objects giống như những con dao đa năng Thụy Sĩ. Chúng có thể lưu trữ dữ liệu, phương thức và nhiều thứ khác mà bạn không ngờ tới. Nhưng để thành thạo chúng có thể là một thách thức. Đừng lo, chúng ta sẽ cùng nhau khám phá mê cung này, với vài mẹo nhỏ để bạn thật sự nắm vững vấn đề.
JavaScript Objects Là Gì?
Hãy tưởng tượng bạn có một cái hộp (gọi là myBox). Bạn có thể nhét bất cứ thứ gì vào hộp này: số, chuỗi, hàm, thậm chí cả những cái hộp khác. Đó chính là cách mà JavaScript object hoạt động: một tập hợp các thuộc tính, trong đó mỗi thuộc tính có một khóa (nhãn trên hộp) và một giá trị (thứ bên trong hộp).
Cú Pháp
let myBox = {
label: "Đây là một cái hộp",
size: 10,
open: function() { console.log("Hộp đã mở!"); }
};Ở đây, label, size, và open là các thuộc tính. Các giá trị tương ứng là một chuỗi, một số, và một hàm. Hàm này giống như công cụ hữu ích mà bạn đôi khi quên đi nhưng bỗng nhiên thấy rất cần.
Truy Cập Thuộc Tính của Object
Truy cập thuộc tính của object giống như mở hộp và lấy ra thứ bạn cần. Có hai cách để làm điều này:
1. Dot Notation
console.log(myBox.label); // "Đây là một cái hộp"Dot notation là lựa chọn của bạn khi bạn chắc chắn rằng tên thuộc tính không chứa ký tự lạ hoặc khoảng trắng.
2. Bracket Notation
console.log(myBox["size"]); // 10Bracket notation dành cho những lúc bạn làm việc với các tên không thể đoán trước. Nó giống như dùng chìa khóa để mở khóa thay vì chỉ đẩy cửa.
3. Thêm và Xóa Thuộc Tính
JavaScript objects giống như những quầy tự chọn kem sang trọng. Bạn có thể thêm topping (thuộc tính) bất cứ khi nào bạn muốn và loại bỏ chúng khi bạn đã chán.
3.a Thêm Thuộc Tính
myBox.color = "blue";
console.log(myBox.color); // "blue"Thêm một thuộc tính mới đơn giản như việc bạn quyết định muốn rắc thêm kẹo vào món kem của mình. Chỉ cần làm thôi.
3.b Xóa Thuộc Tính
delete myBox.size;
console.log(myBox.size); // undefinedXóa một thuộc tính giống như quyết định bạn không còn muốn rắc kẹo nữa.
Duyệt Qua Các Thuộc Tính của Object
Khi bạn có một đống thứ trong hộp của mình, bạn có thể muốn xem từng mục một. JavaScript cung cấp cho bạn vài cách để làm điều này mà không gây ra một mớ hỗn độn.
Vòng Lặp for…in
for (let key in myBox) {
console.log(key + ": " + myBox[key]);
}Vòng lặp for…in giống như bạn đang lục lọi trong hộp, kiểm tra từng mục. Tuy nhiên, phương pháp này không quan tâm đến thứ tự mà bạn đã đóng gói mọi thứ. Nó chỉ lấy cái gì tới trước.
Các Phương Thức Quan Trọng và Chuỗi Prototype
Nếu bạn nghĩ rằng những thứ cơ bản là hay ho, hãy chờ đến khi bạn thấy các phương thức như Object.keys(), Object.values(), và Object.entries() có thể làm gì. Chúng giống như những cheat code cho hộp của bạn, cho phép bạn lấy tất cả các khóa, giá trị, hoặc thậm chí toàn bộ nội dung trong một mảng gọn gàng.
Các Phương Thức của Object
- Object.keys(myBox): Trả về một mảng các khóa, giống như một lần kiểm kê nhanh.
- Object.values(myBox): Cho bạn tất cả các giá trị, để bạn thấy mình đang làm việc với giá trị nào.
- Object.entries(myBox): Cho phép bạn xem các cặp khóa-giá trị, được gói gọn trong các mảng nhỏ.
Chuỗi Prototype
Objects trong JavaScript có một bí mật ẩn giấu: chúng có một prototype. Hãy nghĩ đến nó như một kho chứa siêu bí mật mà mỗi object đều có thể truy cập. Khi bạn cố gắng truy cập một thuộc tính, JavaScript đầu tiên sẽ tìm trong chính object đó. Nếu không tìm thấy, nó sẽ leo lên chuỗi prototype, tìm kiếm thuộc tính cao hơn trong cây gia phả.
let myNewBox = Object.create(myBox);
console.log(myNewBox.label); // "Đây là một cái hộp"Đoạn mã này cho thấy rằng mặc dù myNewBox trống, nó vẫn thừa hưởng các thuộc tính từ myBox. Nó giống như cái hộp của bạn đột nhiên có thêm một bộ tính năng mới mà bạn không cần phải làm gì thêm.
Còn nhiều điều nữa về vấn đề này! Chuỗi prototype là cách JavaScript cho phép thừa kế, cho phép các objects chia sẻ phương thức và thuộc tính mà không cần phải định nghĩa chúng rõ ràng trong mỗi object mới. Nếu bạn muốn tìm hiểu sâu hơn về cách thức hoạt động này, đây là một tài nguyên tuyệt vời về thừa kế trong JavaScript.
Kết Luận
JavaScript objects mạnh mẽ, linh hoạt và, như chúng ta đã thấy, không thiếu những điều thú vị. Chúng là nền tảng của hầu hết các thứ tuyệt vời mà bạn sẽ xây dựng trong JavaScript, và với một chút thực hành, bạn sẽ sử dụng chúng một cách chuyên nghiệp. Chỉ cần nhớ: giống như bất kỳ hộp công cụ nào, không chỉ là có công cụ, mà là biết cách sử dụng chúng.
Vì vậy, hãy tiếp tục khám phá các hộp của bạn, thử nghiệm và xem bạn có thể tạo ra những gì. Càng thử nghiệm, bạn sẽ càng đánh giá cao sức mạnh thực sự của JavaScript objects. Nếu bạn cảm thấy mạo hiểm, hãy thử mở rộng một object bằng cách sử dụng prototypes hoặc xem điều gì xảy ra khi bạn sử dụng Object.assign(). Và đừng quên rằng nếu bạn gặp khó khăn, có rất nhiều tài nguyên để giúp bạn trên đường đi. Ai biết được? Bạn thậm chí có thể thấy một chút niềm vui trong quá trình này.
Cuối cùng, tại sao không thử kiểm tra kiến thức mới của bạn? Hãy tạo các objects của riêng bạn, thao tác chúng và xem bạn có thể xây dựng những gì thú vị. Và nếu bạn có bất kỳ ví dụ hoặc câu chuyện thú vị nào từ hành trình JavaScript của mình, đừng ngần ngại chia sẻ chúng trong phần bình luận nhé!
