Các phương thức của Set trong JavaScript

Javascript căn bản | 12/03/2025 by Học Javascript

Trong JavaScript, Set là một cấu trúc dữ liệu đặc biệt cho phép lưu trữ các giá trị duy nhất mà không có sự trùng lặp. So với Array, Set mang lại hiệu suất tốt hơn trong một số trường hợp, đặc biệt khi cần kiểm tra sự tồn tại của phần tử hoặc loại bỏ các giá trị trùng lặp.Để làm việc với Set, JavaScript cung cấp nhiều phương thức hữu ích như .add(), .delete(), .has(), .clear(), cũng như cách duyệt qua Set bằng .forEach() hoặc vòng lặp for...of. Những phương thức này giúp thao tác với Set trở nên linh hoạt và hiệu quả hơn.

Bài viết này sẽ đi sâu vào từng phương thức quan trọng của Set, cách sử dụng chúng với các ví dụ minh họa thực tế, cũng như so sánh với các phương thức tương tự của Array.

Định nghĩa Set trong JavaScript

Trong JavaScript, Set là một cấu trúc dữ liệu đặc biệt cho phép lưu trữ các giá trị duy nhất mà không có sự trùng lặp. Điều này có nghĩa là nếu bạn thêm một phần tử đã tồn tại vào Set, nó sẽ không được thêm lần nữa.

Ví dụ về Set:

const mySet = new Set([1, 2, 3, 3, 4, 5, 5]);
console.log(mySet); // Output: Set { 1, 2, 3, 4, 5 }

Như bạn thấy, dù mảng ban đầu chứa các số trùng lặp (3, 5), nhưng khi chuyển sang Set, nó chỉ giữ lại các giá trị duy nhất.

Vai trò của các phương thức trong Set

Để thao tác với Set, JavaScript cung cấp nhiều phương thức hữu ích như:

Thêm phần tử vào Set bằng .add(value).
Xóa phần tử khỏi Set bằng .delete(value).
Kiểm tra xem một phần tử có tồn tại trong Set hay không bằng .has(value).
Lấy số lượng phần tử của Set bằng .size.
Xóa toàn bộ phần tử của Set bằng .clear().
Duyệt qua các phần tử của Set bằng vòng lặp for...of hoặc .forEach().

Những phương thức này giúp Set trở thành một lựa chọn lý tưởng khi cần làm việc với danh sách không trùng lặp và tìm kiếm nhanh trong JavaScript.

So sánh phương thức của Set với phương thức của Array

Dưới đây là bảng so sánh giữa một số phương thức của Set và Array:

Chức năng	Set	Array
Thêm phần tử	`.add(value)`	`.push(value)`
Xóa phần tử	`.delete(value)`	`.splice(index, 1)` hoặc `.filter()`
Kiểm tra phần tử	`.has(value)`	`.includes(value)`
Lấy số lượng phần tử	`.size`	`.length`
Duyệt qua phần tử	`for...of`, `.forEach()`	`for...of`, `.forEach()`, `.map()`
Loại bỏ trùng lặp	Dễ dàng vì `Set` chỉ chứa giá trị duy nhất	Phải dùng `.filter()` hoặc `new Set(array)`

Ví dụ minh họa:

Kiểm tra phần tử trong Set và Array

const mySet = new Set([1, 2, 3]);
console.log(mySet.has(2)); // Output: true

const myArray = [1, 2, 3];
console.log(myArray.includes(2)); // Output: true

Ở đây, Set dùng .has(value), còn Array dùng .includes(value).

Loại bỏ phần tử trùng lặp trong Array bằng Set

const numbers = [1, 2, 3, 3, 4, 5, 5];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5]

Nhóm phương thức thao tác với phần tử trong Set trong JavaScript

JavaScript cung cấp các phương thức giúp thao tác với phần tử trong Set, bao gồm:

