Примеры решений в JavaScript

Приветствую! Здесь вы наверняка найдете, что ищете. Примеры в лаборатории рассчитаны на то, что мы разбираем что-то конкретное.

Текущая статья посвящена javaScript: массивы, async/await, fetch, валидация, DOM и шаблоны надёжного клиентского кода..

Поэтому за теорией по текущей теме вам — в энциклопедию. Если ещё не погружались, то маршрут прост:

1. Основы
2. Система и сеть
3. Данные и разметка
4. Код и разработка
5. Языки
6. Искусственный интеллект
7. Проект
8. Инфраструктура и безопасность
9. Спин-офф

Обязательно пройдитесь.

А теперь приступим к нашему предмету.

---

Термины

Термин	Смысл
Promise	Объект будущего результата асинхронной операции
async/await	Синтаксис над Promise
AbortController	Отмена fetch и таймауты
Immutability	Новые объекты вместо мутации (где уместно)

---

1. Группировка и дедупликация

const users = [
  { id: 1, city: 'Moscow' },
  { id: 2, city: 'Kazan' },
  { id: 3, city: 'Moscow' }
];

const byCity = users.reduce((acc, u) => {
  (acc[u.city] ??= []).push(u);
  return acc;
}, {});

const uniqueCities = [..new Set(users.map((u) => u.city))];

Шаги: определите ключ группировки → reduce или Map → проверьте пустые ключи.

---

2. Fetch с таймаутом и ошибками HTTP

---

3. Retry с экспоненциальной задержкой

async function retry(fn, { attempts = 3, baseMs = 300 } = {}) {
  let lastError;
  for (let i = 0; i < attempts; i++) {
    try {
      return await fn();
    } catch (e) {
      lastError = e;
      if (i === attempts - 1) break;
      await new Promise((r) => setTimeout(r, baseMs * 2 ** i));
    }
  }
  throw lastError;
}

Повторяйте только временные ошибки (сеть, 502, 503), не 400/401.

---

4. Глубокое клонирование (простые данные)

const clone = structuredClone(original);

Для объектов с функциями или циклическими ссылками нужны специализированные библиотеки.

---

5. Валидация формы (клиент)

function validateEmail(value) {
  if (!value.includes('@')) return 'Некорректный email';
  return null;
}

function validateForm(values, validators) {
  const errors = {};
  for (const [name, validate] of Object.entries(validators)) {
    const msg = validate(values[name]);
    if (msg) errors[name] = msg;
  }
  return errors;
}

Серверная валидация обязательна: клиент — только UX.

---

6. Debounce для поиска

function debounce(fn, ms) {
  let t;
  return (..args) => {
    clearTimeout(t);
    t = setTimeout(() => fn(..args), ms);
  };
}

const onSearch = debounce((q) => fetchResults(q), 300);

---

Типичные ошибки

• Забытый clearTimeout / отписка от событий → утечки.
• await без try/catch в UI → немые падения.
• Мутация state в React напрямую.

---

Чек-лист

• HTTP-ошибки и таймауты обработаны.
• Нет утечек таймеров и подписок.
• Критичная логика покрыта тестами (Vitest/Jest).