Tại sao là Set?

Set là một cấu trúc dữ liệu cho phép bạn lưu trữ các giá trị duy nhất của bất kỳ kiểu dữ liệu nào. Nó tương tự như một mảng nhưng không cho phép các giá trị trùng lặp. Đây là một cách tuyệt vời để lưu trữ các giá trị duy nhất của bất kỳ loại nào. Đôi khi bạn muốn lưu trữ các giá trị duy nhất trong một mảng, nhưng bạn không muốn lặp qua mảng để kiểm tra xem giá trị đó đã tồn tại hay chưa. Đó là lúc Set trở nên hữu ích.

Trong một bài viết trước, chúng ta đã thảo luận về Javascript Map. Set tương tự như Map, nhưng nó chỉ lưu trữ các khóa, không phải giá trị. Đây là một cách tuyệt vời để giữ các giá trị duy nhất của bất kỳ kiểu dữ liệu nào. Việc sử dụng Map trong nhiều trường hợp trở nên quá phức tạp. Đó là lý do tại sao chúng ta hãy cùng tìm hiểu về Set.

Set trong JavaScript là gì?

Đối tượng Set là tập hợp các giá trị. Một giá trị trong Set chỉ có thể xuất hiện một lần; nó là duy nhất trong tập hợp của Set. Bạn có thể lặp qua các phần tử của một Set theo thứ tự chèn. Thứ tự chèn tương ứng với thứ tự mà mỗi phần tử được chèn vào Set bằng phương thức add() (nghĩa là, không có phần tử giống hệt nhau đã tồn tại trong Set khi Set gọi add()).

Thông số kỹ thuật yêu cầu các Set được triển khai "sao cho, trung bình, cung cấp thời gian truy cập là dưới tuyến tính trên số lượng phần tử trong tập hợp." Do đó, nó có thể được biểu diễn bên trong dưới dạng bảng băm (với tìm kiếm O(1)), cây tìm kiếm (với tìm kiếm O(log(N))), hoặc bất kỳ cấu trúc dữ liệu nào khác, miễn là độ phức tạp tốt hơn O(N).

Cách tạo một Set?

Có hai cách để tạo một Set. Cách đầu tiên là sử dụng hàm tạo Set. Cách thứ hai là sử dụng ký hiệu đối tượng Set.

Hàm tạo Set

Hàm tạo Set tạo ra một đối tượng Set mới. Bạn có thể truyền một đối tượng có thể lặp lại làm đối số cho hàm tạo. Các phần tử của đối tượng có thể lặp lại sẽ được thêm vào Set mới.

const set = new Set([1, 2, 3, 4, 5])

Ký hiệu đối tượng Set

Ký hiệu đối tượng Set tạo ra một đối tượng Set mới. Bạn có thể truyền một đối tượng có thể lặp lại làm đối số cho ký hiệu đối tượng. Các phần tử của đối tượng có thể lặp lại sẽ được thêm vào Set mới.

const set = {1, 2, 3, 4, 5};

Phương thức & Thuộc tính của Set

Ví dụ về Set

Thêm một giá trị vào Set

const set = new Set([1, 2, 3, 4, 5])
set.add(6)
console.log(Set) // Set { 1, 2, 3, 4, 5, 6 }

Xóa một giá trị khỏi Set

const set = new Set([1, 2, 3, 4, 5])
set.delete(3)
console.log(set) // Set { 1, 2, 4, 5 }

Kiểm tra xem một giá trị có tồn tại trong Set hay không

const set = new Set([1, 2, 3, 4, 5])
console.log(set.has(3)) // true

Lặp qua Set

const set = new Set([1, 2, 3, 4, 5])
for (const item of Set) {
  console.log(item)
}
// 1
// 2
// 3
// 4
// 5

Chuyển đổi Set sang mảng

const set = new Set([1, 2, 3, 4, 5])
const array = Array.from(set)
console.log(array) // [1, 2, 3, 4, 5]

Chuyển đổi mảng sang Set

const Array = [1, 2, 3, 4, 5]
const set = new Set(array)
console.log(Set) // Set { 1, 2, 3, 4, 5 }

Lấy kích thước của Set

const set = new Set([1, 2, 3, 4, 5])
console.log(set.size) // 5

Xóa Set

const set = new Set([1, 2, 3, 4, 5])
set.clear()
console.log(set) // Set {}

Hợp nhất Set

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([6, 7, 8, 9, 10])
const set3 = new Set([...set1, ...set2])
console.log(set3) // Set { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 }

Lấy giao của hai Set

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5, 6, 7, 8])
const set3 = new Set([...set1].filter((x) => set2.has(x)))
console.log(set3) // Set { 4, 5 }

Lấy hiệu của hai Set

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5, 6, 7, 8])
const set3 = new Set([...set1].filter((x) => !set2.has(x)))
console.log(set3) // Set { 1, 2, 3 }

Kiểm tra xem Set có là tập con của một Set khác hay không

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5])
console.log([...set2].every((x) => set1.has(x))) // true

Kiểm tra xem Set có là tập siêu của một Set khác hay không

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5])
console.log([...set1].every((x) => set2.has(x))) // false

Kiểm tra xem hai Set có giao nhau hay không

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([6, 7, 8, 9, 10])
console.log([...set1].every((x) => !set2.has(x))) // true

Kiểm tra xem hai Set có bằng nhau hay không

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([1, 2, 3, 4, 5])
console.log(set1.size === set2.size && [...set1].every((x) => set2.has(x))) // true

Hỗ trợ trình duyệt

Chrome	Firefox	Edge	Safari	Opera
49+	44+	12+	10.1+	36+

Set vs. Mảng

Bài viết này được xuất bản lần đầu trên blog.imam.dev.

Tài liệu tham khảo

1. Mozilla Developer Network - Set

2. W3Schools - Set

3. ECMAScript® 2015 Language Specification - Set