Автоматическая генерация уникальных ID для объектов!
В реальных проектах часто нужны уникальные идентификаторы для компонентов, элементов формы или объектов данных.
Можно сделать универсальный генератор, который гарантирует уникальность и читабельность ID.
Создадим локальный генератор с префиксом:
Используем для объектов:
Создадим универсальную функцию для массивов объектов:
Применение:
🔥 Простое, нативное и масштабируемое решение для генерации уникальных ID в проектах.
📣 JS Ready | #практика
В реальных проектах часто нужны уникальные идентификаторы для компонентов, элементов формы или объектов данных.
Можно сделать универсальный генератор, который гарантирует уникальность и читабельность ID.
Создадим локальный генератор с префиксом:
function createIdGenerator(prefix = "id") {
let counter = 0;
return () => `${prefix}-${++counter}`;
}
const generateUserId = createIdGenerator("user");Используем для объектов:
const user1 = { id: generateUserId(), name: "Alice" };
const user2 = { id: generateUserId(), name: "Bob" };
console.log(user1, user2); // → {id: "user-1"} {id: "user-2"}Создадим универсальную функцию для массивов объектов:
function assignIds(items, prefix = "item") {
const gen = createIdGenerator(prefix);
return items.map(item => ({ ...item, id: gen() }));
}Применение:
const tasks = [{ task: "JS" }, { task: "React" }];
console.log(assignIds(tasks, "task"));
// → [{task:"JS",id:"task-1"}, {task:"React",id:"task-2"}]🔥 Простое, нативное и масштабируемое решение для генерации уникальных ID в проектах.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥16👍7❤5🤝1
This media is not supported in your browser
VIEW IN TELEGRAM
Markdown Table Prettifier — плагин, который автоматически форматирует таблицы в тексте. Очень удобно: сразу видно, как выглядит таблица, без постоянного переключения на превью.
Особенно помогает при написании документации и любых текстов с таблицами — комфортно и быстро.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤17👍8🔥5
Асинхронный код позволяет запускать задачи параллельно и не блокировать интерфейс. Сегодня разберём, как с помощью
Promise, async/await и Promise.all писать чистый и предсказуемый код.В этом гайде:
• Создаём и обрабатываем базовые Promise.
• Цепочки .then() и .catch() для работы с результатами и ошибками.
• Async/await - упрощаем чтение асинхронного кода.
• Promise.all — параллельные запросы и управление результатами.
Подойдёт для работы с API, таймерами, потоками данных и любыми асинхронными задачами.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16❤7🔥5🤝1
Простой, но полезный проект, в котором задействуем массивы, генерацию случайных значений и условия для определения победителя.
В этом посте:
• Определим набор возможных ходов.
• Сгенерируем выбор компьютера.
• Напишем условия победы, ничьей и поражения.
• Выведем итог с ходами игроков.
Получим готовую мини-игру в консоли, которая отлично тренирует работу с логикой и ветвлениями, а также открывает простор для доработок.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21❤8🔥8🤝1
Таймер обратного отсчёта на JS!
Научим JS считать время до события и выводить оставшееся в консоль.
Сначала напишем функцию форматирования:
Теперь создадим функцию обратного отсчёта:
Проверяем условие окончания обратного отсчёта:
🔥 Это легкий способ создать обратный отсчет для событий и уведомлений!
📣 JS Ready | #практика
Научим JS считать время до события и выводить оставшееся в консоль.
Сначала напишем функцию форматирования:
function formatTime(ms) {
const sec = Math.floor(ms / 1000) % 60;
const min = Math.floor(ms / 60000) % 60;
const hr = Math.floor(ms / 3600000);
return `${hr}ч ${min}м ${sec}с`;
}Теперь создадим функцию обратного отсчёта:
function countdown(targetTime) {
const tick = () => {
const diff = targetTime - Date.now();
if (diff <= 0) {
clearInterval(interval);
console.log("Время вышло!");
}Проверяем условие окончания обратного отсчёта:
else {
console.log(formatTime(diff));
}
};
tick();
const interval = setInterval(tick, 1000);
}
countdown(Date.now() + 10000);🔥 Это легкий способ создать обратный отсчет для событий и уведомлений!
Please open Telegram to view this post
VIEW IN TELEGRAM
❤17🔥7👍6🤝2