Cách sử dụng đối tượng Map JavaScript

Lưu ý:

• .length của Array có thể thay đổi bằng cách gán giá trị mới (array.length = 0 để xóa toàn bộ mảng).
• .size của Map không thể gán trực tiếp giá trị mới mà chỉ thay đổi khi thêm hoặc xóa phần tử.

Ví dụ minh họa

Thêm và xóa phần tử, kiểm tra .size

const myMap = new Map();

// Thêm phần tử
myMap.set("user", "John");
myMap.set("email", "[email protected]");
console.log(myMap.size); // Output: 2

// Xóa một phần tử
myMap.delete("email");
console.log(myMap.size); // Output: 1

// Xóa toàn bộ phần tử
myMap.clear();
console.log(myMap.size); // Output: 0

Nhóm phương thức duyệt qua Map trong JavaScript

Trong JavaScript, Map cung cấp nhiều cách khác nhau để duyệt qua các phần tử. Dưới đây là các phương thức phổ biến để lặp qua Map một cách hiệu quả.

.forEach(callback) – Lặp qua từng phần tử trong Map

Cách sử dụng .forEach()

Phương thức .forEach(callback) giúp duyệt qua từng phần tử của Map. Callback function nhận vào ba tham số:

• value: Giá trị của phần tử trong Map.
• key: Khóa (key) của phần tử trong Map.
• map: Đối tượng Map đang được duyệt qua.

Ví dụ minh họa:

const myMap = new Map();
myMap.set("name", "Alice");
myMap.set("age", 25);
myMap.set("country", "Vietnam");

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

Output:

name: Alice
age: 25
country: Vietnam

.forEach() giúp duyệt qua Map một cách dễ dàng và không cần quan tâm đến thứ tự lặp.

So sánh với vòng lặp for...of

Vòng lặp for...of với Map

Cách sử dụng for...of

Vòng lặp for...of giúp duyệt qua các phần tử của Map, với mỗi phần tử được trả về dưới dạng [key, value].

Ví dụ minh họa

const myMap = new Map();
myMap.set("name", "Alice");
myMap.set("age", 25);
myMap.set("country", "Vietnam");

for (const [key, value] of myMap) {
    console.log(`${key}: ${value}`);
}

Output:

name: Alice
age: 25
country: Vietnam

for...of giúp duyệt qua Map một cách trực quan hơn so với .forEach().

.keys() – Lấy danh sách key của Map

Phương thức .keys() trả về một Iterable chứa toàn bộ key trong Map.

Cách sử dụng .keys()

const myMap = new Map([
    ["name", "Alice"],
    ["age", 25],
    ["country", "Vietnam"]
]);

console.log([...myMap.keys()]); // Output: ["name", "age", "country"]

Dùng [...myMap.keys()] để chuyển keys() thành một mảng.

.values() – Lấy danh sách value của Map

Tương tự .keys(), phương thức .values() trả về một Iterable chứa toàn bộ giá trị trong Map.

Cách sử dụng .values()

const myMap = new Map([
    ["name", "Alice"],
    ["age", 25],
    ["country", "Vietnam"]
]);

console.log([...myMap.values()]); // Output: ["Alice", 25, "Vietnam"]

Dùng [...myMap.values()] để chuyển values() thành một mảng.

.entries() – Lấy danh sách cặp key-value dưới dạng mảng

Phương thức .entries() trả về một Iterable chứa các phần tử dưới dạng [key, value].

Cách sử dụng .entries()

const myMap = new Map([
    ["name", "Alice"],
    ["age", 25],
    ["country", "Vietnam"]
]);

console.log([...myMap.entries()]);

Output:

[
    ["name", "Alice"],
    ["age", 25],
    ["country", "Vietnam"]
]

.entries() hữu ích khi muốn chuyển Map thành một mảng của các cặp [key, value].

Tóm tắt cách duyệt qua Map

Lựa chọn phương pháp duyệt phù hợp sẽ giúp tối ưu hóa hiệu suất và dễ dàng thao tác với dữ liệu trong Map.

5. Chuyển đổi giữa Map và Array

Trong JavaScript, có thể dễ dàng chuyển đổi giữa Map và Array bằng cách sử dụng các phương thức có sẵn như Array.from() hoặc new Map(). Việc chuyển đổi này giúp tận dụng những ưu điểm của từng cấu trúc dữ liệu trong các tình huống khác nhau.

5.1. Chuyển từ Map sang Array

Một đối tượng Map có thể được chuyển thành một mảng hai chiều bằng Array.from(map) hoặc toán tử spread [...map].

Ví dụ minh họa

const myMap = new Map([
    ["name", "Alice"],
    ["age", 25],
    ["country", "Vietnam"]
]);

// Cách 1: Dùng Array.from()
const array1 = Array.from(myMap);
console.log(array1);

// Cách 2: Dùng toán tử spread [...]
const array2 = [...myMap];
console.log(array2);

Output:

[
    ["name", "Alice"],
    ["age", 25],
    ["country", "Vietnam"]
]

Cả hai phương thức trên đều chuyển Map thành mảng chứa các cặp [key, value].

Nếu chỉ muốn lấy danh sách key hoặc value, ta có thể dùng .keys() và .values():

const keysArray = [...myMap.keys()];
console.log(keysArray); // ["name", "age", "country"]

const valuesArray = [...myMap.values()];
console.log(valuesArray); // ["Alice", 25, "Vietnam"]

5.2. Chuyển từ Array sang Map

Một mảng có thể được chuyển thành Map bằng cách sử dụng new Map(array). Điều này đặc biệt hữu ích khi muốn loại bỏ các cặp key-value trùng lặp.

