Объем js-кода напрямую влияет на время загрузки страницы. Если есть возможность сократить код - это обязательно нужно сделать! В данной статье буду собирать полезные однострочники, который дают возможность уменьшить время загрузки сайта

Подсчет символов в строке

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

const characterCount = (str, char) => str.split(char).length - 1

Суть проста. Мы разбиваем строку с помощью переданного параметра char и получаем длину возвращаемого массива. При каждом делении строки получается на 1 элемент больше значения делителя. Следовательно, вычитаем 1 и получаем однострочный скрипт characterCount.

Проверка объекта на пустоту

Пустой объект или нет? На самом деле определить это не так легко, как кажется. Проверяя, равняется ли объект {}, мы всегда будем получать false, даже если он пустой. К счастью, есть один однострочник, который сделает все как надо.

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object

Здесь мы проверяем, равняется ли длина ключей объекта нулю и является ли переданный параметр фактическим объектом.

Ожидание перед выполнением

Идея проста: если при выполнении кода нужно определенное время подождать, то решением становится однострочник wait

const wait = async (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));

В однострочнике wait мы создаем промис и выполняем его по прошествии заданного промежутка времени, используя функцию setTimeout.

Вычисление разницы в днях между двумя датами

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

const daysBetween = (date1, date2) => Math.ceil(Math.abs(date1 - date2) / (1000 * 60 * 60 * 24))

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

Перенаправление на другой URL

Достаточно часто имеется необходимость делать редирект пользователя на другую страницу:

const redirect = url => location.href = url

location  —  это метод для глобального объекта window, а поведение при настройке свойства href такое же, как при нажатии пользователем на ссылку.

Проверка поддержки режима Touch на устройствах

Так как устройств, способных подключаться к интернету, становится все больше и больше, возрастает необходимость создания отзывчивых веб-сайтов. Лет 20 тому назад разработчику приходилось задумываться о настольной версии веб-сайта, но в настоящее время свыше 50% веб-трафика проходит через сенсорные устройства. Поэтому выполнение действий, основанных на поддержке режима Touch, приобретает особую важность.

const touchSupported = () => ('ontouchstart' in window || DocumentTouch && document instanceof DocumentTouch)

В этом однострочнике мы проверяем, поддерживается ли в документе событие touchstart или нет.

Вставка HTML-строки после элемента

Как правило, при разработке веб-приложений мы обновляем DOM с помощью JavaScript. Для этих целей существует ряд базовых методов, но чем сложнее становится ситуация, тем труднее подобрать для нее решение. Предлагаемый однострочник вставляет HTML-строку сразу после HTML-элемента

const insertHTMLAfter = (html, el) => el.insertAdjacentHTML('afterend', html)

Перемешивание массива

В любое время в процессе разработки может встретиться такая обычная процедура, как перемешивание набора данных. К сожалению, в JavaScript нет метода shuffle, встроенного в массивы. Зато есть однострочный скрипт shuffle для повседневного применения

const shuffle = arr => arr.sort(() => 0.5 - Math.random())

Он использует метод sort и произвольно сортирует до или после предыдущего элемента массива.

Получение выбранного текста с веб-страницы

Браузеры располагают встроенным методом getSelection для глобального объекта windows. С помощью данного метода можно создать однострочник, который возвращает выделенный или заданный текст с веб-страницы.

const getSelectedText = () => window.getSelection().toString()

Получение произвольного логического значения

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

const getRandomBoolean = () => Math.random() >= 0.5

Данный однострочник с вероятностью 50/50 возвращает true или false. Объясняется это тем, что вероятность генерации произвольного числа больше 0.5, равна вероятности того, что оно окажется меньше.

Однако если нужно получить произвольное логическое значение с 70%-ой вероятностью false, тогда просто замените 0.5 на 0.7 и т.д.

Вычисление среднего значения массива

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

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

В однострочнике average вместо цикла мы используем метод reduce для получения суммы массива в одной строке. Затем делим ее на его длину и получаем искомое среднее значение.