Неважно, являетесь ли вы начинающим, средним или профессиональным разработчиком. В какой-то момент эти функции могут понадобиться вам в своей повседневной работе, либо в личных проектах.
1. Скопировать в буфер обмена.
Полезная однострочная функция JS, с помощью которой можно легко скопировать любой текст в буфер обмена.
const copyToClipboard = (text) => navigator.clipboard.writeText(text);
// пример использования
copyToClipboard("This Sring is Copied To Clipboard.");
2. Получить случайное число из определенного диапазона.
Важная функция JavaScript для генерации случайного числа в определенном диапазоне. В качестве аргументов задаются минимальное и максимальное значения.
const randomNumberInRange = (min = 0, max = 100) => Math.floor(Math.random() * (max - min + 1)) + min;
randomNumberInRange()
// Result: Диапазон случайных чисел по умолчанию составляет 0 - 100
randomNumberInRange(100, 200)
// Result: Вы получите случайное число в диапазоне от 100 до 200, где 100 - минимальный диапазон, а 200 - максимальный.
3. Преобразование RGB в HEX.
Полезная функция в этом списке, которая используется для преобразования RGB в шестнадцатеричный код.
const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
rgbToHex(0, 51, 255);
// Result: #0033ff
4. Прокрутка страницы в самый вверх
const goToTop = () => window.scrollTo(0, 0);
goToTop();
5. Поиск разницы в днях между двумя датами.
Следующая функция является очень полезной при работе с датами в JavaScript. Найдите количество дней между двумя заданными датами, используя следующий код.
const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000);
dayDif(new Date("2020-10-21"), new Date("2021-10-22"));
// Result: 366
6. Генератор случайного цвета в HEX.
С помощью этой функции можно генерировать случайные шестнадцатеричные цвета.
const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
console.log(randomHex());
// Result: #92b008
7. Преобразование температуры по Фаренгейту / Цельсию.
Если вы имеете дело с температурой в своем проекте, то эти две функции JavaScript будут очень полезны. Эти две функции помогут вам преобразовать Фаренгейт в Цельсий и наоборот.
const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;
// Пример
celsiusToFahrenheit(15); // 59
celsiusToFahrenheit(0); // 32
celsiusToFahrenheit(-20); // -4
fahrenheitToCelsius(59); // 15
fahrenheitToCelsius(32); // 0
8. Удаление HTML из текста.
Очень удобная однострочная функция JavaScript, которая также важна по соображениям безопасности. При получение пользовательских данных ввода, вы можете удалить любые HTML-элементы из принимаемых данных с помощью DOMParser.
const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';
stripHtml('<h1>Hello <strong>World</strong>!!!</h1>');
// Result: Hello World!!!
9. Перевернуть строку (задом на перед).
Вы можете развернуть строку используя методы split, join и reverse.
const stringReverse = str => str.split("").reverse().join("");
stringReverse('elcitra ym ekil uoy epoh i');
// Result: i hope you like my article
10. Функция Capitalize в JS.
Поскольку JavaScript не предоставляет встроенного метода Capitalize, напишем его сами.
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);
capitalize("i hope you like my article.");
// I hope you like my article.
11. Перемешать массив с данными в JS.
Вы можете использовать следующий код для перетасовки массива. В нем используются методы sort и random.
const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
console.log(shuffleArray([1, 2, 3, 4]));
// Result: [ 1, 4, 3, 2 ]
12. Получение Query параметров запроса из URL.
Очень полезная функция, когда вы имеете дело с url, Query параметрами запроса.
const getParameters = (URL) => JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') +'"}');
getParameters("https://www.google.de/search?q=cars&start=40");
// Result: { q: 'cars', start: '40' }
13. Получение среднего значения массива чисел.
JavaScript метод reducer позволяет вычислить среднее значение нескольких массивов в одной строке. Reduce весьма полезен при написании однострочных решений.
const average = arr => arr.reduce((a, b) => a + b) / arr.length;
average([21, 56, 23, 122, 67]);
//57.8
14. Удаление дубликатов в массиве JS.
SET в JavaScript хранят только уникальные элементы. Мы можем использовать это поведение для удаления дубликатов из массива.
const removeDuplicates = (arr) => [...new Set(arr)];
removeDuplicates([31, 56, 12, 31, 45, 12, 31]);
//[ 31, 56, 12, 45 ]
15. Получение случайного элемента из массива в JS.
Эта однострочная функция возвращает вам случайный элемент из вашего входного массива, который вы передаете в качестве аргумента функции.
const randomArrayItem = (arr) => arr[Math.floor(Math.random() * arr.length)];
randomArrayItem(['lol', 'a', 2, 'foo', 52, 'Jhon', 'hello', 57]);
// Result: Это будет случайный элемент из массива