Tìm hiểu Javascript Maps

Trong phát triển JavaScript hiện đại, việc quản lý các key-value một cách hiệu quả là rất quan trọng để xây dựng các ứng dụng có hiệu năng tốt. Mặc dù objects truyền thống vẫn thường được sử dụng, cấu trúc dữ liệu Map được giới thiệu trong ES6 (ES2015) cung cấp các tính năng mạnh mẽ, khiến nó trở thành một công cụ không thể thiếu của bất kỳ developer nào. Trong bài hướng dẫn này, chúng ta sẽ tìm hiểu tại sao và khi nào nên sử dụng Map, những ưu điểm của nó so với plain objects, và các ví dụ thực tế minh họa cách áp dụng trong thực tế.

Map trong JavaScript là gì?

Map là một cấu trúc dữ liệu tích hợp sẵn cho phép bạn lưu trữ các key-value và nhớ thứ tự chèn ban đầu của các khóa, trong đó cả key và value đều có thể là bất kỳ kiểu dữ liệu nào. Khác với objects chỉ hỗ trợ khóa là string và symbol, Map có thể sử dụng functions, objects, hoặc bất kỳ kiểu dữ liệu nguyên thủy nào làm khóa.

Map và Object: Khi Nào Nên Dùng Cái Nào?

Trước khi đi sâu hơn, hãy tìm hiểu tại sao bạn nên chọn Map thay vì object thông thường:

Ưu điểm của Map:

Linh hoạt về Key Types - Key Types Flexibility: Map chấp nhận bất kỳ giá trị nào làm khóa
Quản lý Kích thước - Size Management: Truy cập trực tiếp kích thước của collection thông qua thuộc tính .size
Duyệt Tốt hơn - Better Iteration: Có sẵn các phương thức duyệt và hiệu suất tốt hơn cho việc thêm/xóa thường xuyên
Không Xung đột Tên - No Name Collisions: Không phải lo lắng về các thuộc tính kế thừa
Hiệu suất Bộ nhớ Tốt hơn - Better Memory Performance: Được tối ưu hóa cho việc thêm và xóa thường xuyên

Tạo một Map

Để tạo một Map, bạn có thể sử dụng cú pháp sau:

let map = new Map();

// Or
const skillMap = new Map([
  ['JavaScript', 'Advanced'],
  ['Python', 'Intermediate'],
  ['Java', 'Beginner']
]);

Thêm và Lấy Giá Trị

Bạn có thể thêm các key-value vào Map bằng phương thức set và lấy giá trị bằng phương thức get:

map.set('name', 'John');
console.log(map.get('name')); // Output: John

key có thể là bất kỳ kiểu dữ liệu nào:

const myMap = new Map();
myMap.set('name', 'John Doe');
myMap.set(123, 'Some Number');
myMap.set(true, 'A Boolean Value');
myMap.set({ key: 'objectKey' }, 'An Object Value');

console.log(myMap); // Output: Map(4) { 'name' => 'John Doe', 123 => 'Some Number', true => 'A Boolean Value', {…} => 'An Object Value' }

Kiểm Tra Sự Tồn Tại của Khóa

Sử dụng phương thức has để kiểm tra xem một khóa có tồn tại trong Map hay không:

console.log(map.has('name')); // Output: true
console.log(map.has('age')); // Output: false

Xóa Giá Trị

Bạn có thể xóa một key-value bằng phương thức delete hoặc xóa tất cả các key-value bằng phương thức clear:

map.delete('name');
console.log(map.has('name')); // Output: false

map.set('name', 'John');
map.set('age', 30);
map.clear();
console.log(map.size); // Output: 0

Duyệt Qua Các Phần Tử

Map cung cấp nhiều phương thức để duyệt qua các phần tử như keys, values, và entries:

map.set('name', 'John');
map.set('age', 30);

// Using forEach
map.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

for (let key of map.keys()) {
    console.log(key); // Output: name, age
}

for (let value of map.values()) {
    console.log(value); // Output: John, 30
}

for (let [key, value] of map.entries()) {
    console.log(`${key}: ${value}`); // Output: name: John, age: 30
}

