Hướng dẫn thân thiện về JavaScript Sets: Tổ chức dữ liệu hiệu quả

Xin chào các nhà pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của JavaScript Sets. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - tôi sẽ là người hướng dẫn đáng tin cậy của bạn, và chúng ta sẽ khám phá chủ đề này từng bước một. Cuối cùng của bài hướng dẫn này, bạn sẽ manipulates Sets như một chuyên gia!

JavaScript - Sets

Set là gì?

Trước khi chúng ta nhảy vào mã, hãy nói về Set là gì. Hãy tưởng tượng bạn có một túi bi, nhưng túi này đặc biệt - nó chỉ cho phép một viên bi mỗi màu. Đó chính xác là Set trong JavaScript: một bộ sưu tập chỉ có thể chứa các giá trị duy nhất. Không cho phép trùng lặp!

Cú pháp: Tạo một Set

Hãy bắt đầu với những điều cơ bản. Đây là cách bạn tạo một Set mới:

let mySet = new Set();

Đó là tất cả! Bạn vừa tạo một Set trống. Nhưng nếu bạn muốn tạo một Set với một số giá trị ban đầu? Không có vấn đề gì:

let fruitSet = new Set(['apple', 'banana', 'orange']);

Bây giờ bạn có một Set với ba loại trái cây. Nhớ rằng, ngay cả khi bạn cố gắng thêm một 'apple' khác, nó sẽ không được bao gồm vì Sets chỉ giữ các giá trị duy nhất.

Tham số: Bạn có thể đặt gì trong một Set?

Sets trong JavaScript rất linh hoạt. Bạn có thể thêm các loại giá trị khác nhau:

Số
Chuỗi
Đối tượng
Mảng
thậm chí là các Sets khác!

Hãy xem một ví dụ:

let mixedSet = new Set([1, 'two', {three: 3}, [4, 5]]);
console.log(mixedSet);

Nếu bạn chạy đoạn mã này, bạn sẽ thấy rằng Set của chúng ta chứa tất cả các loại giá trị khác nhau.

Ví dụ: Chơi với Sets

Bây giờ chúng ta đã biết các nguyên tắc cơ bản, hãy cùng nhau chơi với Sets!

Thêm và xóa các phần tử

let colorSet = new Set();

// Thêm các phần tử
colorSet.add('red');
colorSet.add('blue');
colorSet.add('green');

console.log(colorSet); // Output: Set(3) { 'red', 'blue', 'green' }

// Thử thêm một phần tử trùng lặp
colorSet.add('red');
console.log(colorSet); // Output: Set(3) { 'red', 'blue', 'green' }

// Xóa một phần tử
colorSet.delete('blue');
console.log(colorSet); // Output: Set(2) { 'red', 'green' }

Như bạn có thể thấy, khi chúng ta cố gắng thêm 'red' lần nữa, Set không thay đổi. Đó là vẻ đẹp của Sets - chúng tự động xử lý trùng lặp cho chúng ta!

Kiểm tra các phần tử

Muốn biết Set của bạn có chứa một giá trị cụ thể không? Sử dụng phương thức has():

let animalSet = new Set(['dog', 'cat', 'bird']);

console.log(animalSet.has('dog')); // Output: true
console.log(animalSet.has('fish')); // Output: false

Kích thước của một Set

Để biết có bao nhiêu phần tử duy nhất trong Set của bạn, sử dụng thuộc tính size:

let numberSet = new Set([1, 2, 3, 4, 5, 5, 5]);
console.log(numberSet.size); // Output: 5

Dù chúng ta thêm ba lần số 5, Set chỉ đếm một lần!

Các thao tác toán học với Sets

Bây giờ, hãy đội mũ toán học và xem xét một số thao tác chúng ta có thể thực hiện với Sets.

Tổng hợp (Union)

Tổng hợp kết hợp hai Sets, giữ lại tất cả các phần tử duy nhất từ cả hai:

let set1 = new Set([1, 2, 3]);
let set2 = new Set([3, 4, 5]);

let unionSet = new Set([...set1, ...set2]);
console.log(unionSet); // Output: Set(5) { 1, 2, 3, 4, 5 }

Giao (Intersection)

Giao giữ lại chỉ các phần tử tồn tại trong cả hai Sets:

let set1 = new Set([1, 2, 3, 4]);
let set2 = new Set([3, 4, 5, 6]);

let intersectionSet = new Set([...set1].filter(x => set2.has(x)));
console.log(intersectionSet); // Output: Set(2) { 3, 4 }

Hiệu (Difference)

Hiệu giữ lại các phần tử từ Set đầu tiên mà không có trong Set thứ hai:

let set1 = new Set([1, 2, 3, 4]);
let set2 = new Set([3, 4, 5, 6]);

let differenceSet = new Set([...set1].filter(x => !set2.has(x)));
console.log(differenceSet); // Output: Set(2) { 1, 2 }

Tham khảo JavaScript Set

Dưới đây là bảng tóm tắt tất cả các phương thức và thuộc tính chúng ta đã thảo luận, cộng với một số thêm:

Phương thức/Thuộc tính	Mô tả
`new Set()`	Tạo một Set mới
`add(value)`	Thêm một phần tử mới vào Set
`delete(value)`	Xóa một phần tử khỏi Set
`has(value)`	Trả về true nếu giá trị tồn tại trong Set
`clear()`	Xóa tất cả các phần tử khỏi Set
`size`	Trả về số lượng phần tử trong Set
`forEach(callback)`	Gọi một hàm cho mỗi phần tử trong Set
`values()`	Trả về một bộ.Iterator với tất cả các giá trị trong Set
`keys()`	Giống như values()
`entries()`	Trả về một bộ.Iterator với các cặp [value, value] từ Set

Và thế là bạn đã hoàn thành bài học crash course về JavaScript Sets. Nhớ rằng, Sets giống như những người bạn luôn giữ mọi thứ duy nhất và tổ chức - chúng rất hữu ích khi bạn làm việc với dữ liệu không nên có trùng lặp.

Thực hành tạo và manipulates Sets, và sớm bạn sẽ thấy mình tự nhiên sử dụng chúng trong các cuộc phiêu lưu lập trình của mình. Ai biết được? Có thể bạn sẽ bắt đầu thấy Sets ở mọi nơi - giống như cái ngăn kéo tất cả các đôi tất khác nhau trong đó không có hai đôi tất alike!

Tiếp tục lập trình, luôn tò mò, và nhớ rằng: trong thế giới của Sets, sự duy nhất là tên của trò chơi!

Credits: Image by storyset