Trong bài viết này, ta sẽ tìm hiểu về kiểu dữ liệu cấu trúc Set và WeakSet trong JavaScript cùng với sự trợ giúp của các ví dụ dẫn chứng.
Kiểu dữ liệu Set trong JavaScript
JavaScript ES6 đã giới thiệu hai cấu trúc dữ liệu mới, bao gồm kiểu dữ liệu Set và WeakSet.
Kiểu dữ liệu Set tương tự như kiểu dữ liệu mảng, cho phép chúng ta lưu trữ nhiều phần tử như số, chuỗi ký tự, đối tượng,… Tuy nhiên, nó có điểm khác biệt ở chỗ đó là nó sẽ không thể chứa các giá trị trùng lặp.
Tạo đối tượng có kiểu dữ liệu Set trong JavaScript
Để tạo một đối tượng có kiểu dữ liệu Set, ta sẽ cần sử dụng hàm tạo Set().
Ví dụ:
1 2 |
const sinh_vien = new Set(["Nam", "Nam", "Trung"]); console.log(sinh_vien); |
Kết quả:
1 |
Set{'Nam', 'Trung'} |
Khi các giá trị trùng lặp được thêm vào cho một đối tượng kiểu dữ liệu Set, các giá trị trùng lặp sẽ bị loại bỏ.
Truy cập vào các phần tử của đối tượng kiểu dữ liệu Set
Ta có thể truy cập các phần tử của đối tượng kiểu dữ liệu Set bằng phương thức values()và kiểm tra xem có phần tử nào bên trong đối tượng Set bằng phương thức has().
Ví dụ:
1 2 |
const sinh_vien = new Set(["Nam", "Nam", "Trung"]); console.log(sinh_vien.values()); |
Kết quả:
1 |
[Set Iterator] {'Nam', 'Trung'} |
Ta có thể sử dụng phương thức has() để kiểm tra xem phần tử có tồn tại trong đối tượng Set hay không.
Ví dụ:
1 2 |
const sinh_vien = new Set(["Nam", "Nam", "Trung"]); console.log(sinh_vien.has("Nam")); |
Kết quả:
1 |
True |
Thêm các phần tử mới vào trong đối tượng Set
Ta có thể thêm các phần tử vào trong một đối tượng kiểu dữ liệu Set bằng phương thức add().
Ví dụ:
1 2 3 |
const sinh_vien = new Set(["Nam", "Nam", "Trung"]); sinh_vien.add("Thanh"); console.log(sinh_vien.values()); |
Kết quả:
1 |
[Set Iterator] {'Nam', 'Trung', 'Thanh'} |
Loại bỏ các phần tử kiểu dữ liệu Set
Ta có thể sử dụng phương thức clear()và delete()để xóa các phần tử khỏi đối tượng có kiểu dữ liệu Set.
Phương thức delete() có nhiệm vụ xóa một phần tử xác định khỏi một đối tượng Set.
Ví dụ:
1 2 3 4 |
const sinh_vien = new Set(["Nam", "Nam", "Trung"]); sinh_vien.add("Thanh"); sinh_vien.delete("Nam"); console.log(sinh_vien.values()); |
Kết quả:
1 |
[Set Iterator] {'Trung', 'Thanh'} |
Phương thức clear() sẽ có nhiệm vụ xóa tất cả các phần tử khỏi một đối tượng Set.
Ví dụ:
1 2 3 4 |
const sinh_vien = new Set(["Nam", "Nam", "Trung"]); sinh_vien.add("Thanh"); sinh_vien.clear(); console.log(sinh_vien.values()); |
Kết quả:
1 |
[Set Iterator] { } |
Duyệt qua các phần tử của đối tượng Set
Ta có thể duyệt qua các phần tử trong đối tượng kiểu dữ liệu Set bằng cách sử dụng vòng lặp for...ofhoặc phương thức forEach(). Các phần tử sẽ được duyệt theo thứ tự khi thực hiện việc thêm các phần tử.
Ví dụ:
1 2 3 4 |
const sinh_vien = new Set(["Nam", "Nam", "Trung"]); for (let a of sinh_vien) { console.log(a); } |
Kết quả:
1 2 |
Nam Trung |
Kiểu dữ liệu WeakSet trong JavaScript
Kiểu dữ liệu WeakSet tương tự như kiểu dữ liệu Set. Tuy nhiên, WeakSet chỉ có thể chứa các thành phần có kiểu dữ liệu là đối tượng trong khi Set có thể chứa bất kỳ kiểu dữ liệu nào như chuỗi ký tự, số, đối tượng,…
Ví dụ:
1 2 3 4 5 6 7 8 |
const sinh_vien = new WeakSet(); console.log(sinh_vien); let sv = { Ten: 'Nam', ID: 100 } sinh_vien.add(sv); console.log(sinh_vien); |
Kết quả:
1 2 |
WeakSet{<items unknown>} WeakSet{<items unknown>} |
Khi ta thêm các kiểu dữ liệu khác ngoài kiểu dữ liệu đối tượng, trình biên dịch sẽ đưa ra thông báo lỗi.
Ví dụ:
1 2 3 4 5 6 7 8 9 |
const sinh_vien = new WeakSet(); console.log(sinh_vien); let sv = { Ten: 'Nam', ID: 100 } sinh_vien.add(sv); sinh_vien.add("Sinh viên"); console.log(sinh_vien); |
Kết quả nhận được của chương trình sẽ là thông báo lỗi.
Các phương thức của kiểu dữ liệu WeakSet
WeakSets bao gồm các phương thức add(), delete() và has(). Các phương thức này được sử dụng để thao tác với các đối tượng có kiểu dữ liệu WeakSet
Ví dụ:
1 2 3 4 5 6 7 8 9 10 |
const sinh_vien = new WeakSet(); console.log(sinh_vien); let sv = { Ten: 'Nam', ID: 100 } sinh_vien.add(sv); console.log(sinh_vien.has(sv)); sinh_vien.delete(sv); console.log(sinh_vien); |
Chú ý: Các đối tượng WeakSet không thể được duyệt qua các phần tử bên trong nó.
Không giống như các đối tượng kiểu Set, đối tượng có kiểu dữ liệu là WeakSet không thể duyệt qua các phần tử bên trong nó.
Ví dụ:
1 2 3 4 5 6 7 8 9 10 |
const sinh_vien = new WeakSet(); console.log(sinh_vien); let sv = { Ten: 'Nam', ID: 100 } sinh_vien.add(sv); for (let a of sinh_vien) { console.log(a); } |
Kết quả của chương trình trên sẽ là thông báo lỗi.
Các phép toán cho tập hợp
Trong JavaScript, Set không cung cấp các phương thức được tích hợp sẵn để thực hiện các phép toán như liên hợp, giao hợp, tìm sự khác biệt,… Tuy nhiên, chúng ta có thể tạo các chương trình để thực hiện các phép toán đó.
Ví dụ 1: Tìm liên hợp của các tập hợp.
1 2 3 4 5 6 7 8 9 10 11 |
function union(a, b) { let uni = new Set(a); for (let i of b) { uni.add(i); } return uni; } let sv = new Set(['Nam', 'Trung', 'Thanh']); let sv2 = new Set(['Trang', 'Trung', 'Nam']); let kq = union(sv, sv2); console.log(kq); |
Kết quả:
1 |
Set {'Nam', 'Trung', 'Thanh', 'Trang'} |
Ví dụ 2: Tìm tập giao của các tập hợp.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function intersect(setA, setB) { let inter = new Set(); for (let i of setB) { if (setA.has(i)) { inter.add(i); } } return inter; } let sv = new Set(['Nam', 'Trung', 'Thanh']); let sv2 = new Set(['Trang', 'Trung', 'Nam']); let kq = intersect(sv, sv2); console.log(kq); |
Kết quả:
1 |
Set {'Trung', 'Nam'} |
Ví dụ 3: Tìm sự khác biệt của các tập hợp.
1 2 3 4 5 6 7 8 9 10 11 |
function difference(setA, setB) { let differ = new Set(setA) for (let i of setB) { differ.delete(i) } return differ } let sv = new Set(['Nam', 'Trung', 'Thanh']); let sv2 = new Set(['Trang', 'Trung', 'Nam']); let kq = difference(sv, sv2); console.log(kq); |
Kết quả:
1 |
Set {'Thanh'} |
Ví dụ 4: Kiểm tra tập con.
1 2 3 4 5 6 7 8 9 10 11 12 |
function subset(set1, set2) { for (let i of set2) { if (!set1.has(i)) { return false } } return true } let sv = new Set(['Nam', 'Trung', 'Thanh']); let sv2 = new Set(['Thanh', 'Trung']); let kq = subset(sv, sv2); console.log(kq); |
Kết quả:
1 |
True |
Chú ý: Các đối tượng kiểu Sets và WeakSet trong JavaScript đã được giới thiệu trong ES6. Một số trình duyệt có thể không hỗ trợ việc sử dụng các cấu trúc dữ liệu này.
Trên đây là khái niệm và ví dụ cơ bản về kiểu dữ liệu Set và WeakSet trong JavaScript. Hy vọng mọi người có thể áp dụng vào trong chương trình của mình. Mọi người hãy tiếp tục theo dõi các bài tiếp theo và cập nhật các bài tiếp theo về lập trình JavaScript trên tek4 nhé!
P/s: Cảm ơn mọi người đã tin tưởng tek4!