// Getting all keys
console.log([...map.keys()]); // ['name', 'age']

// Getting all values
console.log([...map.values()]); // ['John', '30']

Kích Thước của Map

Bạn có thể lấy số lượng các key-value trong Map bằng thuộc tính size:

console.log(map.size); // Output: 2

Xóa Tất Cả Các Phần Tử

map.clear();

Sử Dụng Các Đối Tượng Làm Khóa

Không giống như các đối tượng thông thường, Map cho phép sử dụng các đối tượng làm khóa:

let objKey = {};
map.set(objKey, 'value');
console.log(map.get(objKey)); // Output: value

So Sánh Map và Object

Mặc dù cả Map và Object đều cho phép lưu trữ các key-value, Map có một số lợi thế:

Map nhớ thứ tự chèn của các khóa.
Khóa trong Map có thể là bất kỳ giá trị nào, bao gồm cả đối tượng.
Map có các phương thức tích hợp sẵn để duyệt qua các phần tử.

Performance với Map và Object

Map thường cung cấp hiệu suất tốt hơn Object khi thêm và xóa thường xuyên các cặp key-value. Sau đây là một benchmark đơn giản:

const iterations = 1000000;

// Using Map
console.time('Map');
const map = new Map();
for (let i = 0; i < iterations; i++) {
  map.set(i, i);
}
for (let i = 0; i < iterations; i++) {
  map.delete(i);
}
console.timeEnd('Map');

// Using Object
console.time('Object');
const obj = {};
for (let i = 0; i < iterations; i++) {
  obj[i] = i;
}
for (let i = 0; i < iterations; i++) {
  delete obj[i];
}
console.timeEnd('Object');

Ứng dụng Map trong Thực Tế

Quản Lý Bộ Đệm (Cache Management)

Map có thể được sử dụng để quản lý bộ đệm, nơi bạn cần lưu trữ và truy xuất dữ liệu một cách hiệu quả.

let cache = new Map();

function getData(key) {
    if (cache.has(key)) {
        return cache.get(key);
    }
    let data = fetchDataFromDatabase(key); // Giả sử đây là hàm lấy dữ liệu từ cơ sở dữ liệu
    cache.set(key, data);
    return data;
}

Theo Dõi Tần Suất Xuất Hiện (Frequency Counting)

Map có thể được sử dụng để theo dõi tần suất xuất hiện của các phần tử trong một mảng.

let frequencyMap = new Map();
let items = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];

items.forEach(item => {
    if (frequencyMap.has(item)) {
        frequencyMap.set(item, frequencyMap.get(item) + 1);
    } else {
        frequencyMap.set(item, 1);
    }
});

console.log(frequencyMap); // Output: Map { 'apple' => 3, 'banana' => 2, 'orange' => 1 }

Lưu Trữ Cấu Hình (Configuration Storage)

Map có thể được sử dụng để lưu trữ các cấu hình với các khóa là tên cấu hình và giá trị là giá trị cấu hình.

let config = new Map();
config.set('apiUrl', 'https://api.example.com');
config.set('retryAttempts', 3);
config.set('timeout', 5000);

console.log(config.get('apiUrl')); // Output: https://api.example.com
console.log(config.get('retryAttempts')); // Output: 3
console.log(config.get('timeout')); // Output: 5000

Các Best Practices và Mẹo Hay

Sử dụng Map khi không biết trước các khóa cho đến thời điểm chạy
Chọn Map cho các collection thường xuyên thay đổi
Ưu tiên Map khi cần lưu trữ metadata về các objects
Sử dụng WeakMap cho các tình huống object-key nhạy cảm về bộ nhớ
Chuyển đổi Map thành array khi cần bằng toán tử spread

Kết Luận

Map là một cấu trúc dữ liệu mạnh mẽ và linh hoạt trong JavaScript, cung cấp nhiều tính năng hữu ích cho việc quản lý các key-value. Bằng cách hiểu và sử dụng Map đúng cách, bạn có thể viết mã hiệu quả và dễ bảo trì hơn.