Map và Set trong JavaScript: khi nào dùng thay object và mảng

Hai tập hợp ngoài object và mảng

Object và mảng thông thường đáp ứng hầu hết nhu cầu của chương trình JavaScript, nhưng chúng không được thiết kế cho mọi việc. Map và Set là các cấu trúc tập hợp có sẵn, lấp đầy hai khoảng trống cụ thể: tra cứu theo khóa khi khóa không phải chuỗi, và kiểm tra phần tử với giá trị không trùng lặp.

Chúng có mặt trong ngôn ngữ từ ES2015. Cả hai đều là iterable, đều có thuộc tính .size, và đều dùng tốt với toán tử spread. Cách nghĩ rất đơn giản:

• Map: giống object, nhưng khóa có thể là bất cứ thứ gì và thứ tự được giữ nguyên.
• Set: giống mảng, nhưng giá trị là duy nhất và tra cứu rất nhanh.

Tạo và dùng Map

Một Map chứa các cặp khóa/giá trị. Bạn tạo nó bằng new Map() và dùng .set(), .get(), .has() và .delete():

const scores = new Map();

scores.set("ada", 97);
scores.set("boris", 84);
scores.set("chen", 91);

console.log(scores.get("ada"));
console.log(scores.has("boris"));
console.log(scores.size);

scores.delete("boris");
console.log(scores.size);

Bạn cũng có thể truyền một mảng các cặp [key, value] vào hàm khởi tạo để có sẵn dữ liệu ban đầu:

const scores = new Map([
  ["ada", 97],
  ["boris", 84],
]);

console.log(scores.get("ada"));

Dạng mảng hai phần tử đó xuất hiện ở mọi nơi có Map: đó là cách các phần tử được biểu diễn khi bạn duyệt.

Map và object: dùng Map để làm gì?

Object thông thường trông như làm được cùng việc. Phần lớn thời gian thì đúng vậy. Nhưng Map khắc phục vài điểm bất tiện cụ thể:

const obj = {};
obj.toString = "oops";
console.log(obj.toString);

const map = new Map();
map.set("toString", "safe");
console.log(map.get("toString"));
console.log(map.size);

Object kế thừa từ Object.prototype, nên các khóa như toString, constructor và hasOwnProperty đã có sẵn trên mọi object. Map không mang theo những thứ đó: chỉ những khóa bạn đặt mới tồn tại.

Những khác biệt khác nên biết:

• Khóa thuộc bất kỳ kiểu nào. Map chấp nhận object, hàm, số, boolean làm khóa. Object lặng lẽ chuyển khóa không phải chuỗi thành chuỗi: obj[1] và obj["1"] là cùng một ô.
• Đảm bảo thứ tự thêm vào. Map duyệt theo thứ tự các phần tử được thêm vào. Object phần lớn cũng vậy, nhưng các khóa chuỗi trông giống số sẽ được sắp xếp lên trước, một cái bẫy khó thấy.
• Có sẵn kích thước. map.size là O(1). Với object, bạn phải viết Object.keys(obj).length, tức là tạo lại cả một mảng.
• Tối ưu cho việc thêm xóa liên tục. Engine tối ưu Map cho việc thêm và xóa thường xuyên. Object được tối ưu cho các bản ghi có cấu trúc ổn định.

Dùng object khi bạn mô hình hóa một bản ghi với các khóa chuỗi đã biết trước ({ name, email, age }). Dùng Map khi khóa thay đổi động, không phải chuỗi, hoặc khi bạn sẽ thêm và xóa phần tử nhiều.

Duyệt Map

Map là iterable, nghĩa là for...of dùng được trực tiếp và việc tách từng cặp ra rất tự nhiên:

const scores = new Map([
  ["ada", 97],
  ["boris", 84],
  ["chen", 91],
]);

for (const [name, score] of scores) {
  console.log(`${name}: ${score}`);
}

Nếu chỉ muốn lấy khóa hoặc chỉ lấy giá trị, hãy gọi .keys() hoặc .values(). Và nếu thích, bạn vẫn có .forEach():

const scores = new Map([["ada", 97], ["boris", 84]]);

for (const name of scores.keys()) console.log(name);
for (const score of scores.values()) console.log(score);

scores.forEach((value, key) => console.log(key, value));

Để chuyển Map trở lại thành object hoặc mảng thông thường, hãy spread nó:

const scores = new Map([["ada", 97], ["boris", 84]]);

const asArray = [...scores];
const asObject = Object.fromEntries(scores);

console.log(asArray);
console.log(asObject);

Tạo và dùng Set

Một Set chứa các giá trị duy nhất. Thêm một giá trị đã có sẵn sẽ không làm gì cả:

const tags = new Set();

tags.add("javascript");
tags.add("tutorial");
tags.add("javascript");

console.log(tags.size);
console.log(tags.has("tutorial"));

tags.delete("tutorial");
console.log([...tags]);

Tính duy nhất được xác định theo cùng quy tắc so sánh với ===, với một điểm đặc biệt: NaN được coi là bằng chính nó bên trong Set, dù NaN === NaN là false ở mọi nơi khác.

