Tìm hiểu về Map và Set trong JavaScript

Thứ Tư, 08/11/2023 · 5 phút đọc

Tóm tắt nội dung

Giới thiệu

Map và Set là hai cấu trúc dữ liệu quan trọng được giới thiệu trong ECMAScript 2015 (ES6), mang đến cho JavaScript những công cụ mạnh mẽ để xử lý dữ liệu. Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về cách sử dụng Map và Set, cũng như những ưu điểm và tình huống thích hợp để áp dụng chúng.

Map trong JavaScript

Map là gì?

Map là một cấu trúc dữ liệu cho phép lưu trữ các cặp key-value, trong đó key có thể là bất kỳ kiểu dữ liệu nào (không chỉ giới hạn ở string như Object thông thường).

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

// Khởi tạo Map
const myMap = new Map();

// Thêm phần tử
myMap.set('key1', 'value1');
myMap.set(42, 'value2');
myMap.set({id: 1}, 'value3');

// Lấy giá trị
console.log(myMap.get('key1')); // 'value1'

// Kiểm tra tồn tại
console.log(myMap.has('key1')); // true

// Xóa phần tử
myMap.delete('key1');

// Lấy số lượng phần tử
console.log(myMap.size);

// Xóa tất cả
myMap.clear();

Set trong JavaScript

Set là gì?

Set là một tập hợp các giá trị duy nhất, không cho phép trùng lặp. Mỗi giá trị chỉ xuất hiện một lần trong Set.

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

const myMap = new Map([
  ['name', 'John'],
  ['age', 30]
]);

// Duyệt qua keys và values
for (let [key, value] of myMap) {
  console.log(`${key}: ${value}`);
}

// Chỉ duyệt qua keys
for (let key of myMap.keys()) {
  console.log(key);
}

// Chỉ duyệt qua values
for (let value of myMap.values()) {
  console.log(value);
}

Ứng dụng phổ biến của Set

// Khởi tạo Set
const mySet = new Set();

// Thêm phần tử
mySet.add(1);
mySet.add('hello');
mySet.add({x: 10});

// Kiểm tra tồn tại
console.log(mySet.has(1)); // true

// Xóa phần tử
mySet.delete(1);

// Lấy số lượng phần tử
console.log(mySet.size);

// Xóa tất cả
mySet.clear();

So sánh Map và Object

Ưu điểm của Map so với Object

Key có thể là bất kỳ kiểu dữ liệu nào
Dễ dàng lấy được size
Thứ tự các phần tử được bảo toàn
Không có các key mặc định như prototype

// So sánh Object và Map
const obj = {
  toString: 'Override toString'
};

const map = new Map();
map.set('toString', 'Map toString');

console.log(obj.toString); // [Function: toString]
console.log(map.get('toString')); // 'Map toString'

So sánh Set và Array

Ưu điểm của Set so với Array

Tự động loại bỏ phần tử trùng lặp
Kiểm tra tồn tại phần tử nhanh hơn
Chuyển đổi qua lại dễ dàng

// So sánh thời gian tìm kiếm
const arr = [1, 2, 3, 4, 5];
const set = new Set(arr);

console.time('Array');
arr.includes(5);
console.timeEnd('Array');

console.time('Set');
set.has(5);
console.timeEnd('Set');

Các ứng dụng thực tế

Sử dụng Map

Cache dữ liệu

const cache = new Map();

function getData(key) {
  if (cache.has(key)) {
    return cache.get(key);
  }
  
  const data = // tính toán phức tạp
  cache.set(key, data);
  return data;
}

Quản lý trạng thái

const userStatus = new Map();
userStatus.set(userId, 'online');

Sử dụng Set

Lọc dữ liệu trùng lặp

const uniqueEmails = new Set(users.map(user => user.email));

Kiểm tra tồn tại

const allowedRoles = new Set(['admin', 'editor', 'viewer']);
if (allowedRoles.has(userRole)) {
  // Cho phép truy cập
}

Tổng kết

Map và Set là hai cấu trúc dữ liệu cực kỳ hữu ích trong JavaScript hiện đại:

Map phù hợp khi bạn cần:
- Lưu trữ cặp key-value với key là bất kỳ kiểu dữ liệu nào
- Thường xuyên thêm/xóa phần tử
- Duy trì thứ tự các phần tử
Set phù hợp khi bạn cần:
- Lưu trữ danh sách giá trị duy nhất
- Kiểm tra tồn tại nhanh chóng
- Loại bỏ dữ liệu trùng lặp

Việc sử dụng đúng Map và Set không chỉ giúp code của bạn chạy hiệu quả hơn mà còn giúp nó dễ đọc và bảo trì hơn.

Thẻ:Cấu trúc dữ liệu JavaScript, ES6 Map Set, Học Map Set JavaScript, JavaScript collections, JavaScript Map Set tutorial, Map JavaScript, Map vs Object JavaScript, Set JavaScript, Set vs Array JavaScript, Ví dụ Map Set JavaScript

- Ảnh đại diện bài viết -

Tuanxt