.add(value): Thêm phần tử vào Set.
.delete(value): Xóa một phần tử khỏi Set.
.has(value): Kiểm tra xem phần tử có tồn tại trong Set không.
.clear(): Xóa toàn bộ phần tử trong Set.

Dưới đây là cách sử dụng chi tiết từng phương thức:

.add(value) – Thêm phần tử vào Set

Phương thức .add(value) dùng để thêm một phần tử vào Set. Nếu phần tử đã tồn tại, Set sẽ không thêm lại.

Cú pháp:

set.add(value);

Ví dụ minh họa:

const mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(2); // Không thêm vì 2 đã tồn tại
mySet.add(3);

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

Đặc điểm quan trọng:

Set chỉ chứa các giá trị duy nhất, nên nếu phần tử đã tồn tại, nó sẽ không được thêm lại.

.delete(value) – Xóa phần tử khỏi Set

Phương thức .delete(value) dùng để xóa một phần tử khỏi Set.

Cú pháp:

set.delete(value);

Ví dụ minh họa:

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

console.log(mySet.delete(2)); // Output: true (Xóa thành công)
console.log(mySet.delete(5)); // Output: false (Không có 5 trong Set)

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

Đặc điểm quan trọng:

Nếu phần tử tồn tại, .delete(value) xóa phần tử đó và trả về true.
Nếu phần tử không tồn tại, .delete(value) trả về false mà không gây lỗi.

.has(value) – Kiểm tra sự tồn tại của phần tử trong Set

Phương thức .has(value) kiểm tra xem một phần tử có tồn tại trong Set hay không.

Cú pháp:

set.has(value);

Ví dụ minh họa:

const mySet = new Set([10, 20, 30]);

console.log(mySet.has(20)); // Output: true
console.log(mySet.has(40)); // Output: false

Đặc điểm quan trọng:

Trả về true nếu phần tử tồn tại.
Trả về false nếu phần tử không tồn tại.

Phương thức .has(value) rất hữu ích khi cần kiểm tra nhanh sự tồn tại của một phần tử mà không cần duyệt qua toàn bộ Set, giúp tối ưu hiệu suất hơn so với Array.includes(value).

.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, khiến Set trở thành rỗng.

Cú pháp:

set.clear();

Ví dụ minh họa:

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

console.log(mySet.size); // Output: 5 (Có 5 phần tử)

mySet.clear();

console.log(mySet.size); // Output: 0 (Set rỗng)
console.log(mySet); // Output: Set {}

Đặc điểm quan trọng:

.clear() xóa toàn bộ phần tử trong Set, không cần lặp thủ công.
Sau khi gọi .clear(), Set trở thành một tập hợp rỗng với .size === 0.

Nhóm phương thức làm việc với kích thước của Set trong JavaScript

JavaScript cung cấp thuộc tính .size để làm việc với kích thước của Set. Đây là cách đơn giản để biết một Set có bao nhiêu phần tử, tương tự như .length trong Array, nhưng có một số khác biệt quan trọng.

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

Thuộc tính .size dùng để lấy số lượng phần tử có trong Set.

Cú pháp:

set.size;

Ví dụ minh họa:

const mySet = new Set([10, 20, 30, 40]);

console.log(mySet.size); // Output: 4 (Có 4 phần tử)

mySet.add(50);
console.log(mySet.size); // Output: 5 (Thêm 1 phần tử)

mySet.delete(20);
console.log(mySet.size); // Output: 4 (Xóa 1 phần tử)

mySet.clear();
console.log(mySet.size); // Output: 0 (Xóa hết phần tử)

So sánh .size của Set với .length của Array

