Kiểu Dữ Liệu Map Và Set Trong Javascript

Posted on by adminChuyên mục:Kiến thức Internet

Hôm nay bạn hãy cùng mình đi vào tìm hiểu về khái niệm cũng như cách sử dụng kiểu dữ liệu Map và Set trong ngôn ngữ lập trình Javascript để phát triển web nhé.

Trong các bài học trước, chúng ta thường lưu dữ liệu có cấu trúc phức tạp vào trong object (đối tượng) và array(mảng). Nhưng trong thực tế thì nó chưa đủ để đáp ứng yêu cầu khi làm việc với các dữ liệu mà độ phức tạp cao như ngày nay.
Do đó để cho việc thao tác với dữ liệu dễ dàng hơn, tiết kiệm thời gian và công sức thì phiên bản ES6 có cung cấp cho chúng ta hai loại kiểu dữ liệu mới là Map và Set.

Bây giờ chúng ta sẽ cùng nhau đi vào tìm hiểu hai kiểu dữ liệu này nhé.

Kiểu Dữ Liệu Map Trong Javascript

Kiểu dữ liệu Map khá tương đồng với kiểu dữ liệu object (đối tượng) là cho phép sử dụng cặp giá trị Thuộc tính: Giá trị để lưu dữ liệu. Nhưng điểm khác biệt của nó là:

  • Object (đối tượng): Chỉ cho phép giá trị chuỗi hoặc symbol để thiết lập key(thuộc tính) trong cặp giá trị. (Mình sẽ có một bài riêng nói về kiểu symbol sau nhé)
  • Map: Cho phép tất cả các kiểu dữ liệu dùng để thiết lập key(thuộc tính) trong cặp giá trị.

Và do chúng được sắp xếp key(thuộc tính) theo thứ tự như kiểu dữ liệu mảng nên Map() có thể ghi nhớ vị trí sắp xếp của các key (thuộc tính) đã được chèn vào.

Khởi Tạo Map Javascript

Và do chúng được sắp xếptheo thứ tự như kiểu tài liệu mảng nêncó thể ghi nhớ vị trí sắp xếp của cácđã được chèn vào .

Chúng ta sẽ khởi tạo một biến với kiểu dữ liệu Map bằng từ khóa new thông qua ví dụ sau đây nhé:

Đoạn Code:

 let map = new Map();
 console.log(map);

Kết Quả:

Khởi tạo Map Trong Javascript

Bây giờ chúng ta sẽ thử đi vào kiểm tra kiểu dữ liệu của Map trong Javascript bằng hai lệnh là typeof() và instanceof() nha. Bạn có thể tham khảo thêm hai phương thức này ở đây nhé. Bây giờ để dễ hình dung bạn xem đoạn code sau nhé:

Đoạn Code:

 let map = new Map();
 console.log(typeof map);
 console.log(map instanceof Map);

Kết Quả:

Kiểm tra kiểu dữ liệu Map Trong Javascript

Thêm Đối Tượng Vào Map Javascript

Chúng ta có thể thêm dữ liệu vào Map thông qua một phương thức được cung cấp sẵn có tên là set(). Với tham số đầu tiên là key(thuộc tính) và tham số thứ hai là value(giá trị). Để nắm rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 let map = new Map();
 map.set("Ho", "Nguyễn"); 
 map.set("Ten", "An");
 console.log(map);

Kết Quả:

Phương thức set() với Map Trong Javascript

Ví dụ trên thì chúng ta lấy kiểu dữ liệu chuỗi để làm key(thuộc tính) trong cặp giá trị. Bây giờ chúng ta thử sử dụng các loại kiểu dữ liệu khác như số, boolean để xem kết quả sao nhé:

Đoạn Code:

 let map = new Map();
 map.set(2, "Số 2"); 
 map.set(true, "Đúng");
 console.log(map);

Kết Quả:

Phương thức set() với dữ liệu số, boolean Trong Map Javascript

Bây giờ chúng ta sẽ đi vào tìm hiểu cách sử dụng kiểu dữ liệu object (đối tượng) để làm key(thuộc tính) trong map thông qua ví dụ dưới đây nhé:

Đoạn Code:

 let map = new Map();
 map.set( {ten: "An"}, "Học Sinh"); 
 map.set( {ten: "Lan"}, "Giáo Viên");
 console.log(map);

Kết Quả:

Phương thức set() với dữ liệu object Trong Map JavascriptChúng ta cũng hoàn toàn có thể gán nhiều cặp giá trị ( key : value ) trong một lần bằng những cách sau đây :

Thiết lập nhiều cặp giá trị bằng từ khóa new:

