Đối tượng WeakSet trong javascript

Chào các bạn

Trong bài viết này mình sẽ nói về đối tượng WeakSet

WeakSet là gì ?

Đối tượng WeakSet dùng để lưu trử các giá trị duy nhất không trùng nhau. Giá trị ở đây chính là các kiểu object

Cú pháp

Ví dụ:

• iterable

1let obj = {
2    from: 1,
3    to: 5,
4    [Symbol.iterator]() {
5        let from = this.from;
6        let to = this.to;
7        return {
8            next() {
9                if (from < to) {
10                    return {
11                        done: false,
12                        value: {
13                            name: `From: ${from++}`,
14                        },
15                    };
16                }
17                return { done: true, value: undefined };
18            },
19        };
20    },
21};
22
23let weakset = new WeakSet([...obj]);
24
25console.log(weakset); // WeakSet {{…}, {…}, {…}, {…}}

• values

1let values = [
2    {
3        name: "User - 1",
4    },
5    {
6        name: "User - 2",
7    },
8    {
9        name: "User - 3",
10    },
11];
12
13let weakset = new WeakSet(values);
14
15console.log(weakset); // WeakSet {{…}, {…}, {…}}

Phương pháp và tài sản

Trong WeakSet có vài phương pháp và tài sản. Chúng ta cùng đi qua nó nhé. Giải thích ý nghĩa rồi đi vào ví dụ sau.

1. weakset.add(value) Thêm giá trị vào đối tượng WeakSet
   • value Một đối tượng để thêm
2. weakset.delete(value) Xóa giá trị trong đối tượng WeakSet. Trả về boolean
   • value Một đối tượng giá trị dùng để xóa
3. weakset.has(value) Kiểm tra giá trị. Trả về boolean
   • value Một đối tượng kiểm tra

Ví dụ:

• Thêm giá trị

  1  // đối tượng làm giá trị
  2  let obj = {
  3  name: "Hồ Quang Trí"
  4  }
  5
  6  let weakset = new WeakSet(); // Tạo đối tượng WeakSet
  7
  8  weakset.add(obj);  // Thêm gía trị

• Kiểm tra

  1  if(weakset.has(obj)) { // Kiểm tra
  2      console.log("Chạy");
  3  }

• Xóa giá trị

  1  weakset.delete(obj); // Xóa

Ví dụ hoàn chỉnh:

1let obj = {
2    name: "Hồ Quang Trí"
3}
4
5let weakset = new WeakSet(); // Tạo đối tượng WeakSet
6
7weakset.add(obj);  // Thêm giá trị
8
9
10if(weakset.has(obj)) { // Kiểm tra
11    console.log("Chạy"); // Chạy
12}
13
14let boolean = weakset.delete(obj); // Xóa giá trị
15console.log(boolean); // true

Lưu Ý: Các giá trị trong đối tượng WeakMap bắt buộc phải là kiểu object

Ví dụ:

• Không sử dụng object

  1  let data = [1, 2, 3];
  2
  3  let weakset = new WeakSet(data); // Uncaught TypeError: Invalid value used in weak set

Như các bạn có thể thấy. Nếu giá trị của chúng ta không phải là kiểu object thì lỗi văng ra. Giá trị ở đây là số 1 2 3

• Sử dụng object

  1  let data = [
  2      {
  3          name: "User - 1",
  4      },
  5      {
  6          name: "User - 2",
  7      },
  8      {
  9          name: "User - 3",
  10      },
  11  ];
  12
  13  let weakset = new WeakSet(data);
  14  console.log(weakset); // WeakSet {{…}, {…}, {…}}

Như các bạn có thể thấy. Nếu chúng ta thay giá trị thành kiểu object thì bây giờ nó hoạt động như dự định.

Đơn nhiên nếu làm như vậy bây giờ chúng ta muốn xóa nó thì như thế nào.

1let data = [
2    {
3        name: "User - 1",
4    },
5    {
6        name: "User - 2",
7    },
8    {
9        name: "User - 3",
10    },
11];
12
13let weakset = new WeakSet(data);
14console.log(weakset); // WeakSet {{…}, {…}, {…}}
15
16let user2 = data[1]; // Lấy ra đối tượng User - 2
17let boolean = weakset.delete(user2); // Xóa User - 2
18 
19if(boolean) { // true
20    console.log("Đã xóa thành công"); // Đã xóa thành công
21}
22
23console.log(weakset); // WeakSet {{…}, {…}}

Áp dụng vào thực tế

Giả sữ chúng ta có một mãng người dùng. Nhưng nhiều lúc người dùng trùng nhau làm cho kết quả người dùng xuất hiện quá nhiều lần. Bây giờ chúng ta chỉ muốn người dùng chỉ xuất hiện 1 lần.

Ví dụ:

• Thêm người dùng đã tồn tại

1let user1 = {
2    name: "User - 1"
3};
4
5let user2 = {
6    name: "User - 2"
7};
8
9let user3 = {
10    name: "User - 3"
11};
12
13let user4 = {
14    name: "User - 4"
15};
16
17let user5 = {
18    name: "User - 5"
19};
20
21// Mảng user mặc định
22let arrUser = [user1, user2, user3, user4, user5];
23
24console.log(arrUser.length); // 5
25
26// Chức năng thêm user
27function addUser(user) {
28   if(typeof user === "object" && user.constructor.name === 'Object') {
29       arrUser.push(user);
30   }
31}
32
33// user3 và user5 thêm lại không cần thiết
34addUser(user3);
35addUser(user5);
36addUser({name: "User demo"}); // user cần thiết vì chưa có trong mảng arrUser
37
38console.log(arrUser.length); // 8

Như các bạn có thể thấy user3 và user5 ở đây thêm vào lại là không cần thiết. Đơn nhiên cái if ở kia mình cũng có thể dùng phương pháp includes để kiểm tra. Nhưng ở đây mình chỉ muốn giải thích về weakset

• Dùng weakset

1let user1 = {
2    name: "User - 1",
3};
4
5let user2 = {
6    name: "User - 2",
7};
8
9let user3 = {
10    name: "User - 3",
11};
12
13let user4 = {
14    name: "User - 4",
15};
16
17let user5 = {
18    name: "User - 5",
19};
20
21// Mảng user mặc định
22let arrUser = [user1, user2, user3, user4, user5];
23
24// Dùng WeakSet
25let weakset = new WeakSet(arrUser); // Lưu giá trị mặc định của arrUser
26
27console.log(arrUser.length); // 5
28
29// Chức năng thêm user
30function addUser(user) {
31    if (typeof user === "object" && user.constructor.name === "Object") {
32        if (weakset.has(user)) { // Nếu đã tồn tại thì bỏ qua
33            return;
34        }
35        arrUser.push(user); // Không tồn tại thì thêm vào
36    }
37}
38
39// user3 và user5 thêm lại không cần thiết
40addUser(user3);
41addUser(user5);
42addUser({ name: "User demo" }); // user cần thiết vì chưa có trong mảng arrUser
43
44console.log(arrUser.length); // 6

Bây giờ thì nó đã hoạt động như dự tính. Đầu ra 5, 6 thay cho 5, 8. Như vậy chỉ có một người dùng mới được thêm vào.

Tổng kết

Trong bài viết này mình đã nói qua về WeakSet. Các bạn nên ghi nhớ. Giá trị của WeakSet chỉ có thể là kiểu object