Đối tượng WeakMap trong javascript

Chào các bạn

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

WeakMap là gì ?

Đối tượng WeakMap là một tập hợp các khóa và giá trị. Trong đó chìa khóa bắt buộc phải là đối tượng còn giá trị thì tùy ý.

Cú pháp

Ví dụ:

• iterable

1let obj = {
2    name: "Hồ Quang Trí"
3}
4
5let map = new Map();
6map.set(obj, 123);
7
8let weakmap = new WeakMap(map);
9
10console.log(weakmap); // WeakMap {{…} => 123}
11console.log(weakmap.get(obj)); // 123

• entries

1let obj = {
2    name: "Hồ Quang Trí"
3}
4
5let map = [[obj, 123]] // entries
6
7let weakmap = new WeakMap(map);
8
9console.log(weakmap); // WeakMap {{…} => 123}
10console.log(weakmap.get(obj)); // 123

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

Trong WeakMap 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. weakmap.delete(key) Xóa bỏ giá trị khỏi WeakMap trả về boolean
   • key Một đối tượng key để loại bỏ
2. weakmap.get(key) Lấy giá trị trong WeakMap trả về giá trị
   • key Một đối tượng key để lấy
3. weakmap.has(key) Kiểm tra key có trong WeakMap. Trả về boolean
   • key Một đối tượng key cần kiểm tra
4. weakmap.set(key, value) Thêm giá trị vào WeakMap
   • key Một đối tượng làm key
   • value Một giá trị bất kỳ

Ví dụ:

• Thêm giá trị

1let obj = {
2    name: "Hồ Quang Trí"
3}
4
5let weakmap = new WeakMap();
6
7weakmap.set(obj, 123);
8
9// obj Chính là đối tượng làm khóa
10// 123 Chính là giá trị

• Lấy giá trị

1let value = weakmap.get(obj);
2
3// obj Chính là đối tượng làm khóa
4// value Là biến lưu trử giá trị trả về

• Kiểm tra

1if(weakmap.has(obj)) {
2    console.log("Chạy"); 
3}
4
5// obj Chính là đối tượng làm khóa kiểm tra

• Xóa phần tử

1let boolean = weakmap.delete(obj);
2
3// obj Chính là đối tượng làm khóa để xóa
4// boolean Chính là biến lưu trử giá trị trả về

Ví dụ hoàn chỉnh:

1// Đối tượng làm key
2let obj = {
3    name: "Hồ Quang Trí"
4}
5
6let weakmap = new WeakMap(); // tạo đối tượng WeakMap
7
8weakmap.set(obj, 123); // Thêm giá trị
9
10let value = weakmap.get(obj); // Lấy ra giá trị
11console.log(value); // 123
12
13if(weakmap.has(obj)) { // Kiểm tra theo key
14    console.log("Chạy"); // Chạy
15}
16
17let boolean = weakmap.delete(obj); // Xóa giá trị theo key
18console.log(boolean); // true

Lưu Ý: Các khóa trong đối tượng WeakMap bắt buộc là object

Ví dụ:

• Không sử dụng object

  1  let weakmap = new WeakMap();
  2
  3  weakmap.set("key", 123); // Uncaught TypeError: Invalid value used as weak map key

Như các bạn có thể thấy. Trong ví dụ trên mình sử dụng chuỗi key làm khóa và có giá trị là số 123. Nhưng nó đã ném ra lỗi.

• Có sử dụng object

  1  let obj = {
  2  name: "Hồ Quang Trí"
  3  };
  4
  5  let weakmap = new WeakMap([[obj, 123]]);
  6
  7  console.log(weakmap); // WeakMap {{…} => 123}
  8  console.log(weakmap.get(obj)); // 123

Như các bạn có thể thấy. Bây giờ nó hoạt động như dự định.

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

Giả sử chúng ta có nhiều người dùng. Mỗi người dùng lưu trữ tin nhắn gì đó. Khi chúng ta đọc tin nhắn đó xong. Chúng ta xóa người dùng đó đi. Thì nó cũng tự động xóa khỏi bộ nhớ.

1let user1 = {
2    name: "User - 1",
3};
4
5let user2 = {
6    name: "User - 2",
7};
8
9let user3 = {
10    name: "User - 3",
11};
12
13
14// Một đối tượng weakmap lưu trử tin nhắn từ người dùng
15let weakmap = new WeakMap([
16    [user1, "Tin nhắn từ User - 1"],
17    [user2, "Tin nhắn từ User - 2"],
18    [user3, "Tin nhắn từ User - 3"],
19]);
20
21// Chúng ta đọc tin nhắn từ người dùng
22let message = weakmap.get(user2); // Chúng ta lấy ra tin nhắn từ người dùng user2
23console.log(message); // Tin nhắn từ User - 2
24
25// Chúng ta xóa đi người dùng user2. Vì chúng ta đã đọc xong tin nhắn. Không muốn lưu trữ tin nhắn đó nữa. Tránh tình trạng tốn bộ nhớ.
26let boolean = weakmap.delete(user2); // Xóa đi người dùng user2
27
28if(boolean) {
29    console.log("Đã xóa thành công"); // Đã xóa thành công
30}
31
32// Ngay bây giờ đối tượng weakmap sẽ tự động xóa user2 khỏi bộ nhớ.

Đơn nhiên là còn nhiều ví dụ khác nữa. Đó là ví dụ nhỏ để các bạn hình dung thôi.

Tổng kết

Trong bài viết này mình đã nói qua về đối tượng WeakMap.

Các bạn nên ghi nhớ trong đầu. Đối tượng WeakMap chỉ có thể lưu trử các key là kiểu object.