Đoạn Code:

 let map = new Map([["Ho", "Nguyễn"], ["Ten", "An"]]);
 console.log(map);

Kết Quả:

Khai báo nhiều cặp giá trị bằng new Trong Map Javascript

Thiết lập nhiều cặp giá trị bằng phương thức set():

Đoạn Code:

 let map = new Map();
 map.set("Ho", "Nguyễn").set("Ten", "An");
 console.log(map);

Kết Quả:

Khai báo nhiều cặp giá trị bằng set() Trong Map Javascript

Lấy Giá Trị Trong Map Javascript

Bây giờ chúng ta sẽ đi vào lấy giá trị trong cặp key:value ở Map bằng phương thức get() thông qua ví dụ sau đây nhé:

Đoạn Code:

 let map = new Map();
 map.set("Ho", "Nguyễn").set("Ten", "An");
/*Lấy giá trị bằng key trong Map*/
 console.log("Họ là: " + map.get("Ho"));
 console.log("Tên là: " + map.get("Ten"));

Kết Quả:

Lấy giá trị bằng get() Trong Map Javascript

Nếu bạn dùng phương thức get với key không tồn tại trong Map thì giá trị trả về sẽ là undefined.

Kiểm Tra Đối Tượng Trong Map Javascript

Chúng ta có thể kiểm tra một đối tượng có tồn tại hay không ở trong Map bằng cách sử dụng phương thức has().
Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 let map = new Map();
 map.set("Ho", "Nguyễn").set("Ten", "An");
/*Lấy giá trị bằng key trong Map*/
 console.log("Thuộc tính Tên trong Map: " + map.has("Ten"));
 console.log("Thuộc tính Tuổi trong Map: " + map.has("Tuoi"));

Kết Quả:

Kiểm tra đối tượng bằng has() Trong Map Javascript

Thông Tin Số Lượng Đối Tượng Trong Map Javascript

Chúng ta có thể lấy thông tin số lượng đối tượng trong Map bằng cách sử dụng phương thức size().
Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 let map = new Map();
 map.set("Ho", "Nguyễn").set("Ten", "An");
/*Lấy số lượng đối tượng trong Map*/
 console.log(map.size);

Kết Quả:

Lấy số lượng đối tượng bằng size Trong Map Javascript

Lặp Lấy Các key Của Đối Tượng Trong Map Javascript

Khi làm việc với dữ liệu thì điều chúng ta muốn nhất là có thể linh hoạt lấy các thông tin khác nhau ở trong dữ liệu đó.
Do đó trong Javascript cung cấp cho chúng ta một phương thức là keys() kết hợp với lệnh for...of để lấy các key(thuộc tính) của đối tượng trong Map. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 let map = new Map();
 map.set("Lan", "Giáo Viên").set("An", "Học Sinh").set("Hưng", "Sinh Viên");
 for(let ten of map.keys()) {
    console.log(ten);
 }

Kết Quả:

Lấy key bằng keys() Trong Map Javascript

Lặp Lấy Các Giá Trị Của Đối Tượng Trong Map Javascript

Chúng ta có thể lấy giá trị của đối tượng trong Map bằng cách sử dụng phương thức values().
Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 let map = new Map();
 map.set("Lan", "Giáo Viên").set("An", "Học Sinh").set("Hưng", "Sinh Viên");
 for(let chucVu of map.values()) {
    console.log(chucVu);
 }

Kết Quả:

Lấy giá trị bằng values() Trong Map Javascript

Xóa Các Đối Tượng Trong Map Javascript

Chúng ta có thể xóa từng đối tượng trong Map bằng cách sử dụng lệnh delete().
Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 let map = new Map();
 map.set("Lan", "Giáo Viên").set("An", "Học Sinh").set("Hưng", "Sinh Viên");
 /*Xóa từng phần tử*/
 map.delete("Lan");
 console.log(map);

Kết Quả:

Xóa từng đối tượng Trong Map bằng delete() JavascriptXóa toàn bộ đối tượng người dùng trong Map :

Đoạn Code:

 let map = new Map();
 map.set("Lan", "Giáo Viên").set("An", "Học Sinh").set("Hưng", "Sinh Viên");
 /*Xóa tất cả phần tử*/
 map.clear();
 console.log(map);

Kết Quả:

Xóa từng đối tượng Trong Map bằng clear() Javascript

Kiểu Dữ Liệu Set Trong Javascript

