Mặc dù danh sách là một phương pháp lưu trữ dữ liệu hữu ích, nhưng chúng không thuận tiện khi sử dụng khi bạn muốn lưu trữ nhiều thuộc tính về một đối tượng cụ thể trong danh sách. Ví dụ:nếu bạn muốn lưu trữ dữ liệu trên tất cả các cookie được bán tại cửa hàng cookie, bạn cần tạo nhiều danh sách để lưu trữ dữ liệu.
Đó là nơi các đối tượng xuất hiện. Các đối tượng cho phép bạn lưu trữ dữ liệu trong các cặp tên:giá trị, có nghĩa là bạn có thể thêm nhãn vào dữ liệu bạn đã lưu trữ trong ứng dụng của mình.
Trong hướng dẫn này, chúng ta sẽ thảo luận về các đối tượng là gì và cách bạn có thể sử dụng chúng trong mã của mình. Chúng ta sẽ nói về cách tạo đối tượng, sửa đổi đối tượng và xóa đối tượng bằng ngôn ngữ lập trình JavaScript.
Đối tượng là gì?
Đối tượng là một kiểu dữ liệu trong JavaScript. Nó được tạo thành từ không hoặc nhiều tên và giá trị, được ghép nối với nhau. Mỗi tên hoạt động như một nhãn cho một giá trị. Điều này có nghĩa là nếu bạn muốn truy cập một giá trị cụ thể trong một đối tượng, tất cả những gì bạn phải làm là tham chiếu đến nhãn của nó. Tên đôi khi được gọi là "chìa khóa".
Giá trị có thể chứa bất kỳ loại dữ liệu nào, cho dù đó là một chuỗi, một số hay một đối tượng khác. Giá trị cũng có thể chứa các thuộc tính và phương thức, là các hàm áp dụng cho một đối tượng cụ thể.
Các khóa và giá trị được ánh xạ với nhau để tạo ra một cặp khóa:giá trị trong một đối tượng JS.
Đối tượng JavaScript là khái niệm mà JSON (viết tắt của JavaScript Object Notation) được xây dựng trên đó. Mặc dù JSON hơi khác với JavaScript, nhưng cả hai cấu trúc dữ liệu này đều sử dụng phương pháp tiếp cận cặp giá trị:tên để lưu trữ dữ liệu.
Cách tạo đối tượng
Có hai cách bạn có thể tạo một đối tượng. Bạn có thể sử dụng phương pháp tiếp cận phương thức khởi tạo đối tượng hoặc khai báo một đối tượng theo nghĩa đen.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Phương thức khởi tạo đối tượng sử dụng từ khóa “mới” để tạo một đối tượng mới:
const cookie =new Object ();
Điều này tạo ra một đối tượng trống mà chúng ta có thể thêm các giá trị vào. Chúng ta cũng có thể khai báo một đối tượng bằng cách sử dụng một đối tượng theo nghĩa đen, đơn giản là một tập hợp các dấu ngoặc nhọn:
const cookie ={};
Trong cả hai ví dụ này, chúng tôi đã tạo một đối tượng trống. Bạn sẽ thấy các phương pháp này được sử dụng thay thế cho nhau trong các ứng dụng JavaScript. Phương thức đối tượng theo nghĩa đen có lẽ phổ biến hơn do tính đơn giản của nó; bạn chỉ cần tạo một tập hợp các dấu ngoặc nhọn.
Để tạo một đối tượng với dữ liệu, chúng ta có thể sử dụng cú pháp theo nghĩa đen của đối tượng:
const raspberry_white_choc ={name:"Raspberry White Chocolate Chip", giá:1,50, sẵn có:true, còn hàng:42} Đối tượng này chứa bốn tên và giá trị. Ví dụ:nhãn “giá” được liên kết với số dấu phẩy động 1,50. Nhãn “có sẵn” được liên kết với giá trị boolean “true”.
Cách đọc một đối tượng
Cho đến nay chúng ta đã thảo luận về cách tạo một đối tượng, nhưng một đối tượng sẽ không được sử dụng nhiều nếu bạn không thể truy cập nội dung của nó. Có hai cách để đọc nội dung của một đối tượng. Bạn có thể sử dụng ký hiệu dấu chấm (.) Hoặc ký hiệu dấu ngoặc ([]).
Giả sử chúng tôi muốn truy xuất tên bánh quy sô cô la chip của mình. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:
console.log (raspberry_white_choc.name);
Mã này trả về:Raspberry White Chocolate Chip. Trong ví dụ của chúng tôi, chúng tôi đã tham chiếu đến tên của đối tượng - “raspberry_white_choc” - theo sau là một dấu chấm, sau đó là tên của thuộc tính có giá trị mà chúng tôi muốn truy xuất. Đây là lý do tại sao nó được gọi là ký hiệu dấu chấm. Có một dấu chấm giữa tên đối tượng và thuộc tính.
Bạn cũng có thể sử dụng ký hiệu ngoặc để đọc một đối tượng:
console.log (raspberry_white_choc ["có sẵn"]);
Mã của chúng tôi trả về:true. Ký hiệu dấu ngoặc là nơi bạn chỉ định tên của một đối tượng, sau đó là tên của giá trị bạn muốn truy xuất. Tên của giá trị bạn muốn truy xuất phải được đặt trong dấu ngoặc kép, sau đó là dấu ngoặc vuông.
Cách sửa đổi đối tượng
Có ba cách khả thi để bạn có thể sửa đổi một đối tượng:
- Thêm các mục vào một đối tượng
- Sửa đổi các mục đối tượng hiện có
- Xóa các mục khỏi một đối tượng
Hãy thảo luận từng cái một, có tham khảo ví dụ về cookie của chúng tôi trước đó.
Thêm các mục vào một đối tượng
Không giống như danh sách, không có push() hoặc append() bạn có thể sử dụng để thêm giá trị vào một đối tượng. Tất cả những gì bạn phải làm là gán một giá trị mới cho một thuộc tính bằng cách sử dụng toán tử gán.
Giả sử chúng tôi muốn thêm giá trị “gluten_free” vào đối tượng của mình. Chúng tôi có thể làm như vậy bằng cách sử dụng một trong các câu lệnh sau:
// Sử dụng dấu ngoặc nhọn notationraspberry_white_choc ["gluten_free"] =false; console.log (raspberry_white_choc.gluten_free); // Sử dụng dấu chấm notationraspberry_white_choc.gluten_free =false; console.log (raspberry_white_choc.gluten_free); Mã của chúng tôi trả về:falsefalseTrong cả hai ví dụ này, chúng tôi đã tạo một mục mới trong đối tượng của chúng tôi có tên là “gluten_free”. Giá trị mà chúng tôi đã chỉ định cho mục này là "false".
Sửa đổi các mục đối tượng hiện có
Thay đổi nội dung của một đối tượng hoạt động giống như cách gán giá trị mới cho một đối tượng. Cả hai phương pháp đều sử dụng toán tử gán để sửa đổi đối tượng.
Giả sử chúng ta đã thay đổi công thức của mình cho bánh quy sô cô la trắng mâm xôi và bây giờ nó không có gluten. Chúng tôi có thể thay đổi mục “gluten_free” trong đối tượng của mình bằng cách sử dụng mã này:
raspberry_white_choc.gluten_free =true; console.log (raspberry_white_choc.gluten_free);Mã của chúng tôi trả về:true. Bạn cũng có thể sử dụng ký hiệu trong ngoặc để thực hiện thay đổi như vậy, nếu bạn muốn.
Xóa các mục khỏi một đối tượng
Từ khóa "xóa" cho phép bạn xóa một thuộc tính khỏi một đối tượng. Đoạn mã sau cho phép chúng tôi xóa thuộc tính “gluten_free” khỏi đối tượng của chúng tôi:
xóa raspberry_white_choc.gluten_free; console.log (raspberry_white_choc);Mã của chúng tôi trả về:
{available:true, name:"Raspberry White Chocolate Chip", price:1.5, stock:42}Như bạn có thể thấy, tên “gluten_free” không còn xuất hiện trong đối tượng của chúng ta nữa. Đó là bởi vì chúng tôi đã sử dụng từ khóa xóa để xóa nó.
Kết luận
Cấu trúc đối tượng JavaScript giúp dễ dàng lưu trữ dữ liệu liên quan. Trong bài viết này, chúng ta đã nói về cách một đối tượng có thể lưu trữ thông tin trên cookie cho kho lưu trữ cookie. Chúng tôi cũng có thể đã sử dụng một đối tượng để lưu trữ tài khoản người dùng, công thức nấu ăn tại tiệm bánh hoặc lịch.