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

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

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. А если вы знаете другие лаконичные и элегантные решения типичных задач, не забудьте поделиться в комментариях!