1. Set trong JavaScript là gì?

Như ta đã học với toán học chắc hẳn không thể không biết tới tập hợp. Và Set trong Js cũng vậy. Set tương tự như một tập hợp.

Set là một tập hợp các giá trị không có key và không trùng nhau. Vì thế trong tập hợp giá trị sẽ là duy nhất.

Set về mặt khái niệm tương tự như Array hơn là Object, vì đây là danh sách các giá trị chứ không phải cặp key / value. Tuy nhiên, Set không phải là sự thay thế cho array , mà là phần bổ sung để cung cấp hỗ trợ bổ sung để làm việc với dữ liệu trùng lặp.

Set tương tự tập hợp:

  • Các phần tử không cần có thứ tự: { 1, 2, 3 } == { 3, 1, 2 }
  • Không có phần tử trùng lặp: không có tập hợp này { 1, 2, 2, 2, 3 }

Một vài phương thức trong Set:

  • new Set(iterable) : tạo set từ một iterable object, thông thường là mảng các phần tử
  • set.add(value) : thêm phần tử và trả về chính nó (Set).
  • set.delete(value) : xóa phần tử. trả về true nếu phần tử đó tồn tại, ngược lại sẽ false.
  • set.has(value) : kiểm tra phần tử tồn tại trong Set, trả về true/false.
  • set.clear() : xóa mọi phần tử trong Set.
  • set.size : số lượng phần tử.
  • set.values() : Trả về một trình lặp với tất cả các giá trị trong một Tập hợp

Đặc điểm chính là các lệnh gọi set.add (value) lặp đi lặp lại với cùng một giá trị sẽ không có tác dụng gì. Đó là lý do tại sao mỗi giá trị chỉ xuất hiện trong Set một lần.

2. 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ụ:

const sinh_vien = new Set(["Nam", "Thành", "Thành", "Sơn"]);
document.write(sinh_vien);

Hoặc ta có có thể tạo bằng cách:

  • Truyền một mảng tới new Set()
  • Tạo một Tập hợp mới và sử dụng add() để thêm các giá trị
  • Tạo một Tập hợp mới và sử dụng add() để thêm các biến

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ỏ.

3. 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ụ:

<script>
// Tạo một set
const letters = new Set(["a","b","c"]);

// hiển thì với set.size
document.write(letters.size);
</script>

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.

<script>
    const sinh_vien = new Set(["Nam", "Thành", "Thành", "Sơn"]);
    document.write(sinh_vien.has("Thành"));
</script>

Kết quả sẽ là True.

4. 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ụ:

<script>
// Tạo mới với Set
const letters = new Set(["a","b","c"]);

// Thêm một phần tử mới
letters.add("d");
letters.add("e");

// hiển thị với set.size
document.write(letters.size);
</script>

5. 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.

Ví dụ:

<script>
   const sinh_vien = new Set(["Nam", "Thành", "Thành", "Sơn"]);
   sinh_vien.add("NO");
   sinh_vien.delete("Thành");
   document.write(sinh_vien.values());
</script>

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ới 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.

<script> 
const sinh_vien = new Set(["Nam", "Thành", "Thành", "Sơn"]); 
sinh_vien.add("NO"); 
sinh_vien.clear(""); 
document.write(sinh_vien.values()); 
</script>

6. 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 of hoặ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ụ:

let set = new Set(["oranges", "apples", "bananas"]);
 
for (let value of set) alert(value);
 
// Tương tự với forEach:
set.forEach((value, valueAgain, set) => {
  alert(value);
});

Hàm gọi lại được truyền vào forEach có 3 đối số: một value , sau đó là giá trị tương tự valueAgain , và sau đó là Set . Thật vậy, cùng một giá trị xuất hiện trong các đối số hai lần. Bởi vì Set thì không có key .

Cấu trúc foreach vẫn giữ nguyên, tuy nhiên các phần tử của Set không có thứ tự (index), nên thay vì tham số là vị trí, chúng ta có valueAgain , trong đó valueAgain chính là value .