Thuộc tính	Set (`size`)	Array (`length`)
Trả về	Số lượng phần tử trong `Set`.	Số phần tử trong `Array`.
Tự động cập nhật	Có (Cập nhật ngay khi thêm/xóa phần tử).	Có (Cập nhật khi thêm/xóa phần tử).
Truy cập	Chỉ đọc (`read-only`).	Có thể thay đổi (`writable`).
Cách đếm	Chỉ đếm phần tử duy nhất, không có trùng lặp.	Đếm tất cả phần tử, kể cả trùng lặp.
Tốc độ	Nhanh hơn, không cần đếm thủ công.	`Array.length` chỉ lấy giá trị, nhưng để loại bỏ trùng lặp thì phải duyệt toàn bộ mảng.

Ví dụ minh họa sự khác biệt giữa `Set.size` và `Array.length`

const myArray = [1, 2, 2, 3, 3, 3];
console.log(myArray.length); // Output: 6 (Mảng chứa 6 phần tử, kể cả trùng lặp)

const mySet = new Set(myArray);
console.log(mySet.size); // Output: 3 (Chỉ có 3 phần tử duy nhất: 1, 2, 3)

Nhóm phương thức duyệt qua Set trong JavaScript

Set trong JavaScript cung cấp các cách để duyệt qua các phần tử bên trong, giúp bạn có thể thao tác hoặc xử lý dữ liệu một cách hiệu quả. Hai phương thức phổ biến nhất để duyệt qua Set là .forEach(callback) và for...of.

.forEach(callback) – Lặp qua từng phần tử trong Set

Cách sử dụng .forEach()

Phương thức .forEach() cho phép lặp qua từng phần tử trong Set và thực hiện một hàm callback với mỗi phần tử đó.

Cú pháp:

set.forEach((value, _, set) => {
    // Thực hiện hành động với mỗi phần tử
});

value: Giá trị của phần tử trong Set.
_: Tham số thứ hai (thường là index trong Array) không cần thiết trong Set, nên có thể bỏ qua hoặc đặt _.
set: Chính đối tượng Set đang được duyệt.

Ví dụ minh họa

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

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

Kết quả:

Apple
Banana
Cherry

Lưu ý:

.forEach() duyệt theo thứ tự chèn vào (insertion order).
Vì Set không có index như Array, nên tham số thứ hai của callback function trong .forEach() sẽ là chính giá trị đó.

So sánh .forEach() với vòng lặp for...of

Tiêu chí	`.forEach()`	`for...of`
Cách duyệt	Gọi callback cho từng phần tử	Lặp trực tiếp qua phần tử
Truy cập index	Không có index	Không có index
Cú pháp	Ngắn gọn, tiện dụng	Dễ đọc, gần gũi với `Array`
Có thể break/continue?	Không (phải dùng return)	Có thể dùng break/continue

Vòng lặp for...of với Set

Cách sử dụng `for...of`

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

Cú pháp:

for (let value of set) {
    // Thực hiện hành động với mỗi phần tử
}

Ví dụ minh họa

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

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

Kết quả:

Apple
Banana
Cherry

So sánh for...of với .forEach()

Tiêu chí	`for...of`	`.forEach()`
Cú pháp	Dễ đọc, đơn giản	Ngắn gọn nhưng dùng callback
Có thể dừng vòng lặp?	Có (`break` / `continue`)	Không (phải dùng `return`)
Hiệu suất	Nhanh hơn trong nhiều trường hợp	Chậm hơn vì dùng callback

Chuyển đổi Set sang Array và ngược lại trong JavaScript

Trong JavaScript, Set và Array có thể được chuyển đổi qua lại một cách dễ dàng. Dưới đây là các phương pháp để thực hiện chuyển đổi này.

Chuyển từ Set sang Array

Có hai cách phổ biến để chuyển Set thành Array:

Sử dụng Array.from(set)
Dùng toán tử spread ([...])

Ví dụ minh họa:

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

// Cách 1: Dùng Array.from()
const arrayFromSet = Array.from(mySet);
console.log(arrayFromSet); // [1, 2, 3, 4, 5]

// Cách 2: Dùng toán tử spread
const arrayUsingSpread = [...mySet];
console.log(arrayUsingSpread); // [1, 2, 3, 4, 5]

