Đối tượng new Map() trong JavaScript

Đối tượng new Map() trong JavaScript
Đối tượng new Map() trong JavaScript

Chức năng của Đối tượng new Map() trong JavaScript

Đối tượng new Map() trong JavaScript dùng để lưu trữ các cặp khóa - giá trị theo thứ tự chèn, khóa (key) cho phép bất kỳ kiểu dữ liệu bao gồm: chữ, số, hàm, đối tượng, cho phép quản lý dữ liệu phức tạp một cách linh hoạt hơn so với đối tượng thông thường, đặc biệt hữu ích khi khóa không chỉ là chuỗi hoặc ký hiệu.

Code Đối tượng new Map() trong JavaScript

Đối tượng new Map() có dữ liệu trong JavaScript

<p id="ketqua"></p>
<script>
// Tạo một Map
const thanhViens = new Map([
  ["Bùi Tấn Lực", 35],
  ["Trần Thị Vân", 29],
  ["Bùi Đan Trúc Quỳnh", 1]
]);
let text = "";
thanhViens.forEach (function(value, key) {
  text += key + ' = ' + value + "<br>"
})
document.getElementById("ketqua").innerHTML = text;
</script>

Kết quả:

Bùi Tấn Lực = 35
Trần Thị Vân = 29
Bùi Đan Trúc Quỳnh = 1

Chạy Thử

Đối tượng new Map() chưa có dữ liệu trong JavaScript

<p id="ketqua"></p>
<script>
// Tạo một Map
const thanhViens = new Map();
// Tạo cặp khóa, giá trị cho Map
thanhViens.set("Bùi Tấn Lực", 35);
thanhViens.set("Trần Thị Vân", 29);
thanhViens.set("Bùi Đan Trúc Quỳnh", 1);
let text = "";
thanhViens.forEach (function(value, key) {
  text += key + ' = ' + value + "<br>"
})
document.getElementById("ketqua").innerHTML = text;
</script>

Kết quả:

Bùi Tấn Lực = 35
Trần Thị Vân = 29
Bùi Đan Trúc Quỳnh = 1

Chạy Thử

Những trường hợp nên sử dụng new Map trong JavaScript

Map phù hợp khi chương trình cần quản lý dữ liệu theo cặp khóa - giá trị và yêu cầu thao tác rõ ràng trên từng khóa. Việc lựa chọn đúng trường hợp sử dụng giúp mã nguồn dễ đọc, hạn chế xử lý vòng vo và phù hợp hơn với đặc điểm của dữ liệu.

Khi cần lưu trữ dữ liệu dạng key-value linh hoạt

new Map là lựa chọn phù hợp khi dữ liệu được tổ chức theo cấu trúc mỗi khóa tương ứng với một giá trị. Khóa có thể được thêm, cập nhật, kiểm tra hoặc xóa độc lập mà không cần tự xây dựng cơ chế quản lý riêng.

Cách này đặc biệt hữu ích với các dữ liệu như danh sách cấu hình, thông tin tạm thời, bảng ánh xạ hoặc dữ liệu cần tra cứu nhanh theo một khóa xác định.

const users = new Map();

users.set(101, "An");
users.set(102, "Bình");

console.log(users.get(101));

Khi key không chỉ là chuỗi hoặc số

Một ưu điểm đáng chú ý của Map là khóa không bị giới hạn ở chuỗi. Bạn có thể sử dụng số, đối tượng, hàm hoặc các kiểu dữ liệu khác làm khóa, miễn là chúng phù hợp với nhu cầu quản lý dữ liệu.

Điều này hữu ích khi cần liên kết dữ liệu với một đối tượng cụ thể, chẳng hạn lưu trạng thái xử lý của từng đối tượng mà không phải chuyển đổi đối tượng đó thành chuỗi.

const cache = new Map();

const product = { id: 10, name: "Laptop" };

cache.set(product, "Đã tải dữ liệu");

console.log(cache.get(product));

Khi cần quản lý dữ liệu có số lượng lớn

Với tập dữ liệu có nhiều phần tử và thường xuyên thực hiện các thao tác như thêm, tìm, cập nhật hoặc xóa theo khóa, Map có thể giúp cách tổ chức dữ liệu rõ ràng hơn. Các thao tác được cung cấp trực tiếp thông qua những phương thức chuyên dụng như set(), get(), has()delete().

Tuy nhiên, không nên mặc định rằng Map luôn nhanh hơn trong mọi tình huống. Hiệu năng còn phụ thuộc vào kích thước dữ liệu, cách truy cập và môi trường thực thi. Quan trọng nhất là cấu trúc dữ liệu phải phù hợp với cách chương trình sử dụng dữ liệu.

Khi cần duy trì thứ tự các phần tử

Map duy trì thứ tự các phần tử theo trình tự chúng được thêm vào. Đặc điểm này thuận tiện khi dữ liệu vừa cần tra cứu theo khóa vừa cần duyệt theo đúng thứ tự đã ghi nhận.

const tasks = new Map();

tasks.set(1, "Phân tích");
tasks.set(2, "Lập trình");
tasks.set(3, "Kiểm thử");

for (const [id, task] of tasks) {
    console.log(id, task);
}

Nhờ vậy, bạn có thể dùng cùng một cấu trúc dữ liệu cho cả việc ánh xạ khóa - giá trị và duyệt tuần tự mà không phải duy trì thêm một danh sách thứ tự riêng.

Khi nào nên dùng Map thay cho Object

Object vẫn phù hợp khi dữ liệu đại diện cho một thực thể có các thuộc tính cố định, chẳng hạn thông tin của một người dùng hoặc sản phẩm. Ngược lại, Map thường phù hợp hơn khi dữ liệu chủ yếu là một tập hợp các cặp khóa - giá trị có thể thay đổi linh hoạt.

Nên cân nhắc Map khi cần dùng nhiều kiểu dữ liệu làm khóa, thường xuyên thêm hoặc xóa phần tử, cần biết chính xác số lượng phần tử thông qua size hoặc muốn sử dụng trực tiếp các phương thức quản lý dữ liệu của Map.

Việc chọn Map hay Object vì thế không chỉ dựa vào hiệu năng mà nên dựa vào bản chất dữ liệu và cách dữ liệu được truy cập trong chương trình.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Đối tượng new Map() trong JavaScript.

  • 0 Bình luận
CEO Bùi Tấn Lực | Founder Web Mới
Bùi Tấn Lực
Tìm hiểu về CEO Bùi Tấn Lực, Founder Web Mới với nhiều năm kinh nghiệm trong lĩnh vực phát triển website, SEO và chia sẻ kiến thức công nghệ
Đánh giá
Chia sẻ nội dung đánh giá của bạn về Đối tượng new Map() trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Yêu Cầu Báo Giá
Gửi trang web mẫu cần làm theo, chúng tôi sẽ báo giá đến bạn từ Email (tanlucit09@gmail.com - Bùi Tấn Lực) hoặc Zalo (Lực IT - 0398259259) !