🍰 15 полезных JavaScript сниппетов на все случаи жизни

Начинающим разработчикам часто приходится искать быстрые решения для типичных задач, таких как копирование текста в буфер обмена, обработка URL-параметров или управление элементами DOM. В этой статье мы собрали 15 полезных JavaScript сниппетов, которые помогут значительно упростить работу и ускорить разработку: эти небольшие, но эффективные фрагменты кода пригодятся почти в любом проекте.

1. Как скопировать текст в буфер обмена

В веб-приложениях часто возникает необходимость скопировать фрагмент текста в буфер. С помощью этого сниппета, например, можно легко сделать кнопку «Скопировать»:

2. Как открыть новую вкладку браузера с указанным URL-адресом

Этот код открывает новую вкладку браузера с указанным URL-адресом:

3. Как вычислить разницу между двумя датами

Этот код вычисляет разницу между двумя датами в миллисекундах, независимо от порядка дат:

Результат можно представить в более удобных единицах времени, например, днях:

4. Как получить значение cookie

Этот код позволяет получить значение cookie по его имени из хранилища браузера:

Функция полезна для:

• Извлечения данных сессии, таких как имя пользователя или токен авторизации.
• Настроек пользователя, например, сохраненной темы или языка интерфейса.
• Анализа данных о посещении страницы.

Статья по теме

☕ 25 полезных сниппетов JavaScript для вашей коллекции

5. Как ограничить частоту выполнения функции

Дебаунсинг помогает контролировать частоту выполнения функции (и, соответственно, количество запросов к серверу). Он особенно полезен при обработке событий (ввод текста в строку поиска, изменение размера окна браузера и т.п.):

6. Как сделать глубокую копию объекта

Глубокое копирование объекта позволяет создать его полную независимую копию, не изменяя оригинал. Это особенно важно, когда необходимо избежать непреднамеренных изменений исходных данных. Новый объект, созданный с помощью этого метода, не содержит ссылок на оригинальный объект и любые изменения в копии не повлияют на исходные данные:

7. Создание нового объекта из исходного

Этот сниппет позволяет быстро создать новый объект, который содержит все свойства и значения из исходного объекта, но с добавлением новых ключей, где каждое имя свойства преобразовано (в данном случае — в верхний регистр):

👨‍💻🎨 Библиотека фронтендера

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»

8. Как определить, виден ли элемента в области просмотра

Определение видимости элемента в области просмотра (viewport) позволяет понять, находится ли элемент в видимой части экрана пользователя. Это полезно, например, для:

• Запуска анимаций при появлении элемента на экране.
• Ленивой загрузки изображений (контент загружается только тогда, когда попадает в поле зрения).
• Аналитики и трекинга, которые определяют, когда пользователь дошел до конкретного блока страницы.

9. Как сгенерировать случайный цвет в HEX-формате

Быстрая генерация случайного шестнадцатеричного цвета позволяет динамически менять стили, например, фон страницы:

10. Как преобразовать первую букву строки в заглавную

Преобразование первой буквы строки в заглавную помогает форматировать текст, делая его более читаемым и эстетичным, например, например, при обработке небрежного пользовательского ввода:

11. Как распаковать вложенный массив в одномерный

Распаковка вложенных массивов с помощью рекурсии позволяет превратить многомерный массив в одномерный, что особенно полезно при обработке сложных данных, например, полученных из API:

12. Как определить, что значение является объектом

Быстрая проверка, является ли значение объектом помогает определить, относится ли переменная к стандартному объектному типу JavaScript, а не к другому типу данных (массивам, null или функциям):

13. Как определить, что значение является DOM-элементом

Этот определяет, является ли переданное значение DOM-элементом:

14. Как получить параметры запроса из URL

Получение параметров строки запроса из URL позволяет извлекать значения параметров, передаваемых в адресной строке веб-страницы. Это может использовать, например, для:

• Динамической загрузки контента (получение информации о пользователе по параметру id в URL).
• Фильтрации данных (с применением параметров сортировки или категорий из URL).
• Аналитики и отслеживания кампаний (чтение UTM-меток в URL для маркетинговых целей).

15. Как сруппировать объекты массива по заданному свойству

Такая группировка позволяет организовать данные, объединяя элементы с одинаковым значением определенного свойства в отдельные группы. Эту функцию можно использовать для создания отчетов, категорий или аналитики:

В заключение

Надеемся, что эти примеры окажутся полезными и вдохновят вас на дальнейшее изучение возможностей JavaScript. А если вы знаете другие лаконичные и элегантные решения типичных задач, не забудьте поделиться в комментариях!