Когда используется Set?

Когда используется Set в JavaScript

Set — это одна из ключевых структур данных в JavaScript, которая хранит уникальные значения. Это часто встречается в интервью, потому что правильное использование Set может значительно улучшить производительность кода.

Что такое Set

Set — встроенный объект для хранения уникальных значений. В отличие от Array, Set автоматически исключает дубликаты и имеет оптимизированный поиск.

const numbers = new Set([1, 2, 2, 3, 3, 3]);
console.log(numbers); // Set { 1, 2, 3 }
console.log(numbers.size); // 3

// Методы Set
numbers.add(4);
numbers.has(2); // true
numbers.delete(2);
numbers.clear();

Основные случаи использования

1. Удаление дубликатов из массива

Это самый частый кейс в реальной разработке:

// ❌ Медленно (O(n²))
const uniqueArray = array.filter((item, index) => array.indexOf(item) === index);

// ✅ Быстро (O(n))
const uniqueArray = [...new Set(array)];

// Пример
const ids = [1, 2, 2, 3, 3, 3, 4];
const unique = [...new Set(ids)];
console.log(unique); // [1, 2, 3, 4]

2. Проверка наличия элемента

Set имеет O(1) поиск, в то время как Array — O(n):

// ❌ Медленно для больших массивов
const isPresent = largeArray.includes(element);

// ✅ Быстро
const isPresent = largeSet.has(element);

// Реальный пример: отслеживание посещённых страниц
class PageTracker {
  constructor() {
    this.visited = new Set();
  }
  
  visit(url) {
    this.visited.add(url);
  }
  
  hasVisited(url) {
    return this.visited.has(url); // O(1) вместо O(n)
  }
}

3. Пересечение и объединение массивов

const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 5, 6];

const set1 = new Set(arr1);
const set2 = new Set(arr2);

// Пересечение (общие элементы)
const intersection = [...set1].filter(x => set2.has(x));
console.log(intersection); // [3, 4]

// Объединение
const union = new Set([...set1, ...set2]);
console.log(union); // Set { 1, 2, 3, 4, 5, 6 }

// Разность
const difference = [...set1].filter(x => !set2.has(x));
console.log(difference); // [1, 2]

4. Кеширование и мемоизация

class Cache {
  constructor() {
    this.keys = new Set();
    this.data = new Map();
  }
  
  set(key, value) {
    this.keys.add(key);
    this.data.set(key, value);
  }
  
  has(key) {
    return this.keys.has(key); // O(1)
  }
  
  get(key) {
    return this.data.get(key);
  }
}

const cache = new Cache();
cache.set("user_1", { id: 1, name: "John" });
cache.has("user_1"); // true

5. Отслеживание активных сессий или соединений

class ConnectionManager {
  constructor() {
    this.activeConnections = new Set();
  }
  
  connect(clientId) {
    this.activeConnections.add(clientId);
    console.log(`Активных соединений: ${this.activeConnections.size}`);
  }
  
  disconnect(clientId) {
    this.activeConnections.delete(clientId);
  }
  
  isConnected(clientId) {
    return this.activeConnections.has(clientId);
  }
  
  broadcast(message) {
    this.activeConnections.forEach(clientId => {
      // отправить сообщение
    });
  }
}

Set с объектами и специальными типами

// Set работает с любыми типами
const mixed = new Set([1, "hello", { id: 1 }, [1, 2]]);
console.log(mixed.size); // 4

// Важно: объекты сравниваются по ссылке, не по значению
const obj1 = { id: 1 };
const obj2 = { id: 1 };
const set = new Set([obj1, obj2]);
console.log(set.size); // 2 (разные объекты)

// Это работает правильно
const obj = { id: 1 };
const set = new Set([obj, obj]);
console.log(set.size); // 1 (один и тот же объект)

Set в React

function FilteredList({ items }) {
  // Сохранять состояние выбранных элементов
  const [selected, setSelected] = useState<Set<string>>(new Set());
  
  const toggleSelect = useCallback((id: string) => {
    setSelected(prev => {
      const next = new Set(prev);
      if (next.has(id)) {
        next.delete(id);
      } else {
        next.add(id);
      }
      return next;
    });
  }, []);
  
  return (
    <div>
      {items.map(item => (
        <input
          key={item.id}
          type="checkbox"
          checked={selected.has(item.id)}
          onChange={() => toggleSelect(item.id)}
        />
      ))}
      <p>Выбрано: {selected.size}</p>
    </div>
  );
}

Set vs Array: Сравнение производительности

// Поиск элемента
const arr = Array.from({ length: 1000000 }, (_, i) => i);
const set = new Set(arr);

console.time("Array.includes");
arr.includes(999999);
console.timeEnd("Array.includes"); // ~10ms

console.time("Set.has");
set.has(999999);
console.timeEnd("Set.has"); // <1ms

Когда НЕ использовать Set

• Когда нужен доступ по индексу
• Когда нужна сортировка
• Когда нужны методы массива (map, filter, reduce)
• Когда работаешь с очень маленькими коллекциями (<100 элементов)

Заключение

Set — мощный инструмент для работы с уникальными значениями и быстрого поиска. В реальных проектах Set часто используется для кеширования, отслеживания состояния и оптимизации поиска. Выбор между Set и Array зависит от задачи, но при работе с большими коллекциями Set всегда предпочтительнее благодаря лучшей производительности.