Cách sử dụng tập hợp (Set) trong JavaScript

const mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(2); // Giá trị 2 đã tồn tại nên không được thêm lại
mySet.add(3);

console.log(mySet); // Output: Set(3) { 1, 2, 3 }

delete(value): Xóa một giá trị khỏi Set

Phương thức .delete(value) được sử dụng để xóa một giá trị cụ thể khỏi Set.

Cú pháp:

setObject.delete(value);

Ví dụ:

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

numbers.delete(3); // Xóa giá trị 3 khỏi Set
console.log(numbers); // Output: Set(4) { 1, 2, 4, 5 }

// Xóa một giá trị không tồn tại
console.log(numbers.delete(10)); // Output: false

Phương thức delete() trả về true nếu xóa thành công, ngược lại trả về false.

has(value): Kiểm tra giá trị có tồn tại trong Set không

Phương thức .has(value) dùng để kiểm tra xem một giá trị có tồn tại trong Set hay không.

Cú pháp:

setObject.has(value);

Ví dụ:

const fruits = new Set(["Apple", "Banana", "Orange"]);

console.log(fruits.has("Banana")); // Output: true
console.log(fruits.has("Mango"));  // Output: false

.size: Trả về số lượng phần tử trong Set

Thuộc tính .size giúp đếm số lượng phần tử hiện có trong Set.

Cú pháp:

setObject.size;

Ví dụ:

const colors = new Set(["Red", "Green", "Blue"]);

console.log(colors.size); // Output: 3

colors.add("Yellow");
console.log(colors.size); // Output: 4

Không giống như mảng (Array), Set không có phương thức .length, mà thay vào đó sử dụng .size để đếm số phần tử.

clear(): Xóa toàn bộ phần tử trong Set

Phương thức .clear() dùng để xóa tất cả phần tử trong Set, giúp làm rỗng tập hợp.

Cú pháp:

setObject.clear();

Ví dụ:

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

console.log(mySet.size); // Output: 5

mySet.clear(); // Xóa toàn bộ phần tử
console.log(mySet.size); // Output: 0
console.log(mySet); // Output: Set(0) {}

Ví dụ tổng hợp sử dụng các phương thức của Set

Dưới đây là một chương trình sử dụng các phương thức add(), delete(), has(), size, và clear() trong Set:

const mySet = new Set();

// Thêm phần tử vào Set
mySet.add("JavaScript");
mySet.add("Python");
mySet.add("C++");

console.log(mySet); // Output: Set(3) { 'JavaScript', 'Python', 'C++' }
console.log("Số lượng phần tử:", mySet.size); // Output: 3

// Kiểm tra sự tồn tại của một phần tử
console.log("Có JavaScript không?", mySet.has("JavaScript")); // Output: true
console.log("Có Ruby không?", mySet.has("Ruby")); // Output: false

// Xóa một phần tử
mySet.delete("Python");
console.log(mySet); // Output: Set(2) { 'JavaScript', 'C++' }

// Xóa toàn bộ phần tử
mySet.clear();
console.log(mySet); // Output: Set(0) {}
console.log("Số lượng phần tử:", mySet.size); // Output: 0

Duyệt qua Set trong JavaScript

Khi làm việc với Set, chúng ta có thể duyệt qua các phần tử bên trong nó bằng nhiều cách khác nhau. Dưới đây là các phương pháp phổ biến:

• Dùng vòng lặp for...of
• Dùng phương thức .forEach()

Dùng vòng lặp for...of để duyệt Set

Vòng lặp for...of là cách đơn giản và phổ biến để duyệt qua từng phần tử của Set.

Cú pháp:

for (let value of setObject) {
    // Thực hiện xử lý với value
}

Ví dụ:

const mySet = new Set(["Apple", "Banana", "Cherry"]);

for (let fruit of mySet) {
    console.log(fruit);
}

Kết quả:

Apple
Banana
Cherry

Vòng lặp for...of duyệt qua từng phần tử trong Set mà không cần truy cập theo chỉ mục (do Set không có chỉ mục như Array).

Dùng phương thức .forEach() để duyệt Set

Ngoài for...of, chúng ta có thể sử dụng phương thức .forEach() để duyệt qua từng phần tử trong Set.

Cú pháp:

setObject.forEach((value) => {
    // Xử lý từng phần tử
});

Ví dụ:

const mySet = new Set(["Red", "Green", "Blue"]);

mySet.forEach((color) => {
    console.log(color);
});

Kết quả:

Red
Green
Blue

Phương thức .forEach() hoạt động tương tự như khi dùng với Array, nhưng do Set không có chỉ mục, nên tham số thứ hai (index) của .forEach() sẽ nhận giá trị giống với tham số đầu tiên (value).

So sánh for...of và .forEach() khi duyệt Set

Ví dụ nâng cao: Kết hợp Set với vòng lặp

Ví dụ 1: Duyệt qua Set và lọc dữ liệu

const numbers = new Set([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

for (let num of numbers) {
    if (num % 2 === 0) {
        console.log(`Số chẵn: ${num}`);
    }
}

Kết quả:

Số chẵn: 2
Số chẵn: 4
Số chẵn: 6
Số chẵn: 8
Số chẵn: 10

const names = new Set(["Alice", "Bob", "Charlie"]);

names.forEach((name) => {
    console.log(`Xin chào, ${name}!`);
});

Xin chào, Alice!
Xin chào, Bob!
Xin chào, Charlie!

const mySet = new Set(["Apple", "Banana", "Cherry"]);

// Cách 1: Dùng Array.from()
const arrayFromSet = Array.from(mySet);
console.log(arrayFromSet); // ["Apple", "Banana", "Cherry"]

// Cách 2: Dùng toán tử spread [...]
const arraySpread = [...mySet];
console.log(arraySpread); // ["Apple", "Banana", "Cherry"]

const numbers = [1, 2, 2, 3, 4, 4, 5, 6, 6, 7];

// Chuyển đổi Array thành Set để loại bỏ trùng lặp
const uniqueNumbers = new Set(numbers);
console.log(uniqueNumbers); // Set { 1, 2, 3, 4, 5, 6, 7 }

// Chuyển lại thành Array nếu cần
const uniqueArray = [...uniqueNumbers];
console.log(uniqueArray); // [1, 2, 3, 4, 5, 6, 7]

const emails = [
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]"
];

const uniqueEmails = [...new Set(emails)];
console.log(uniqueEmails);
// ["[email protected]", "[email protected]", "[email protected]"]

const onlineUsers = new Set();

onlineUsers.add("Alice");
onlineUsers.add("Bob");
onlineUsers.add("Charlie");
onlineUsers.add("Alice"); // Không bị thêm vào lần nữa

console.log(onlineUsers); // Set { 'Alice', 'Bob', 'Charlie' }