> Как реализовать кэш с методами get, set, delete и clear с поддержкой TTL в JavaScript (JavaScript)
Уровень: middle · Роль: frontend · Категория: Технические вопросы
Компании: Spotware
Стек: JavaScript
> Пример ответа
Короткий ответ
Кэш с TTL реализуется через объект или Map, где каждому ключу сопоставляется значение и время истечения. Метод get проверяет, не просрочен ли ключ, и удаляет его при истечении. set сохраняет значение с timestamp + ttl. delete удаляет конкретный ключ, clear очищает всё. Для автоматической очистки можно использовать setInterval или проверять при каждом get.
Подробное объяснение
Основная идея - хранить не только значение, но и метку времени, когда оно должно быть удалено. При каждом вызове get мы сравниваем текущее время с временем истечения. Если срок прошёл - удаляем ключ и возвращаем null или undefined.
Для хранения данных лучше использовать Map, а не обычный объект, так как Map сохраняет порядок вставки и имеет удобные методы. Каждая запись в кэше - это объект { value, expiresAt }.
Метод set принимает ключ, значение и опциональный TTL в миллисекундах. Если TTL не указан, можно использовать значение по умолчанию (например, 60000 мс).
Метод delete просто удаляет ключ из Map. Метод clear очищает весь Map.
Для автоматической очистки просроченных записей можно запустить setInterval, который периодически проверяет все ключи и удаляет истёкшие. Это полезно, чтобы кэш не рос бесконечно, но требует осторожности с утечками памяти, если интервал не очистить.
На практике
В реальных проектах такой кэш используют для мемоизации результатов API-запросов, хранения временных данных формы или кэширования вычислений. Важно учитывать, что если TTL маленький (например, 1 секунда), то setInterval должен быть настроен соответствующим образом, иначе кэш может отдавать просроченные данные.
Для production-решений часто используют библиотеки типа lru-cache или node-cache, которые уже имеют встроенную поддержку TTL и LRU-эвакуации. Но понимание реализации полезно для кастомных сценариев.
Пример кода
JAVASCRIPTclass TTLCache {constructor(defaultTTL = 60000) {this.cache = new Map();this.defaultTTL = defaultTTL;this.cleanupInterval = setInterval(() => this.clearExpired(), 30000);}set(key, value, ttl = this.defaultTTL) {const expiresAt = Date.now() + ttl;this.cache.set(key, { value, expiresAt });}get(key) {const entry = this.cache.get(key);if (!entry) return undefined;if (Date.now() > entry.expiresAt) {this.cache.delete(key);return undefined;}return entry.value;}delete(key) {return this.cache.delete(key);}clear() {this.cache.clear();}clearExpired() {const now = Date.now();for (const [key, entry] of this.cache) {if (now > entry.expiresAt) {this.cache.delete(key);}}}destroy() {clearInterval(this.cleanupInterval);this.cache.clear();}}
Как отвечать на собеседовании
Начни с краткого описания задачи: хранить значение и время истечения. Объясни, почему используешь Map, а не объект. Упомяни trade-off между проверкой при каждом get и фоновой очисткой. Если спросят про edge cases - расскажи, что делать с отрицательным TTL или если ключ уже существует. Покажи, что понимаешь про утечки памяти и необходимость вызывать destroy при уничтожении кэша.
Что проверяет интервьюер
- Понимание работы с Map и объектами
- Умение работать с временными метками и Date.now()
- Знание проблем синхронизации (гонка между set и get)
- Понимание необходимости очистки ресурсов (clearInterval)
- Умение проектировать простой API
Типичные ошибки
- Использование объекта вместо Map (теряется порядок, сложнее итерация)
- Хранение только значения без времени истечения
- Неправильное сравнение времени (использование Date вместо Date.now())
- Отсутствие проверки на просрочку в методе get
- Забывают очистить setInterval при уничтожении кэша, что приводит к утечке памяти
- Не учитывают, что TTL может быть передан как 0 или отрицательное число
> Похожие задачи по frontend
Как создать собственную функцию executor в Promise в JavaScript
Как обрабатывать JSON ответ в JavaScript
Как определить элемент, по которому был произведен клик при делегировании событий в JavaScript
Как работает всплытие и захват событий в JavaScript и какой обработчик сработает первым на div и кнопке
> ГОТОВЫ К СЛЕДУЮЩЕМУ СОБЕСЕДОВАНИЮ?
Запустите тренировочную сессию с ИИ и получите детальную обратную связь, чтобы увереннее проходить реальные интервью