Ví dụ minh họa

const array = [
    ["name", "Alice"],
    ["age", 25],
    ["country", "Vietnam"]
];

const myMap = new Map(array);
console.log(myMap);

Output:

Map(3) {
    "name" => "Alice",
    "age" => 25,
    "country" => "Vietnam"
}

Ứng dụng: Loại bỏ cặp key-value trùng lặp

Khi chuyển đổi từ Array sang Map, các key trùng nhau sẽ tự động bị ghi đè, giúp loại bỏ dữ liệu trùng lặp:

const duplicateArray = [
    ["name", "Alice"],
    ["age", 25],
    ["name", "Bob"] // Key "name" trùng, giá trị bị ghi đè
];

const uniqueMap = new Map(duplicateArray);
console.log(uniqueMap);

Output:

Map(2) {
    "name" => "Bob",  // "Alice" bị ghi đè bởi "Bob"
    "age" => 25
}

Map giúp quản lý dữ liệu theo cặp key-value mà không bị trùng key.

6. Ứng dụng thực tế của các phương thức Map

Các phương thức của Map giúp quản lý dữ liệu hiệu quả hơn so với Object, đặc biệt trong các trường hợp cần đảm bảo thứ tự hoặc làm việc với key có nhiều kiểu dữ liệu.

6.1. Lưu trữ dữ liệu dạng key-value có thứ tự

Không giống như Object, Map duy trì thứ tự của các phần tử khi chúng được thêm vào. Điều này giúp xử lý dữ liệu dễ dàng hơn.

Ví dụ: Lưu trữ thông tin người dùng

const userMap = new Map();
userMap.set(1, { name: "Alice", age: 25 });
userMap.set(2, { name: "Bob", age: 30 });
userMap.set(3, { name: "Charlie", age: 22 });

console.log([...userMap.entries()]);

Kết quả sẽ giữ đúng thứ tự của các phần tử được thêm vào.

6.2. Tạo bộ nhớ đệm (caching) cho dữ liệu

Một ứng dụng quan trọng của Map là làm bộ nhớ đệm (cache) để tối ưu hóa hiệu suất, đặc biệt trong các ứng dụng web.

Ví dụ: Cache dữ liệu người dùng

const userCache = new Map();

function getUser(id) {
    if (userCache.has(id)) {
        console.log("Lấy từ cache:", userCache.get(id));
        return userCache.get(id);
    }

    // Giả sử gọi API lấy dữ liệu người dùng
    const userData = { id, name: `User ${id}`, age: 20 + id };
    userCache.set(id, userData);
    console.log("Thêm vào cache:", userData);
    return userData;
}

// Gọi hàm 2 lần với cùng ID
getUser(1);
getUser(1);

Kết quả:

Thêm vào cache: { id: 1, name: 'User 1', age: 21 }
Lấy từ cache: { id: 1, name: 'User 1', age: 21 }

Lợi ích: Hạn chế gọi API nhiều lần cho cùng một dữ liệu.

6.3. Sử dụng Map trong các thuật toán tìm kiếm nhanh

Nhờ phương thức .has(), Map có thể được sử dụng để kiểm tra dữ liệu nhanh hơn Object.

Ví dụ: Kiểm tra số lần xuất hiện của từ trong một văn bản

const wordCount = new Map();
const text = "apple banana apple orange banana apple";

text.split(" ").forEach(word => {
    wordCount.set(word, (wordCount.get(word) || 0) + 1);
});

console.log(wordCount);

Output:

Map(3) {
    "apple" => 3,
    "banana" => 2,
    "orange" => 1
}

Lợi ích: Map giúp truy xuất dữ liệu nhanh chóng mà không cần duyệt qua toàn bộ danh sách.

6.4. Quản lý danh sách động với nhiều kiểu key khác nhau

Không giống như Object, Map hỗ trợ nhiều kiểu key như number, boolean, function, object.

Ví dụ: Dùng object làm key

const user1 = { id: 1, name: "Alice" };
const user2 = { id: 2, name: "Bob" };

const userScores = new Map();
userScores.set(user1, 95);
userScores.set(user2, 88);

console.log(userScores.get(user1)); // 95

Map có thể dùng object làm key, điều mà Object không thể làm trực tiếp.

Kết bài

Map trong JavaScript là một cấu trúc dữ liệu mạnh mẽ, cung cấp nhiều phương thức hữu ích giúp thao tác với dữ liệu dạng cặp key-value một cách linh hoạt và hiệu quả. So với Object, Map có nhiều ưu điểm như hỗ trợ nhiều kiểu dữ liệu làm key, bảo toàn thứ tự phần tử, và có hiệu suất tìm kiếm tốt hơn trong nhiều trường hợp.

Việc sử dụng các phương thức như .set(), .get(), .has(), .delete(), .size(), cũng như các cách duyệt và chuyển đổi giữa Map và Array giúp lập trình viên dễ dàng thao tác với dữ liệu. Trong thực tế, Map được ứng dụng rộng rãi trong việc lưu trữ cấu hình, caching dữ liệu, quản lý danh sách động, và tối ưu thuật toán tìm kiếm.

Hiểu rõ về Map và biết cách tận dụng các phương thức của nó sẽ giúp bạn viết mã nguồn sạch hơn, tối ưu hơn và dễ bảo trì hơn. Nếu bạn cần một cấu trúc dữ liệu linh hoạt để quản lý dữ liệu dạng cặp key-value, Map chính là một lựa chọn tuyệt vời trong JavaScript!