Đối tượng Map trong javascript

Chào các bạn

Trong bài viết này chúng ta cùng nghiên cứu về đối tượng Map

Map là gì ?

Map là một đối tượng lưu trử các cặp khóa và giá trị. Bất kể giá trị nào cũng có thể làm khóa. Lưu trử thứ tự các phím theo thứ tự chúng ta thêm vào.

Cú pháp

1let map1 = new Map();
2let map2 = new Map(entries);
3let map3 = new Map(iterable);

Ví dụ: new Map()

1let map = new Map();

Ví dụ: new Map(entries)

1let obj = {
2    name: "Hồ Quang Trí",
3    age: 100
4}
5
6let map = new Map(Object.entries(obj));

Ví dụ: new Map(iterable)

1let arr = [[10, 9], ["key", "value"]];
2
3let map = new Map(arr);

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

1. map.set(key, value) Thêm giá trị vào máp
   • key Bất kỳ
   • value Giá trị lưu trữ
2. map.get(key) Lấy ra giá trị bằng key
   • key Chìa khóa cần lấy. Nếu có trả về giá trị. Không có trả về undefined
3. map.has(key) Kiểm tra key có trong map hay không
   • key Chìa khóa cần kiểm tra. Trả về true hoặc false
4. map.delete(key) Xóa bỏ giá trị bằng key
   • key chìa khóa cần loại bỏ
5. map.clear() Xóa tất cả khỏi máp
6. map.size Trả về số lượng phần tử có trong máp
7. map.entries() Trả về cặp khóa và giá trị giống [key, value]
8. map.forEach(callbackfn) Chức năng lặp qua máp
   • callbackfn Chức năng gọi lại mỗi khi lặp qua phần tử trong máp

Ví dụ:

• Tạo map

1let map = new Map();

• Thêm phần tử vào map

1map.set("name", "Hồ Quang Trí");
2map.set("age", 100);

• Lấy phần tử từ map

1let name = map.get("name");

• Kiểm tra phần tử trong map

1if(map.has("name")){
2    console.log(map.get("name"));
3}

• Lấy ra kích thước map

1let size = map.size;

• Lấy ra tất cả giá trị có trong map

1let values = map.values();

• Lấy ra tất cả các chìa khóa trong map

1let keys = map.keys();

• Xóa phần tử trong map

1let boolean = map.delete("age");

• Lặp qua map

1map.forEach(function(value, key, map) {
2    // value Chính là giá trị trong map
3    // key Chính là chìa khóa trong map
4    // map Chính là đối tượng map
5    console.log(`Value: ${value} - Key: ${key} - Map: ${map}`);
6});
7
8// Lặp với map.entries()
9for(let [key, value] of map.entries()) {
10    console.log(`Value: ${value} - Key: ${key}`);
11}
12
13// Lặp lấy từng keys
14for(let key of map.keys()) {
15    console.log(`Key: ${key}`);
16}
17
18// Lặp lấy value
19for(let value of map.values()) {
20    console.log(`Value: ${value}`);
21}

• Xóa tất cả các thứ trong map

1map.clear();

Ví dụ hoàn chỉnh.

1let map = new Map();
2
3map.set('name', "Hồ Quang trí");
4map.set("age", 100);
5
6let name = map.get("name"); // Lấy ra phần tử trong map bằng key
7console.log(name); // "Hồ Quang Trí"
8
9if(map.has("name")){ // Kiểm tra key name có trong map hay không
10    console.log(map.get("name")); // "Hồ Quang Trí"
11}
12
13let size = map.size; // Lấy ra kích thước có trong map
14console.log(size); // 2
15
16let boolean = map.delete("age"); // Xóa phần tử có key bằng age
17console.log(boolean); // true
18
19let values = map.values(); // Lấy ra tất cả giá trị có trong map
20console.log(values); // MapIterator {'Hồ Quang trí'}
21
22let keys = map.keys(); // Lấy ra tất cả các chìa khóa trong map
23console.log(keys); // MapIterator {'name'}
24
25
26// --- Lặp map ---
27map.forEach(function(value, key, map) { // 
28    // value Chính là giá trị trong map
29    // key Chính là chìa khóa trong map
30    // map Chính là đối tượng map
31    console.log(`Value: ${value} - Key: ${key} - Map: ${map}`);
32});
33
34for(let [key, value] of map.entries()) {
35    console.log(`Value: ${value} - Key: ${key}`);
36}
37
38for(let key of map.keys()) {
39    console.log(`Key: ${key}`);
40}
41
42
43for(let value of map.values()) {
44    console.log(`Value: ${value}`);
45}
46
47// ---
48
49map.clear(); // Xóa tất cả các thứ trong map

