Mặc dù danh sách (list) là phương pháp lưu trữ dữ liệu hữu ích, chúng không tiện khi bạn muốn lưu nhiều thuộc tính về một đối tượng cụ thể trong danh sách. Ví dụ, nếu muốn lưu dữ liệu tất cả bánh quy bán tại cửa hàng bánh quy, bạn cần tạo nhiều danh sách để lưu dữ liệu.
Đó là lúc đối tượng (object) xuất hiện. Đối tượng cho phép lưu trữ dữ liệu theo cặp name:value (tên:giá trị), nghĩa là bạn có thể thêm nhãn cho dữ liệu đã lưu trong ứng dụng.
Trong hướng dẫn này, chúng ta sẽ thảo luận đối tượng là gì và cách dùng trong mã. Chúng ta sẽ nói về tạo đối tượng, sửa đổi đối tượng và xóa đối tượng trong ngôn ngữ JavaScript.
Đối Tượng Là Gì?
Đối tượng là kiểu dữ liệu trong JavaScript. Nó bao gồm không hoặc nhiều tên và giá trị, được ghép cặp. Mỗi tên đóng vai trò nhãn cho một giá trị. Điều này nghĩa là nếu muốn truy cập giá trị cụ thể trong đối tượng, bạn chỉ cần tham chiếu nhãn của nó. Tên đôi khi gọi là "keys" (khóa).
Giá trị có thể chứa bất kỳ loại dữ liệu nào, चाहे đó chuỗi, số hoặc đối tượng khác. Giá trị cũng có thể chứa thuộc tính và phương thức, là hàm áp dụng cho đối tượng cụ thể.
Khóa và giá trị được ánh xạ cùng nhau tạo cặp key:value trong đối tượng JS.
Đối tượng JavaScript là khái niệm mà JSON (JavaScript Object Notation) được xây dựng dựa trên. Mặc dù JSON hơi khác JavaScript, cả hai cấu trúc dữ liệu dùng cách name:value pair lưu dữ liệu.
Cách Tạo Đối Tượng
Có hai cách tạo đối tượng. Bạn có thể dùng cách khởi tạo đối tượng (object constructor) hoặc khai báo đối tượng literal.
Cách khởi tạo đối tượng dùng từ khóa "new" tạo đối tượng mới:
const cookie = new Object();
Điều này tạo đối tượng rỗng mà chúng ta có thể thêm giá trị. Chúng ta cũng có thể khai báo đối tượng dùng object literal, đơn giản là một cặp ngoặc nhọn:
const cookie = {};
Trong cả hai ví dụ, tạo đối tượng rỗng. Bạn sẽ thấy các phương pháp này dùng thay thế cho nhau trong ứng dụng JavaScript. Phương pháp object literal có lẽ phổ biến hơn nhờ sự đơn giản; chỉ cần tạo cặp ngoặc nhọn.
Để tạo đối tượng có dữ liệu, dùng cú pháp object literal:
const raspberry_white_choc = {
name: "Raspberry White Chocolate Chip",
price: 1.50,
available: true,
stock: 42
}
Đối tượng này chứa bốn tên và giá trị. Ví dụ, nhãn "price" liên kết với số dấu chấm động 1.50. Nhãn "available" liên kết với giá trị boolean "true".
Cách Đọc Đối Tượng
Cho đến nay chúng ta thảo luận cách tạo đối tượng, nhưng đối tượng không hữu ích nếu không truy cập nội dung. Có hai cách đọc nội dung đối tượng. Bạn có thể dùng ký hiệu dấu chấm (.) hoặc ký hiệu ngoặc vuông ([]).
Giả sử muốn truy xuất tên bánh quy chocolate chip. Có thể làm như sau:
console.log(raspberry_white_choc.name);
Mã trả về: Raspberry White Chocolate Chip. Trong ví dụ, tham chiếu tên đối tượng — "raspberry_white_choc" — theo sau dấu chấm, rồi tên thuộc tính muốn truy xuất giá trị. Đó là lý do gọi là ký hiệu dấu chấm. Có dấu chấm giữa đối tượng và tên thuộc tính.
Bạn cũng dùng ký hiệu ngoặc vuông đọc đối tượng:
console.log(raspberry_white_choc["available"]);
Mã trả về: true. Ký hiệu ngoặc vuông là chỉ định tên đối tượng, rồi tên giá trị muốn truy xuất. Tên giá trị muốn truy xuất nên bao quanh bằng dấu ngoặc kép, rồi ngoặc vuông.
Cách Sửa Đổi Đối Tượng
Có ba cách có thể sửa đổi đối tượng:
- Thêm mục vào đối tượng
- Sửa đổi mục đối tượng hiện có
- Xóa mục khỏi đối tượng
Hãy thảo luận từng cái, tham khảo ví dụ bánh quy trước.
Thêm Mục Vào Đối Tượng
Khác với danh sách, không có hàm push() hoặc append() dùng thêm giá trị vào đối tượng. Tất cả bạn làm là gán giá trị mới cho thuộc tính dùng toán tử gán.
Giả sử muốn thêm giá trị "gluten_free" vào đối tượng. Có thể dùng một trong các câu lệnh:
// Sử dụng ký hiệu ngoặc vuông raspberry_white_choc["gluten_free"] = false; console.log(raspberry_white_choc.gluten_free); // Sử dụng ký hiệu dấu chấm raspberry_white_choc.gluten_free = false; console.log(raspberry_white_choc.gluten_free);
Mã trả về:
false false
Trong cả hai ví dụ, tạo mục mới "gluten_free" trong đối tượng. Giá trị gán cho mục này là "false".
Sửa Đổi Mục Đối Tượng Hiện Có
Thay đổi nội dung đối tượng hoạt động giống gán giá trị mới cho đối tượng. Cả hai phương pháp dùng toán tử gán sửa đổi đối tượng.
Giả sử đã thay đổi công thức bánh quy raspberry white chocolate chip và giờ nó không chứa gluten. Có thể thay mục "gluten_free" trong đối tượng dùng mã:
raspberry_white_choc.gluten_free = true; console.log(raspberry_white_choc.gluten_free);
Mã trả về: true. Bạn cũng có thể dùng ký hiệu ngoặc vuông làm thay đổi như vậy, nếu thích.
Xóa Mục Khỏi Đối Tượng
Từ khóa "delete" cho phép xóa thuộc tính khỏi đối tượng. Mã sau cho phép xóa thuộc tính "gluten_free" khỏi đối tượng:
delete raspberry_white_choc.gluten_free; console.log(raspberry_white_choc);
Mã trả về:
{ available: true, name: "Raspberry White Chocolate Chip", price: 1.5, stock: 42 }
Như bạn thấy, tên "gluten_free" không còn hiện diện trong đối tượng. Đó là vì dùng từ khóa delete xóa nó.
Kết Luận
Cấu trúc đối tượng JavaScript làm cho việc lưu trữ dữ liệu liên quan trở nên dễ dàng. Trong bài viết, chúng ta nói về đối tượng lưu thông tin bánh quy cho cửa hàng bánh quy. Chúng ta cũng có thể dùng đối tượng lưu tài khoản người dùng, công thức tại tiệm bánh hoặc lịch hẹn.