Ưu điểm:

Chuyển đổi nhanh chóng.
Dễ dàng sử dụng các phương thức Array như map(), filter(), reduce(),...

Chuyển từ Array sang Set

Sử dụng new Set(array) để chuyển đổi Array thành Set, đồng thời loại bỏ các phần tử trùng lặp.

Ví dụ minh họa:

const myArray = [1, 2, 2, 3, 4, 4, 5];

// Chuyển Array thành Set (loại bỏ phần tử trùng lặp)
const setFromArray = new Set(myArray);
console.log(setFromArray); // Set { 1, 2, 3, 4, 5 }

Ưu điểm:

Tự động loại bỏ phần tử trùng lặp.
Hữu ích khi cần lọc dữ liệu duy nhất từ một danh sách.

Ứng dụng thực tế

Một số trường hợp sử dụng phổ biến:

Xóa phần tử trùng lặp trong một mảng bằng cách chuyển đổi Array → Set → Array.
Chuyển Set về Array để dễ dàng thao tác với các phương thức của Array.

Ví dụ: Xóa phần tử trùng lặp trong một mảng

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

// Loại bỏ phần tử trùng lặp
const uniqueNumbers = [...new Set(numbers)];

console.log(uniqueNumbers); // [1, 2, 3, 4, 5, 6]

Ứng dụng thực tế của các phương thức Set trong JavaScript

Loại bỏ phần tử trùng lặp trong mảng

Như ví dụ trên, Set giúp dễ dàng xóa các phần tử trùng lặp, một nhiệm vụ thường gặp khi xử lý dữ liệu.

Ví dụ thực tế:

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

console.log(uniqueEmails); // ["[email protected]", "[email protected]", "[email protected]"]

Ứng dụng: Hữu ích trong việc lọc danh sách email hoặc dữ liệu người dùng.

Tối ưu hóa tìm kiếm với .has()

Phương thức .has() giúp kiểm tra sự tồn tại của phần tử trong Set một cách nhanh hơn so với Array.includes(), vì Set sử dụng cấu trúc hash table.

Ví dụ minh họa:

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

console.log(allowedUsers.has("Alice")); // true
console.log(allowedUsers.has("David")); // false

Ứng dụng:

Kiểm tra quyền truy cập của người dùng.
Xác định xem một phần tử đã tồn tại trong tập dữ liệu hay chưa.

Lưu danh sách các giá trị duy nhất

Do Set chỉ chứa các giá trị duy nhất, nó rất hữu ích để lưu trữ các dữ liệu không trùng lặp, chẳng hạn như danh sách ID hoặc các từ khóa tìm kiếm.

Ví dụ: Lưu lịch sử tìm kiếm không trùng lặp

const searchHistory = new Set();

function addSearch(term) {
    searchHistory.add(term);
}

addSearch("JavaScript");
addSearch("Set trong JavaScript");
addSearch("JavaScript"); // Bị loại bỏ vì đã tồn tại

console.log(searchHistory); // Set { "JavaScript", "Set trong JavaScript" }

Ứng dụng:

Ghi nhớ lịch sử tìm kiếm không trùng lặp.
Lưu danh sách ID duy nhất trong hệ thống.

Kết bài

Set trong JavaScript là một cấu trúc dữ liệu mạnh mẽ giúp lưu trữ danh sách các giá trị duy nhất một cách hiệu quả. Với các phương thức như .add(), .delete(), .has(), .size(), Set không chỉ giúp thao tác dữ liệu nhanh hơn mà còn tối ưu hóa tìm kiếm, loại bỏ phần tử trùng lặp, và quản lý dữ liệu duy nhất.

So với Array, Set có lợi thế lớn về hiệu suất khi kiểm tra sự tồn tại của phần tử, đồng thời giúp xử lý dữ liệu đơn giản hơn mà không cần viết thêm logic lọc trùng lặp.