Lợi ích khi sử dụng map thay cho object bình thường

1. Giử nguyên thứ tự phần tử khi được thêm vào

Ví dụ: object

1let objNumber = {
2    4: "Số bốn",
3    10: "Số mười",
4    1: "Số một"
5}
6
7for(let key in objNumber) {
8    console.log(key); // 1, 4, 10
9}

Như các bạn có thể thấy đầu ra các key bây giờ đã thay đổi. Số 1 đã ra trước. Vậy cũng từ ví dụ trên. Chúng ta thử qua map nhé.

Ví dụ: map

1let map = new Map();
2map.set(4, "Số bốn");
3map.set(10, "Số mười");
4map.set(1, "Số một");
5
6
7for(let key of map.keys()) {
8    console.log(key); // 4, 10, 1
9}

Các bạn có thể thấy. Đầu ra các key bây giờ vẫn giữ nguyên theo thứ tự chúng ta thêm vào.

2. Chìa khóa của map có thể bất kỳ kiểu dữ liệu nào

Ví dụ: object

1let user = {
2    name: "Hồ Quang Trí"
3}
4
5let classUser = {
6    id: "Class",
7    [user]: "User - 1"
8}
9
10console.log(classUser.user); // undefined
11
12for(let key in classUser) {
13    console.log(key); // id, [object Object]
14    console.log(typeof key); // string, string
15}
16
17// Nếu chúng ta muốn lấy ra giá trị của user trong classUser thì chỉ cần thay đổi chút
18
19console.log(classUser[user]); // User - 1

Ví dụ: map

1let user = {
2    name: "Hồ Quang Trí"
3}
4
5let map = new Map();
6map.set("id", "Class");
7map.set(user, "User - 1"); // Lấy đối tượng có tên biến là uaer làm key
8
9console.log(map.get(user)); // User - 1
10
11map.forEach((value, key) => {
12    console.log(key); // id, {name: 'Hồ Quang Trí'}
13    console.log(typeof key); // string, object
14})

Từ các ví dụ trên chúng ta sẽ thấy điểm khác nhau giữa map và object

• object Chuyển đổi đối tượng làm key bằng chuỗi [object Object]
• map Map lấy chính đối tượng đó làm key {name: 'Hồ Quang Trí'}

Ví dụ:

1let user = {
2    name: "Hồ Quang Trí"
3}
4
5let user2 = {
6    name: "Tên người dùng 2"
7}
8
9// map
10let map = new Map();
11map.set("id", "Class");
12map.set(user, "User - 1"); // Lấy đối tượng có tên biến là user làm key
13map.set(user2, "User - 2"); // // Lấy đối tượng có tên biến là user2 làm key
14
15console.log(map.get(user));  // User - 1
16console.log(map.get(user2)); // User - 2
17
18
19// object
20let classUser = {
21    id: "Class user",
22    [user]: "User - 1",
23    [user2]: "User - 2"
24};
25
26console.log(classUser[user]);  // User - 2
27console.log(classUser[user2]); // User - 2

Như các bạn nhìn thấy đầu ra giữa map và object khác nhau đúng không.

1. map Đầu ra
   • user ra User - 1
   • user2 ra User - 2
2. object Đầu ra
   • user ra User - 2
   • user2 ra User - 2

Ok. tùy thuộc vào bài toán mà chúng ta áp dụng vào nhé các bạn. Biết càng nhiều càng tốt.

Tổng kết

Trong bài viết này mình đã nói qua về đối tượng map. Cũng như làm rõ thêm vài thứ.

Các bạn chịu khó xem các ví dụ nhé. [OK...]