1. Đối tượng Map trong JavaScript là gì?
Map là một loại cấu trúc dữ liệu trừu tượng(abstract data structure). Trong đó dữ liệu được lưu trữ dưới dạng key/value , chứa một key duy nhất. Và vì tính duy nhất của mỗi key được lưu trữ, và quan trọng là không trùng lặp trong việc lưu trữ.
Map trong Js là một cấu trúc dữ liệu cho phép lưu trữ dữ liệu theo kiểu key-value , tương tự như object . Tuy nhiên, chúng khác nhau ở chỗ là:
- Object chỉ cho phép sử dụng String hay Symbol làm key .
- Map cho phép mọi kiểu dữ liệu (String, Number, Boolean, NaN, Object,…) có thể làm key .
Một vài phương thức trong Map:
- new Map() : tạo map mới
- set Map() : đặt giá trị cho một từ khóa trong Map
- get Map() : nhận giá trị cho một từ khóa trong Map
- delete Map() : xóa một phần tử trong Map được chỉ định
- has Map() : trả về True nếu một từ khóa tồn tại trong Map
- forEach() Map() : gọi một hàm cho cặp key/value trong Map
- entries Map : Trả về một trình lặp với các cặp [key,value] trong Map
- size Map() : trả về số phần tử trong Map
2. Tạo đối tượng có kiểu dữ liệu Map trong JavaScript
Bạn có thể tạo một biến có kiểu dữ liệu Map bằng cách truyền một mảng cho phương thức new Map() để khởi tạo.
Ví dụ:
<script>
// tạo mới
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.write(fruits.get("apples"));
</script>
Bạn có thể truyền vào một iterable object để khởi tạo Map. Khi đó, mỗi phần tử của iterable object sẽ tương ứng với một phần tử của Map. Dĩ nhiên, tham số iterable là không bắt buộc. Khi bạn không truyền vào iterable , Map sẽ rỗng và không có phần tử nào.
Ví dụ:
- [1, 2, 3, 4]: là một iterable object, nhưng mỗi phần tử của nó là number (1, 2, 3, 4). Suy ra, đây không phải là tham số hợp lệ để khởi tạo map.
- [[1, 2], [3, 4]]: là một tham số hợp lệ. Vì nó là iterable object mà mỗi phần tử lại là một mảng 2 phần tử – [1, 2] và [3, 4] . Khi đó thì 1 là key , – 2 là value , 3 là key , – 4 là value .
Ngoài ra b cũng có thể khởi tạo bằng nhiều cách khác như:
- Khởi tạo Map rỗng không truyền vào tham số cho hàm khởi tạo
- Khởi tạo Map từ array
- Khởi tạo Map từ Map
3. Thêm phần tử vào đối tượng kiểu dữ liệu Map
Để thêm phần tử vào Map trong Js, bạn có thể sử dụng phương thức Set , với cú pháp:
map.set(key, value);
Phương thức này gán giá trị value cho khoá key bên trong Map. Nếu key chưa tồn tại thì Map tạo mới phần tử với key tương ứng. Ngược lại, nếu key đã tồn tại thì Map sẽ gán giá trị mới cho nó.
Ví dụ:
<script>
// Them mới Map
const fruits = new Map();
// Đặt giá trị Map
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
document.write(fruits.get("apples"));
</script>
Ta cũng có thể dùng set() để thay đổi giá trị Map hiện có:
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
fruits.set("apples", 200);
document.write(fruits.get("apples"));
</script>
4. Loại bỏ các phần tử kiểu dữ liệu Map
Ta có thể sử dụng phương thức delete() để xóa các phần tử khỏi đối tượng có kiểu dữ liệu Map.
Ví dụ:
<script>
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
// Xóa
fruits.delete("apples");
document.write(fruits.size);
</script>
Phía trên là cách xóa một phần tử khỏi Map. Để xóa hết tất cả các phần tử khỏi Map, bạn sử dụng phương thức clear .
<script>
const map11 = new Map([
["a", 1],
["b", 2],
["c", 3],
]);
document.write(map11);
// Map(3) {"a" => 1, "b" => 2, "c" => 3}
// xóa hết các phần tử
map11.clear();
// map trở thành empty
document.write(map11);
// Map(0) {}
</script>
5. Lấy giá trị của phần tử trong Map
Để lấy value tương ứng với key của map trong JavaScript, bạn có thể sử dụng phương thức map.get(key) như sau:
<script>
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.write(fruits.get("apples"));
</script>
Nếu key tồn tại trong Map thì phương thức map.get(key) trả về value tương ứng, ngược lại thì trả về undefined .
6. Lấy số lượng phần tử trong Map
Để lấy ra số lượng các phần tử của Map trong Js, bạn sử dụng phương thức map.size .
Ví dụ:
<script> const fruits = new Map([ ["apples", 500], ["bananas", 300], ["oranges", 200] ]); document.write(fruits.size); </script>
7. Kiểm tra phần tử tồn tại trong Map
Để kiểm tra xem một phần tử đã tồn tại trong Map hay chưa – thực chất là kiểm tra xem một giá trị key đã tồn tại hay chưa, bạn có thể dùng phương thức has . Nếu trong Map tồn tại key thì phương thức map.has(key) trả về true , ngược lại thì trả về false .
Ví dụ:
<script>
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.write(fruits.has("apples"));
</script>
Hay:
<script>
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
fruits.delete("apples");
document.write(fruits.has("apples"));
</script>
8.Vòng lặp với Map
Map có phương thức tích hợp forEach , giống như Array . Tuy nhiên, có một điểm khác nhau nho nhỏ trong cách lặp. Callback của forEach trong Map lặp lại value , key và map chính nó, trong khi đó Array lặp lại item , index và chính mảng đó.
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
let text = "";
fruits.forEach (function(value, key) {
text += key + ' = ' + value + "<br>"
})
document.write(text);
</script>
Đây là một lợi ích lớn của Map trên Object, vì object cần convert với keys() , values() hoặc entries() , và không có một cách đơn giản nào để lấy ra thuộc tính của một object nếu không convert nó.
9. Phương thức Map.values() và Map.entries()
Phương thức values() trả về một đối tượng trình vòng lặp với các giá trị trong Map
<script>
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
let total = 0;
for (const x of fruits.values()) {
total += x;
}
document.write(total);
</script>
Phương thức entries() trả về một đối tượng trình vòng lặp với [key,values] trong Map
<script>
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
let text = "";
for (const x of fruits.entries()) {
text += x + "<br>";
}
document.write(text);
</script>
