1. Как скопировать текст в буфер обмена
В веб-приложениях часто возникает необходимость скопировать фрагмент текста в буфер. С помощью этого сниппета, например, можно легко сделать кнопку «Скопировать»:
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(() => {
console.log('Текст скопирован в буфер обмена');
}).catch(err => {
console.error('Ошибка при копировании текста: ', err);
});
}
2. Как открыть новую вкладку браузера с указанным URL-адресом
Этот код открывает новую вкладку браузера с указанным URL-адресом:
const openTab = (url) => {
window.open(url, "_blank");
};
3. Как вычислить разницу между двумя датами
Этот код вычисляет разницу между двумя датами в миллисекундах, независимо от порядка дат:
const dateDiff = (date1, date2) => Math.abs(new Date(date1) - new Date(date2));
Результат можно представить в более удобных единицах времени, например, днях:
const diffInDays = diff / (1000 * 60 * 60 * 24);
console.log(diffInDays);
4. Как получить значение cookie
Этот код позволяет получить значение cookie по его имени из хранилища браузера:
const getCookie = (name) => {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(";").shift();
};
Функция полезна для:
- Извлечения данных сессии, таких как имя пользователя или токен авторизации.
- Настроек пользователя, например, сохраненной темы или языка интерфейса.
- Анализа данных о посещении страницы.
5. Как ограничить частоту выполнения функции
Дебаунсинг помогает контролировать частоту выполнения функции (и, соответственно, количество запросов к серверу). Он особенно полезен при обработке событий (ввод текста в строку поиска, изменение размера окна браузера и т.п.):
function debounce(func, delay) {
let timeout;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), delay);
};
}
6. Как сделать глубокую копию объекта
Глубокое копирование объекта позволяет создать его полную независимую копию, не изменяя оригинал. Это особенно важно, когда необходимо избежать непреднамеренных изменений исходных данных. Новый объект, созданный с помощью этого метода, не содержит ссылок на оригинальный объект и любые изменения в копии не повлияют на исходные данные:
function deepClone(obj) {
return JSON.parse(JSON.stringify(obj));
}
7. Создание нового объекта из исходного
Этот сниппет позволяет быстро создать новый объект, который содержит все свойства и значения из исходного объекта, но с добавлением новых ключей, где каждое имя свойства преобразовано (в данном случае — в верхний регистр):
const original = {a: 1, b: 2, c: 3};
const mapped = {
...original,
...Object.keys(original).reduce((obj, key) => ({
...obj,
[key.toUpperCase()]: original[key]
}), {})
};
8. Как определить, виден ли элемента в области просмотра
Определение видимости элемента в области просмотра (viewport) позволяет понять, находится ли элемент в видимой части экрана пользователя. Это полезно, например, для:
- Запуска анимаций при появлении элемента на экране.
- Ленивой загрузки изображений (контент загружается только тогда, когда попадает в поле зрения).
- Аналитики и трекинга, которые определяют, когда пользователь дошел до конкретного блока страницы.
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
9. Как сгенерировать случайный цвет в HEX-формате
Быстрая генерация случайного шестнадцатеричного цвета позволяет динамически менять стили, например, фон страницы:
function randomHexColor() {
return `#${Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')}`;
}
10. Как преобразовать первую букву строки в заглавную
Преобразование первой буквы строки в заглавную помогает форматировать текст, делая его более читаемым и эстетичным, например, например, при обработке небрежного пользовательского ввода:
function capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
11. Как распаковать вложенный массив в одномерный
Распаковка вложенных массивов с помощью рекурсии позволяет превратить многомерный массив в одномерный, что особенно полезно при обработке сложных данных, например, полученных из API:
function flattenArray(arr) {
return arr.reduce((acc, val) =>
Array.isArray(val) ? acc.concat(flattenArray(val)) : acc.concat(val), []);
}
12. Как определить, что значение является объектом
Быстрая проверка, является ли значение объектом помогает определить, относится ли переменная к стандартному объектному типу JavaScript, а не к другому типу данных (массивам, null или функциям):
function isObject(value) {
return value && typeof value === 'object' && value.constructor === Object;
}
13. Как определить, что значение является DOM-элементом
Этот определяет, является ли переданное значение DOM-элементом:
const isDOMElement = (value) =>
typeof value === 'object' &&
value.nodeType === 1 &&
typeof value.style === 'object' &&
typeof value.ownerDocument === 'object';
14. Как получить параметры запроса из URL
Получение параметров строки запроса из URL позволяет извлекать значения параметров, передаваемых в адресной строке веб-страницы. Это может использовать, например, для:
- Динамической загрузки контента (получение информации о пользователе по параметру id в URL).
- Фильтрации данных (с применением параметров сортировки или категорий из URL).
- Аналитики и отслеживания кампаний (чтение UTM-меток в URL для маркетинговых целей).
function getQueryParam(param) {
const params = new URLSearchParams(window.location.search);
return params.get(param);
}
15. Как сруппировать объекты массива по заданному свойству
Такая группировка позволяет организовать данные, объединяя элементы с одинаковым значением определенного свойства в отдельные группы. Эту функцию можно использовать для создания отчетов, категорий или аналитики:
function groupBy(array, key) {
return array.reduce((acc, obj) => {
const prop = obj[key];
acc[prop] = acc[prop] || [];
acc[prop].push(obj);
return acc;
}, {});
}
В заключение
Надеемся, что эти примеры окажутся полезными и вдохновят вас на дальнейшее изучение возможностей JavaScript. А если вы знаете другие лаконичные и элегантные решения типичных задач, не забудьте поделиться в комментариях!
Комментарии