Map và Set trong JavaScript

Map và Set là các kiểu cấu truc dữ liệu xuất hiện trong phiên bản ES6. Bài viết này sẽ giải thích, trình bày một số use-case thực tế và lí do Map và Set sẽ có ích hơn Array và Object trong JavaScript.

JavaScript Set

Đầu tiên, chúng ta sẽ tạo một array mẫu, bao gồm các số từ 1 đến 5, và sau đó chúng ta sẽ chuyển array đó thành Set.

const myArray = [1, 2, 3, 4, 5];
const mySet = new Set(myArray);

Set object cho phép lưu trữ các giá trị duy nhất với bất kỳ kiểu dữ liệu nào, dù là giá trị nguyên thủy (int, string, boolean) hay tham chiếu object.

Vậy, Set được dùng để làm gì?

Use-case đầu tiên là sử dụng Set để loại bỏ tất cả các giá trị trùng lặp khỏi array. Chúng ta chỉ cần tạo một set mới và truyền array làm tham số như ở trên.

Bây giờ, nếu chúng ta thêm các giá trị trùng lặp vào array này thì set sẽ tự động loại bỏ chúng. Cùng thử nhé:

const myArray = [1, 2, 3, 4, 5, 5, 5, 2];'

Kết quả:

console.log(myArray) // [1, 2, 3, 4, 5, 5, 5, 2];
console.log(mySet) // Set {1, 2, 3, 4, 5}

Có thể thấy là myArray vẫn giữ nguyên giá trị và ta được mySet chỉ chứa các giá trị duy nhất. Điều này còn đảm bảo được tính bất biến cần thiết nếu bạn theo trường phái Functional Programming.

Một thủ thuật khác là chúng ta có thể dễ dàng biến đổi Set trở lại thành array mà chỉ bao gồm các giá trị unique bằng cách sử dụng spread operator.

const uniqueArray = [...mySet]; // [1, 2, 3, 4, 5]

Các phương thức của Set

Set có nhiều phương thức hữu dụng để xử lý dữ liệu bên trong dễ dàng.

set.add() - Dùng thêm phần tử vào Set. Như đã đề cập ở trên, phần tử có thể thuộc kiểu nguyên thủy hoặc cũng có thể là một array, object.

mySet.add(6); // Set(4) {1, 2, 3, 4, 5, 6}
mySet.add('6'); // Set(5) {1, 2, 3, 4, 5, 6, "6"}
mySet.add({ channelName: 'JavaScript Mastery' }); // Set(6) {1, 2, 3, 4, 5, 6, "6", Object}
mySet.add([ 1, 2, 3 ]); // Set(7) {1, 2, 3, 4, 5, 6, "6", Object, Array}

set.delete()— Dùng để xóa một phần tử khỏi Set.

mySet.delete(5); // Set(6) {1, 2, 3, 4, 6, "6", Object, Array}

**set.clear() ** — Dùng để xóa tất cả các phần tử khỏi Set.

mySet.clear(); // undefined
console.log(mySet); // Set(0) {}

set.size() - Trả về số các phần tử trong Set

console.log(mySet.size); // 0

set.has() — Tương tự như array.includes(), kiểm tra xem set hiện tại có chứa giá trị mong muốn hay không.

console.log(mySet.has(5)); //false

Sự khác biệt giữa Array và Set

Một Array là một danh sách có thứ tự các object. Có thể truy cập vào các phần tử của array bằng cách tham chiếu tới vị trí trong danh sách:

myArray[3];

Còn Set là một vùng chứa các phần tử duy nhất không theo một thứ tự nào. Và do đó không có integer index để chúng ta truy cập vào một phần tử cụ thể trong set.

Vậy khi nào nên dùng Set thay cho Array?

Set không phải là sự thay thế hoàn toàn cho Array, mà để bổ sung các tính năng còn thiếu trong Array.

Vì Set chỉ bao gồm các phần tử độc nhất, nó sẽ là lựa chọn tuyệt vời nếu biết trước rằng cần phải loại bỏ các dữ liệu trùng lặp trong cấu trúc dữ liệu mà chúng ta định xây dựng

JavaScript Map

Map object lưu dữ liệu dưới dạng key-value và ghi nhớ thứ tự thêm vào của các key. Bất kỳ kiểu dữ liệu nào cũng có thể sử dụng làm key hoặc value.

Chúng ta có thể định nghĩa một map như sau:

const myMap = new Map([ [key, value] ]);

Vấn đề mà Map giải quyết

JavaScript chỉ hỗ trợ một key duy nhất trong một object. Nếu chúng ta thêm nhiều key trùng lặp, chỉ có key cuối cùng có giá trị, đó là lí do chúng ta cần sử dụng Map.

const myObject = {};
const a = {};
const b = {};

myObject[a] = 'a';
myObject[b] = 'b';

console.log(myObject); // { '[object Object]': 'b' }

Sử dụng Map:

const a = {};
const b = {};

const myMap = new Map([ [a, 'a'], [b, 'b'] ]);
console.log(myMap); // Map { {} => 'a', {} => 'b' }

Như bạn thấy, Map có thể lưu trữ các key trùng lặp.

Các phương thức của Map

map.set() - Dùng để tạo một cặp key value mới

myMap.set(5, 'five'); // Map(3) {{…} => "a", {…} => "b", 5 => "five"}

map.delete() - Dùng để xóa một phần tử khỏi Map

myMap.delete(5); // true
console.log(myMap); // Map(2) {{…} => "a", {…} => "b"}

map.clear() - Dùng để xóa tất cả các phần tử khỏi Map

myMap.clear(); // undefined
console.log(myMap); // Map(0) {}

map.has() — Dùng để kiểm tra key có tồn tại trong Map.

console.log(myMap.has(5)); // false

map.size() — Trả về số lượng phần từ trong Map.

console.log(myMap.size); // 0

Tham khảo

https://www.freecodecamp.org/news/javascript-maps-and-sets-explained/