Map и Set: коллекции уникальных значений

Введение: Зачем нужны Map и Set? 🤔

Представь, что ты пишешь приложение для интернет-магазина. Тебе нужно хранить корзину товаров, где каждый товар должен быть уникальным (вот тебе и Set), а также учитывать количество каждого товара (здесь пригодится Map).

Эти две коллекции — Map и Set — появились в ES6 и стали мощными инструментами для работы с данными. Они решают задачи, с которыми обычные объекты и массивы справляются неэффективно.

Set: Храним только уникальное 🔍

Set — это коллекция уникальных значений. Если попытаться добавить дубликат, он проигнорируется. Идеально для задач, где важен факт наличия элемента, но не его порядок или количество.

Создание и базовые методы

const uniqueNumbers = new Set();

// Добавляем элементы
uniqueNumbers.add(1);
uniqueNumbers.add(2);
uniqueNumbers.add(1); // Дубликат — не добавится

console.log(uniqueNumbers.size); // 2

💡 Совет: Set автоматически удаляет дубликаты. Не нужно писать велосипеды с проверками includes()!

Проверка наличия и удаление

const users = new Set(['Анна', 'Борис', 'Анна']);

console.log(users.has('Анна')); // true
users.delete('Борис');
console.log(users.size); // 1

Итерация по Set

Set — итерируемый объект. Можно использовать for...of или преобразовать в массив:

const colors = new Set(['красный', 'зелёный', 'синий']);

// Вариант 1
for (const color of colors) {
  console.log(color); // красный, зелёный, синий
}

// Вариант 2
const colorsArray = [...colors]; // Spread-оператор

Пример из жизни: Уникальные теги

Допустим, у нас есть статьи с тегами, но нужно вывести только уникальные:

const articles = [
  { tags: ['JS', 'Frontend'] },
  { tags: ['JS', 'Backend'] },
  { tags: ['Python', 'Data'] }
];

const allTags = articles.flatMap(article => article.tags);
const uniqueTags = new Set(allTags);

console.log([...uniqueTags]); // ['JS', 'Frontend', 'Backend', 'Python', 'Data']

Map: Ключи — не только строки 🗺️

Map — это коллекция пар ключ-значение, где ключом может быть любой тип данных (включая объекты!). В отличие от обычных объектов, Map сохраняет порядок добавления элементов.

Создание и основные методы

const userMap = new Map();

// Добавляем данные
userMap.set('name', 'Данила');
userMap.set(42, 'Ответ на главный вопрос жизни');

console.log(userMap.get('name')); // 'Данила'
console.log(userMap.get(42)); // 'Ответ на главный вопрос жизни'

🔥 Важно: В отличие от объектов, ключи в Map могут быть любого типа. Попробуй использовать объект как ключ — это мощно!

Пример: Кеширование результатов

const cache = new Map();

function heavyCalculation(n) {
  if (cache.has(n)) {
    return cache.get(n);
  }

  const result = n * 2; // Представим, что это сложные вычисления
  cache.set(n, result);
  return result;
}

console.log(heavyCalculation(5)); // Вычисляет
console.log(heavyCalculation(5)); // Берёт из кеша

Итерация по Map

Map предоставляет несколько способов перебора:

const settings = new Map([
  ['theme', 'dark'],
  ['notifications', true],
  ['fontSize', 14]
]);

// 1. Перебор ключей и значений
for (const [key, value] of settings) {
  console.log(`${key}: ${value}`);
}

// 2. Отдельно ключи или значения
console.log([...settings.keys()]); // ['theme', 'notifications', 'fontSize']

Set vs Map: Когда что использовать? ⚔️

Особенность	Set	Map
Хранение	Только значения	Пары ключ-значение
Ключи	Нет (только значения)	Любого типа
Уникальность	Уникальные значения	Уникальные ключи
Использование	Удаление дублей, проверка	Словари, кеши, сложные ключи

Практика: Собираем всё вместе 🛠️

Реализуем корзину интернет-магазина на Map (товар → количество) и Set для отслеживания акционных позиций:

const cart = new Map();
const saleItems = new Set([123, 456]); // ID товаров по акции

// Добавляем товары
function addToCart(itemId, quantity) {
  const currentQty = cart.get(itemId) || 0;
  cart.set(itemId, currentQty + quantity);
}

addToCart(123, 2);
addToCart(456, 1);

// Проверяем акционные товары
console.log(`Акционные товары в корзине: ${
  [...cart.keys()].filter(id => saleItems.has(id)).length
}`); // 2

Итоги и куда двигаться дальше 🎯

Set — твой выбор, когда нужны уникальные значения без дублей.
Map — идеален для сложных структур, где ключи — не только строки.
Обе коллекции сохраняют порядок добавления элементов и быстрее работают с большими данными, чем аналоги на объектах/массивах.

Теперь попробуй применить Map и Set в своём коде — они удивят тебя своей элегантностью! 💻✨