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