Kiểu dữ liệu Set được giới thiệu trong phiên bản ES6 giúp chúng ta lưu trữ nhiều kiểu dữ liệu khác nhau với giá trị của chúng là duy nhất ở trong Set. Các loại dữ liệu được chứa trong Set rất đa dạng như là chuỗi, số… hay với các cấu trúc dữ liệu phức tạp như là mảng hoặc đối tượng.

Bây giờ chúng ta đi vào tìm hiểu cách khởi tạo Set ở dưới đây nhé.

Khởi Tạo Set Javascript

Bây giờ chúng ta sẽ tạo một biến với kiểu dữ liệu Set bằng từ khóa new() thông qua ví dụ dưới đây nhé:

Đoạn Code:

 let set = new Set([1, 2, 3, 4]);
 console.log(set);

Kết Quả:

Khởi tạo Set Trong Javascript

Bây giờ chúng ta sẽ đi vào ví dụ minh họa để giúp bạn thấy là Set chỉ lưu giá trị duy nhất, mình sẽ thử khai báo hai giá trị trùng nhau ở đoạn code dưới đây để xem kết quả sao nhé:

Đoạn Code:

 let set = new Set([1, 2, 3, 3, 4, 4]);
 console.log(set);

Kết Quả:

Tính năng của Set Trong Javascript

Cách Thêm Dữ Liệu Set Javascript

Chúng ta có thể thêm các dữ liệu khác nhau vào trong Set bằng phương thức add().
Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 let set = new Set([1, 2, 3]);
 set.add(4).add(5);
 console.log(set);

Kết Quả:

Phuong thức add() trong Set Trong Javascript

Cách Kiểm Tra Số Lượng Phần Tử Set Javascript

Chúng ta có thể kiểm tra số lượng phần tử có trong Set bằng phương thức size().
Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 let set = new Set([1, 2, 3]);
 console.log(set.size);

Kết Quả:

Phuong thức size() trong Set Trong Javascript

Cách Kiểm Tra Phần Tử Set Javascript

Chúng ta có thể kiểm tra một phần tử có tồn tại hay không ở trong Set bằng phương thức has().
Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 let set = new Set([1, 2, 3]);
 console.log("Có tồn tại phần tử số 2: " + set.has(2));
 console.log("Có tồn tại phần tử số 5: " + set.has(5));

Kết Quả:

Phuong thức has() trong Set Trong Javascript

Cách Xóa Phần Tử Set Javascript

Chúng ta có thể xóa một hay toàn bộ phần tử có trong Set bằng phương thức delete() hoặc clear() .
Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 let set = new Set([1, 2, 3]);
/* Xóa một phần tử */
 set.delete(1);
 console.log("Phần tử còn lại trong Set là " + set.size);

/*Xóa toàn bộ phần tử trong Set*/
 set.clear();
 console.log("Phần tử còn lại trong Set là " + set.size);

Kết Quả:

Xóa phần tử trong Set Trong Javascript

Cách Lặp Lấy Phần Tử Set Javascript

Chúng ta có thể sử dụng vòng lặp for...of để lấy các phần tử trong Set. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 let set = new Set([1, 2, 3, 5]);
 for (let phanTu of set) console.log(phanTu);

Kết Quả:

Lặp phần tử trong Set Trong Javascript

Tổng kết:

Bây giờ chúng ta rút ra một số phương thức sử dụng với kiểu dữ liệu Map và Set ở sau đây nha:

Kiểu Dữ Liệu Map:
Phương Thức Công Dụng
new Map() Khởi tạo biến với kiểu dữ liệu Map.
map.set(thuộc tính, giá trị) Lưu trữ giá trị theo thuộc tính (key, value).
map.get(thuộc tính) Trả về giá trị theo thuộc tính.
map.has(thuộc tính) Trả về true nếu thuộc tính tồn tại ngược lại sẽ trả về false.
map.delete(thuộc tính) Xóa giá trị bằng thuộc tính.
map.clear() Xóa tất cả các đối tượng trong Map.
map.size() Trả về số lượng đối tượng trong Map.
Kiểu Dữ Liệu Set:
Phương Thức Công Dụng
new Set() Khởi tạo biến với kiểu dữ liệu Set.
set.add(giá trị) Thêm giá trị vào trong Set.
set.delete(giá trị) Xóa giá trị một phần tử trong Set.
set.has(giá trị) Trả về true nếu giá trị tồn tại ngược lại sẽ trả về false.
set.clear() Xóa tất cả giá trị trong Set.
set.size Trả về số lượng đối tượng trong Set.

Qua đây mình mong bài viết sẽ giúp bạn hiểu được khái niệm và cách sử dụng của hai kiểu dữ liệu là Map và Set trong ngôn ngữ Javascript và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

admin