Пошук уроків, статей та іншого контенту
Навіщо потрібні Map і Set, коли вже є об'єкти й масиви, і чим саме вони кращі для конкретних задач.
Об'єкт (модуль «Об'єкти та масиви») — звичний спосіб зберігати пари ключ-значення, але має реальні обмеження: ключі автоматично перетворюються на рядки (навіть числа й об'єкти), немає вбудованого способу дізнатись кількість властивостей без Object.keys(obj).length, і порядок ключів історично не був гарантований для всіх типів ключів. Map — колекція пар ключ-значення, спроєктована спеціально для розв'язання саме цих обмежень.
const userRoles = new Map();
const user1 = { name: "Олена" };
const user2 = { name: "Максим" };
userRoles.set(user1, "admin");
userRoles.set(user2, "editor");
userRoles.get(user1); // "admin" — ключем є сам об'єкт, не його рядкове представлення
userRoles.size; // 2 — вбудована властивість, не потрібен окремий підрахунокУ звичайному об'єкті obj[user1] = "admin" перетворило б user1 на рядок "[object Object]" — усі об'єкти-ключі злилися б в один. У Map кожен об'єкт-ключ лишається унікальним.
const inventory = new Map([
["яблука", 50],
["банани", 30],
]);
inventory.has("яблука"); // true
inventory.delete("банани");
inventory.get("груші"); // undefined — ключа немає
for (const [fruit, count] of inventory) {
console.log(fruit, count); // порядок ітерації — саме порядок додавання
}Set зберігає лише унікальні значення — додавання значення, що вже є, нічого не змінює. Найпоширеніше застосування — видалення дублікатів із масиву:
const numbers = [1, 2, 2, 3, 3, 3, 4];
const unique = [...new Set(numbers)]; // spread з модуля «Об'єкти та масиви»
unique; // [1, 2, 3, 4]const tags = new Set();
tags.add("javascript");
tags.add("javascript"); // ігнорується — вже є
tags.add("web");
tags.size; // 2
tags.has("web"); // trueMap — коли ключі не рядки (об'єкти, числа без перетворення) або коли потрібен точний порядок і вбудований size.
Звичайний об'єкт — коли структура фіксована й відома заздалегідь (наприклад, конфігурація чи DTO), а не динамічна колекція записів.
Set — коли потрібна саме унікальність значень і швидка перевірка has() без ручного пошуку через includes.
Масив — коли важливий порядок і можливі дублікати, або потрібні map/filter/reduce з модуля «Об'єкти та масиви».
function countUniqueVisitors(visitorIds) {
return new Set(visitorIds).size;
}
countUniqueVisitors(["u1", "u2", "u1", "u3", "u2"]); // 3Використання Map чи Set там, де досить звичайного об'єкта чи масиву — зайва складність для простих, наперед відомих структур.
Спроба серіалізувати Map/Set через JSON.stringify напряму — на відміну від об'єктів і масивів, вони перетворюються на порожній об'єкт {} без явного перетворення (наприклад, через [...map] чи Object.fromEntries(map)).
Забування, що перевірка ключа-об'єкта в Map працює за посиланням (як ===), а не за вмістом — два різні об'єкти з однаковими полями вважаються різними ключами.
Map — колекція пар ключ-значення з довільним типом ключа, вбудованим size і гарантованим порядком ітерації. Set — колекція унікальних значень із швидкою перевіркою наявності. Обидва доповнюють, а не замінюють об'єкти й масиви — вибір залежить від конкретної задачі: тип ключів, потреба в унікальності, наперед відома чи динамічна структура.
Спробуйте самостійно
Маючи масив покупок const purchases = ["яблуко", "хліб", "яблуко", "молоко", "хліб", "яблуко"], використайте Map, щоб підрахувати, скільки разів купили кожен товар (ключ — назва, значення — кількість).