Потрясающие однострочные алгоритмы на Javascript, чтобы кодить как профессионал

Изучите эти однострочники и используйте в своих проектах!

Синтаксис Javascript и встроенные методы позволяют сократить некоторый частоиспользуемый код всего до одной строчки.

Перевернуть строку

Можно перевернуть строку используя методы split, join и reverse.

const stringReverse = str => str.split("").reverse().join("");

stringReverse("Welcome to Javascript"); //tpircsavaJ ot emocleW

Получить среднее из массива чисел

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

const average = arr => arr.reduce((a, b) => a + b) / arr.length;

average([21, 56, 23, 122, 67]); //57.8

Массив дат за последние семь дней

const pastWeek = [...Array(7).keys()].map(days => new Date(Date.now() - 86400000 * days));

Если использовать знак плюса вместо минуса, то можно получить массив со следующими семью днями. А если нужно получать данные от определённой даты, но нужно заменить Date.now() на неё. Обратите внимание, что здесь 86400000 - это количество миллисекунд в день.

Получить количество дней между двумя датами

Сначала нужно получить timestamps в миллисекундах обеих дат, вычесть одну из другой

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000);

dayDif(new Date("2021-09-30"), new Date("2021-11-06")); //37

Сделать строку с заглавной буквы

Несмотря на то, что Javascript не предоставляет встроенный метод преобразования заглавных букв, написание собственного метода для преобразования строки с заглавной буквы занимает всего одну строку.

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);

capitalize("javascript в одну строку это весело!"); //Javascript в одну строку это весело!

Удалить дубли из массива

Наборы (Set) в Javascript могут содержать только уникальные значения любого типа. Можно это использовать для удаления повторяющихся значений в массиве. Но это работает только с массивами, хранящими примитивные данные.

const removeDuplicates = (arr) => [...new Set(arr)];

removeDuplicates([31, 56, 12, 31, 45, 12, 31]); //[ 31, 56, 12, 45 ]

Округление десятичных дробей до определённого десятичного разряда

Достаточно нетривиальная задача в Javascript. Но используя метод toFixed() можно легко выполнить преобразование. Но в некоторых случаях может привести к неточности из-за работы арифметики чисел с плавающей запятой. Чтобы избежать этого неожиданного поведения в нашем коде, мы можем представить числа в экспоненциальной нотации и использовать Math.round() для округления десятичной дроби до заданного количества десятичных знаков.

const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d);

round(7.105, 2); //7.11
round(5.955, 2); //5.96

Сгенерировать случайный ID

Эта простая функция генерирует случайный идентификатор с помощью Math.random(). Поскольку Math.random() не гарантирует, что все сгенерированные числа уникальны, этот метод не на 100% безопасен для использования в производственной среде. Но нет ничего плохого в том, чтобы использовать его во время разработки, чтобы быстро получить идентификатор для завершения реализации и тестирования приложения.

const randomID2 = Math.random().toString(36).substring(2); // vmij4o5nlrs
const randomID2 = Math.random().toString(36).substring(2); // 0kmbdwbqnq9

Проверить: проскроллил ли пользователь до конца страницы?

Этот метод позволяет узнать прокручена ли страница до конца вниз?

const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;

scrolledToBottom(); // false

Проскроллить наверх страницы

Очень часто требуется такое поведение для многих сайтов, полезно вешать эту функцию на специальную кнопку «наверх» для сайта. Только перемещение будет мгновенное, без анимации.

const toTop = () => window.scrollTo(0, 0);

Переключить отображение элемента

Показать или скрыть элемент можно с помощью этой одностроковой функции.

const toggle = element => element.style.display = (element.style.display === "none" ? "block" : "none");

Сгенерировать случайный цвет

Если нужно использовать случайный цвет для какого-нибудь элемента, то можно использовать такой код с помощью методов Math.random() и padEnd().

const hexColor = () => "#" + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');

hexColor(); // '#2db8ea'
hexColor(); // '#77dede'

Удалить все куки

Чтобы удалить все куки веб-приложения нужно установить на них прошедшую дату. Если установить дату истечения куки на первую дату времени Javascript, то куки автоматически перестанут действовать.

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${ new Date(0).toUTCString()};path=/`));

Удалить HTML-теги из текста

const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';

stripHtml('<h2>Heading</h2><div>Div-block <p>Paragraph</p></div>'); //'HeadingDiv-block Paragraph'

Определить ночной режим в браузере

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

Перевод статьи от Anjalee Sudasinghe