Cách sử dụng Bộ trong JavaScript
Bạn có danh sách dữ liệu chỉ nên chứa các giá trị duy nhất không? Đây là nơi mà kiểu dữ liệu Tập hợp JavaScript thực sự tỏa sáng. Đó là một loại đối tượng mới cho phép bạn tạo một bộ sưu tập các giá trị duy nhất; không có bản sao được cho phép trong một tập hợp.
Trong hướng dẫn này, chúng ta sẽ nói về bộ là gì, cách chúng hoạt động và khi nào chúng có thể hữu ích. Chúng tôi sẽ giới thiệu cho các bạn một vài ví dụ về từng phương pháp Set có sẵn trong JavaScript.
Tập hợp là gì?
Tập hợp là một tập hợp các giá trị không thể chứa các bản sao. Kiểu dữ liệu này đã được giới thiệu trong ECMAScript 6. Đáng chú ý, Sets là một tính năng của nhiều ngôn ngữ lập trình khác.
Danh sách hữu ích vì chúng cho phép bạn lưu trữ nhiều giá trị. Danh sách hỗ trợ lưu trữ các giá trị trùng lặp, có thể hữu ích trong vô số tình huống.
Ví dụ:nếu bạn đang lưu trữ danh sách các đơn đặt hàng được thực hiện tại một quán cà phê, bạn sẽ cần có thể lưu trữ các giá trị trùng lặp. Hai khách hàng có thể gọi cùng một loại đồ uống.
Có một số trường hợp bạn sẽ chỉ muốn lưu trữ các giá trị duy nhất trong danh sách. Đó là nơi bạn muốn sử dụng đối tượng Đặt. Giá trị trong Bộ chỉ có thể xuất hiện một lần.
Trong JavaScript, một tập hợp được khai báo giống như bất kỳ đối tượng nào khác. Hãy tạo một Bộ lưu trữ danh sách các loại bánh yêu thích được khách hàng báo cáo tại một phòng trà địa phương:
let cakes = new Set(); console.log(cakes)
Mã của chúng tôi trả về:Set [] . Chúng tôi vừa tạo một Tập hợp. Nó không có giá trị nào vào lúc này, như bạn có thể thấy từ đầu ra của mã của chúng tôi; chúng tôi sẽ thêm chúng vào tiếp theo.
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ọ.
Khởi tạo một tập hợp có giá trị mặc định
Tập hợp có thể được khởi tạo từ một mảng, chuỗi hoặc có thể lặp lại khác. Điều này hữu ích vì nó có nghĩa là bạn không phải thêm các giá trị vào Bộ của mình theo cách thủ công; bạn có thể làm việc từ những cái hiện có.
Hãy xem xét danh sách sau:
let cake_list = ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake"];
Các giá trị này hiện được lưu trữ trong một mảng. Để chuyển đổi chúng thành một Tập hợp, chúng ta có thể chuyển mảng của mình khi chúng ta tạo một đối tượng Tập hợp mới:
let cakes = new Set(cake_list); console.log(cakes)
Mã của chúng tôi trả về:
Set(3) ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake"]
Thêm giá trị vào một tập hợp
Đối tượng Set đi kèm với một phương thức được gọi là add() giúp dễ dàng thêm các mục vào một tập hợp. Tên của phương thức được sử dụng để thêm một mục vào một tập hợp thậm chí còn dễ nhớ:add() .
Giả sử chúng tôi muốn thêm “Bánh kem Boston” vào danh sách các loại bánh đang được bán tại một tiệm bánh địa phương. Hãy sử dụng add() phương pháp để thêm giá trị này:
cakes.add("Boston Cream Pie");
console.log(cakes);
Mã của chúng tôi trả về:
Set(4) ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Boston Cream Pie"]
Bộ của chúng ta bây giờ chứa bốn đối tượng. Nếu bạn cố gắng thêm một mục đã có trong Bộ, mục đó sẽ không được thêm vào. Bộ không thể lưu trữ các giá trị trùng lặp.
Kiểm tra xem một giá trị có tồn tại trong một tập hợp hay không
Chúng ta cần kiểm tra xem "Bánh kem Boston" có trong danh sách các loại bánh của chúng ta hay không. Đó là một bổ sung mới cho danh sách các loại bánh và thợ làm bánh muốn kiểm tra lại chúng tôi đã thêm nó.
Đó là nơi has() có trong phương thức. has() cho phép bạn kiểm tra xem liệu một Bộ có một giá trị cụ thể. Một lần nữa, phương pháp này có một cái tên dễ nhớ!
Hãy xem xét đoạn mã sau:
var has_boston_cream_pie = cakes.has("Boston Cream Pie");
console.log(has_boston_cream_pie);
Mã của chúng tôi trả về:true . has() phương thức trả về một giá trị boolean — true hoặc false — tùy thuộc vào việc một Tập hợp có chứa một giá trị cụ thể hay không. Phương thức này tương tự như includes() mà bạn muốn sử dụng trên một mảng nhưng has() chỉ hoạt động với Bộ.
Xóa giá trị khỏi một tập hợp
Người thợ làm bánh đã quyết định rằng bánh pho mát dâu tây sẽ không còn được phục vụ tại tiệm bánh nữa. Bánh phô mai dâu tây làm lâu hơn các loại bánh khác và không được ưa chuộng lắm.
Bạn có thể xóa giá trị khỏi Tập hợp bằng cách sử dụng delete() có tên aptly phương pháp. Hãy xóa giá trị “Strawberry Cheesecake” khỏi Set của chúng ta:
cakes.delete("Strawberry Cheesecake");
console.log(cakes); Mã của chúng tôi trả về:
Set(3) ["Lemon Cake", "Carrot Cake", "Boston Cream Pie"]
Bánh pho mát dâu tây đã bị xóa khỏi Bộ của chúng tôi.
Bạn có thể xóa tất cả các giá trị khỏi Tập hợp bằng cách sử dụng clear() phương pháp.
Lặp lại một tập hợp
Tập hợp, giống như danh sách, là các đối tượng có thể lặp lại. Bạn biết điều đó có nghĩa là gì:bạn có thể lặp lại chúng.
Chúng tôi sẽ sử dụng vòng lặp for-each để lặp lại bộ bánh của chúng tôi. Vòng lặp for-each của chúng tôi sẽ đi qua mọi mục trong danh sách của chúng tôi — cho từng mục trong danh sách — và in nó ra bảng điều khiển:
cakes.forEach(cake => {
console.log(cake);
} Mã của chúng tôi trả về một trình lặp sẽ in ra từng giá trị trong Tập hợp thành bảng điều khiển của chúng tôi:
Lemon Cake Carrot Cake Boston Cream Pie
Nó đơn giản mà! Bạn cũng có thể sử dụng vòng lặp for-of:
for (let cake of cakes) {
console.log(cake);
}
Mã này trả về đầu ra giống như forEach của chúng tôi vòng lặp:
Lemon Cake Carrot Cake Boston Cream Pie
Bạn có thể chọn sử dụng vòng lặp for để lặp qua một Tập hợp nhưng vì Tập hợp là các đối tượng có thể lặp lại, nên sẽ dễ dàng hơn nếu chỉ sử dụng vòng lặp for-each hoặc for-of.
Loại bỏ các giá trị trùng lặp bằng cách sử dụng bộ
Khi bạn khởi tạo một Tập hợp với một mảng, tất cả các giá trị trùng lặp sẽ tự động bị loại bỏ. Đây là một tính năng cực kỳ hữu ích.
Giả sử chúng ta có một danh sách bao gồm một số đơn đặt hàng bánh:
var cakes = ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Lemon Cake", "Chocolate Cake", "Chocolate Fudge Cake", "Chocolate Cake", "Red Velvet Cake"];
Bộ này chứa tất cả các đơn đặt hàng bánh được thực hiện cho tiệm bánh. Tổng cộng, có tám giá trị; hai giá trị trùng lặp.
Giả sử rằng người thợ làm bánh muốn biết những loại bánh khác nhau đã được đặt, vì vậy cô ấy có thể bắt đầu chuẩn bị bếp của mình. Chúng tôi có thể tìm ra điều này bằng cách chuyển Bộ của chúng tôi thành một danh sách:
var unique_cakes = new Set(cakes); console.log(unique_cakes);
Mã của chúng tôi trả về:
Set(6) [ "Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Chocolate Cake", "Chocolate Fudge Cake", "Red Velvet Cake" ]
Danh sách của chúng tôi đã được giảm xuống còn sáu giá trị. Đây là tất cả các giá trị duy nhất từ danh sách đơn đặt hàng của chúng tôi. Còn một bước nữa.
Chúng tôi phải chuyển đổi Bộ bánh của chúng tôi trở lại danh sách để chúng tôi có thể tương tác với nó bằng cách sử dụng các phương pháp danh sách chuẩn. Chúng ta có thể làm như vậy bằng cách sử dụng Array.from() phương pháp:
let final_cakes = Array.from(unique_cakes); console.log(final_cakes);
Mã của chúng tôi trả về:
[ "Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Chocolate Cake", "Chocolate Fudge Cake", "Red Velvet Cake" ]
Mặc dù đầu ra của mã này tương tự như Tập hợp của chúng tôi, nhưng có một điểm khác biệt lớn:dữ liệu của chúng tôi hiện được lưu trữ dưới dạng một mảng. Điều này có nghĩa là chúng ta có thể tương tác với nó bằng cách sử dụng tất cả các phương thức mảng JavaScript được tích hợp sẵn.
Kết luận
Đối tượng Set cho phép bạn lưu trữ danh sách các mục chỉ có thể chứa các giá trị duy nhất. Các tập hợp có thể được khởi tạo từ một đối tượng có thể lặp lại hiện có, chẳng hạn như danh sách hoặc một chuỗi.
Vì đối tượng Set loại bỏ các giá trị trùng lặp, bạn có thể sử dụng nó như một cách để loại bỏ bất kỳ bản sao nào khỏi một mảng. Sau đó, khi bạn đã hoàn tất, bạn có thể chuyển đổi Bộ của mình trở lại một mảng.
Bây giờ, bạn đã sẵn sàng để bắt đầu sử dụng Bộ trong JavaScript như một người chuyên nghiệp!