Truyền một iterable vào hàm khởi tạo để có sẵn dữ liệu trong Set, và mẹo loại bỏ phần tử trùng lặp bắt nguồn từ đây:

const numbers = [1, 2, 2, 3, 3, 3, 4];
const unique = [...new Set(numbers)];

console.log(unique);

Một dòng, dùng được với mọi kiểu nguyên thủy. Với mảng chứa object thì cách này không hiệu quả, vì hai object khác nhau có cùng các trường vẫn là hai giá trị khác nhau, nhưng với chuỗi, số và boolean thì đây là cách loại bỏ trùng lặp chuẩn mực.

Set và mảng: khi nào nên chuyển

Mảng và Set đều chứa một tập hợp giá trị, vậy khi nào chọn cái nào?

Hãy dùng Set khi:

• Giá trị phải là duy nhất và bạn muốn môi trường chạy đảm bảo điều đó.
• Bạn kiểm tra phần tử rất nhiều lần. set.has(x) là O(1); array.includes(x) là O(n). Bên trong vòng lặp, khác biệt đó tăng lên rất nhanh.
• Thứ tự thêm vào là tất cả những gì bạn cần. Set duyệt theo thứ tự thêm vào nhưng không hỗ trợ truy cập theo chỉ số.

Hãy giữ mảng khi:

• Bạn cần truy cập theo vị trí: arr[0], cắt mảng, sắp xếp.
• Phần tử trùng lặp có ý nghĩa: một giỏ hàng có hai món giống nhau.
• Bạn sẽ dùng nhiều phương thức mảng như .map, .filter, .reduce. Set không có những phương thức này; bạn phải spread ra mảng trước.

Một ví dụ nhanh liên quan đến hiệu năng:

const banned = new Set(["spam", "scam", "ads"]);
const messages = ["hello", "spam", "hi", "ads", "hey"];

const clean = messages.filter(m => !banned.has(m));
console.log(clean);

Nếu banned là mảng, mỗi lần callback của filter chạy sẽ phải quét cả danh sách. Khi là Set, mỗi lần tra cứu mất thời gian hằng số.

Duyệt Set

Giống như Map: for...of dùng được ngay, và spread cho bạn một mảng:

const tags = new Set(["javascript", "tutorial", "map-set"]);

for (const tag of tags) {
  console.log(tag);
}

const asArray = [...tags];
console.log(asArray);

Set cũng có .keys(), .values() và .entries() để đối xứng với Map, dù với Set thì khóa và giá trị là một. Phần lớn thời gian bạn chỉ cần duyệt trực tiếp.

Ví dụ hoàn chỉnh: đếm số khách truy cập duy nhất của mỗi trang

Kết hợp cả hai: một Map từ đường dẫn trang đến một Set chứa ID khách truy cập:

const visits = [
  { path: "/", user: "u1" },
  { path: "/", user: "u2" },
  { path: "/about", user: "u1" },
  { path: "/", user: "u1" },
  { path: "/about", user: "u3" },
];

const uniqueByPage = new Map();

for (const { path, user } of visits) {
  if (!uniqueByPage.has(path)) {
    uniqueByPage.set(path, new Set());
  }
  uniqueByPage.get(path).add(user);
}

for (const [path, users] of uniqueByPage) {
  console.log(`${path}: ${users.size} unique visitors`);
}

Map lo việc ánh xạ từ đường dẫn đến từng nhóm; Set lo việc loại bỏ trùng lặp trong mỗi nhóm. Làm điều tương tự với object và mảng thông thường vẫn được, nhưng bạn sẽ phải viết thêm các phép kiểm tra indexOf và hasOwnProperty suốt quá trình.

Sơ lược về WeakMap và WeakSet

Có hai cấu trúc liên quan dành cho một trường hợp sử dụng hẹp: WeakMap và WeakSet. Chúng giữ tham chiếu yếu, nghĩa là một phần tử có khóa (với WeakMap) hoặc giá trị (với WeakSet) không còn tham chiếu nào khác sẽ tự động bị bộ thu gom rác thu hồi.

const cache = new WeakMap();

function getMetadata(obj) {
  if (!cache.has(obj)) {
    cache.set(obj, { accessedAt: Date.now() });
  }
  return cache.get(obj);
}

const user = { name: "Ada" };
console.log(getMetadata(user));

Chúng chỉ nhận object làm khóa, không phải iterable và không có .size. Đó là chủ ý thiết kế: nếu duyệt được chúng, người ta sẽ quan sát được hoạt động của bộ thu gom rác. Chúng hữu ích để lưu cache metadata về các object không thuộc quyền quản lý của bạn, và hiếm gặp trong code hằng ngày.

Tiếp theo: JSON

Map và Set rất tốt khi ở trong bộ nhớ, nhưng cả hai đều không giữ nguyên được qua JSON.stringify: Map thành {} và Set cũng thành {}. Trang tiếp theo nói về JSON: cách tuần tự hóa và parse dữ liệu, cùng các mẫu xử lý những tập hợp được giới thiệu ở trang này khi chúng cần đi qua mạng hoặc vào một tệp.