27 основных однострочных функций JavaScript

0 3

Если вы пишете код ежедневно, я гарантирую, что вам всегда нужно использовать эти функции. Я прочитал много онлайн-ресурсов и собрал самые полезные однострочные функции JavaScript. Давайте начнем.

1. Копирование в буфер обмена

Содержание статьи:

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

JavaScript const copyToClipboard = (text) => navigator.clipboard.writeText(text); copyToClipboard(«This Sring is Copied To Clipboard.»);

123 const copyToClipboard = (text) => navigator.clipboard.writeText(text); copyToClipboard(«This Sring is Copied To Clipboard.»);

27 основных однострочных функций JavaScript

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

2. Получение случайного числа из определенного диапазона

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

JavaScript const randomNumberInRange = (min = 0, max = 100) => Math.floor(Math.random() * (max — min + 1)) + min; randomNumberInRange() // Result: Default random number range is 0 — 100, so you get a number between 0 and 100. randomNumberInRange(100, 200) // Result: You will get a random number between 100 and 200, where 100 is min range and 200 is max range.

123456 const randomNumberInRange = (min = 0, max = 100) => Math.floor(Math.random() * (max — min + 1)) + min; randomNumberInRange()// Result: Default random number range is 0 — 100, so you get a number between 0 and 100.randomNumberInRange(100, 200)// Result: You will get a random number between 100 and 200, where 100 is min range and 200 is max range.

3. Преобразование RGB в Hex

Полезная функция в этом списке, которая используется для преобразования RGB в шестнадцатеричный код.

JavaScript const rgbToHex = (r, g, b) => «#» + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); rgbToHex(0, 51, 255); // Result: #0033ff

1234 const rgbToHex = (r, g, b) => «#» + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); rgbToHex(0, 51, 255);// Result: #0033ff

4. Прокрутка до начала страницы

Еще одна полезная функция JavaScript, которая используется для автоматической прокрутки к началу веб-страницы.

JavaScript const goToTop = () => window.scrollTo(0, 0); goToTop();

123 const goToTop = () => window.scrollTo(0, 0); goToTop();

5. Нахождение количества дней между двумя датами

Следующая функция — очень полезная однострочная функция, когда вы работаете с календарем / датами в JavaScript. Нахождение количества дней между двумя заданными датами, используя следующий код.

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

1234 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. Генерация случайного шестнадцатеричного числа

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

JavaScript const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, «0»)}`; console.log(randomHex()); // Result: #92b008

1234 const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, «0»)}`; console.log(randomHex());// Result: #92b008

7. Проверка, является ли указанный день будним днем

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

JavaScript const isWeekday = (date) => date.getDay() % 6 !== 0; console.log(isWeekday(new Date(2021, 0, 11))); // Result: true (Monday) console.log(isWeekday(new Date(2021, 0, 10))); // Result: false (Sunday)

123456 const isWeekday = (date) => date.getDay() % 6 !== 0; console.log(isWeekday(new Date(2021, 0, 11)));// Result: true (Monday)console.log(isWeekday(new Date(2021, 0, 10)));// Result: false (Sunday)

8. Преобразование температуры по Фаренгейту/Цельсию

Если вы имеете дело с температурой в своем проекте, тогда эти две функции JavaScript очень полезны. Они помогут вам преобразовать градусы Фаренгейта в градусы Цельсия и наоборот.

JavaScript const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32; const fahrenheitToCelsius = (fahrenheit) => (fahrenheit — 32) * 5/9; // Examples celsiusToFahrenheit(15); // 59 celsiusToFahrenheit(0); // 32 celsiusToFahrenheit(-20); // -4 fahrenheitToCelsius(59); // 15 fahrenheitToCelsius(32); // 0

12345678910 const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;const fahrenheitToCelsius = (fahrenheit) => (fahrenheit — 32) * 5/9; // ExamplescelsiusToFahrenheit(15);    // 59celsiusToFahrenheit(0);     // 32celsiusToFahrenheit(-20);   // -4 fahrenheitToCelsius(59);    // 15fahrenheitToCelsius(32);    // 0

9. Проверка, использует ли пользователь устройство Apple

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

JavaScript const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform); console.log(isAppleDevice); // Result: will return true if user is on an Apple device

1234 const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform); console.log(isAppleDevice);// Result: will return true if user is on an Apple device

10. Узнать время из даты

Вы можете использовать метод .toTimeString() и получить время из указанной нами даты или получить текущее время.

JavaScript const timeFromDate = date => date.toTimeString().slice(0, 8); console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); // Result: «17:30:00» console.log(timeFromDate(new Date())); // Result: will log the current time

123456 const timeFromDate = date => date.toTimeString().slice(0, 8); console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); // Result: «17:30:00″console.log(timeFromDate(new Date()));// Result: will log the current time

11. Удаление HTML из текста

Очень удобная однострочная функция JavaScript, которая также важна по соображениям безопасности. Пользователи могут отправлять входные значения на основе тегов. Принимая вводимые пользователем данные, вы можете удалить любые элементы HTML в тексте, введенном пользователем с помощью DOMParser.

JavaScript const stripHtml = html => (new DOMParser().parseFromString(html, ‘text/html’)).body.textContent || »; stripHtml(‘<h1>Hello <strong>World</strong>!!!</h1>’); // Result: Hello World!!!

1234 const stripHtml = html => (new DOMParser().parseFromString(html, ‘text/html’)).body.textContent || »; stripHtml(‘<h1>Hello <strong>World</strong>!!!</h1>’);// Result: Hello World!!!

12. Переключение элемента (показать/скрыть)

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

JavaScript const toggleElementDisplay = element => element.style.display = (element.style.display === «none» ? «block» : «none»); toggleElementDisplay(document.body) // Result: Page body should be invisible, if it was present before and on executing command again it should be toggled

1234 const toggleElementDisplay = element => element.style.display = (element.style.display === «none» ? «block» : «none»); toggleElementDisplay(document.body)// Result: Page body should be invisible, if it was present before and on executing command again it should be toggled

13. Переворот строки

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

JavaScript const stringReverse = str => str.split(«»).reverse().join(«»); stringReverse(‘elcitra ym ekil uoy epoh i’); // Result: i hope you like my article

1234 const stringReverse = str => str.split(«»).reverse().join(«»); stringReverse(‘elcitra ym ekil uoy epoh i’);// Result: i hope you like my article

14. Использование заглавной буквы в строке

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

JavaScript const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1); capitalize(«i hope you like my article.»); // I hope you like my article.

1234 const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1); capitalize(«i hope you like my article.»);// I hope you like my article.

27 основных однострочных функций JavaScript

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Когда вы имеете дело с суммами, расчеты в десятичных дробях очень важны и должны быть точными и надежными. Использование округления десятичных дробей до фиксированного числа десятичных знаков — непростая задача в JavaScript. Встроенный метод toFixed() может легко выполнить это преобразование, но в некоторых случаях он дает странные результаты из-за того, как работает арифметика с плавающей запятой.

Чтобы избежать этого странного поведения, вы можете использовать Math.round(), чтобы округлить дробь до заданного количества десятичных знаков.

JavaScript // Default Javascript function toFixed behaviour Number((1.005).toFixed(2)) //outputs 1 instead of 1.01 Number((1.555).toFixed(2)) //outputs 1.55 instead of 1.56 const round = (n, d) => Number(Math.round(n + «e» + d) + «e-» + d); round(1.005, 2) //1.01 round(1.555, 2) //1.56

12345678 // Default Javascript function toFixed behaviourNumber((1.005).toFixed(2)) //outputs 1 instead of 1.01Number((1.555).toFixed(2)) //outputs 1.55 instead of 1.56 const round = (n, d) => Number(Math.round(n + «e» + d) + «e-» + d); round(1.005, 2) //1.01round(1.555, 2) //1.56

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

Вы можете использовать следующий код для перемешивания массива. Он использует методы sort и random.

JavaScript const shuffleArray = (arr) => arr.sort(() => 0.5 — Math.random()); console.log(shuffleArray([1, 2, 3, 4])); // Result: [ 1, 4, 3, 2 ]

1234 const shuffleArray = (arr) => arr.sort(() => 0.5 — Math.random()); console.log(shuffleArray([1, 2, 3, 4]));// Result: [ 1, 4, 3, 2 ]

17. Обнаружение Dark Mode

Узнайте, находится ли устройство пользователя в dark mode, используя следующий код.

JavaScript const isDarkMode = window.matchMedia && window.matchMedia(‘(prefers-color-scheme: dark)’).matches; console.log(isDarkMode) // Result: True or False

123 const isDarkMode = window.matchMedia && window.matchMedia(‘(prefers-color-scheme: dark)’).matches; console.log(isDarkMode) // Result: True or False

18. Получение параметров запроса из URL-адреса

Очень полезная функция, когда вы имеете дело с параметрами запроса в URL-адресе. Вы можете легко получить параметры запроса из него, передав URL-адрес в качестве аргумента функции.

JavaScript 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’ }

1234 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’ }

19. Получение среднего значения массива чисел

Редуктор JavaScript позволяет вычислять среднее значение массивов в одной строке. Метод Reduce очень полезен при написании однострочных решений для ряда проблем, таких как нахождение суммы или максимума в массиве чисел.

JavaScript const average = arr => arr.reduce((a, b) => a + b) / arr.length; average([21, 56, 23, 122, 67]) //57.8

1234 const average = arr => arr.reduce((a, b) => a + b) / arr.length; average([21, 56, 23, 122, 67])//57.8

20. Проверка, поддерживает ли текущий пользователь сенсорные события

JavaScript const touchSupported = () => { (‘ontouchstart’ in window || window.DocumentTouch && document instanceof window.DocumentTouch); } console.log(touchSupported()); // Result: will return true if touch events are supported, false if not

123456 const touchSupported = () => {  (‘ontouchstart’ in window || window.DocumentTouch && document instanceof window.DocumentTouch);} console.log(touchSupported());// Result: will return true if touch events are supported, false if not

21. Нахождение дня в году

Еще одна очень полезная функция JavaScript, относящаяся к Датам/Календарю. Она в основном предоставляет вам количество дней в году. Например, 6 февраля получается 37 день из 365 дней в году.

JavaScript const dayOfYear = (date) => Math.floor((date — new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24); dayOfYear(new Date()); // Result: 272

12345 const dayOfYear = (date) =>  Math.floor((date — new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24); dayOfYear(new Date());// Result: 272

22. Получение значений cookie браузера

Полезная короткая функция JavaScript, предназначенная для получения значений cookie браузера.

JavaScript const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(‘;’).shift(); cookie(‘_ga’); // Result: «GA1.2.1929736587.1601974046»

1234 const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(‘;’).shift(); cookie(‘_ga’);// Result: «GA1.2.1929736587.1601974046»

23. Очищение всех cookie браузера

Еще одна однострочная функция, которую можно использовать для очистки всех файлов cookie, хранящихся на веб-странице, с помощью document.cookie и их очистки.

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

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

24. Получение случайного логического значения (true / false)

Эта функция вернет логическое значение (true или false) с помощью метода Math.random(). Он создаст случайное число от 0 до 1, после чего мы проверяем, больше оно или меньше 0,5. Это означает, что шанс получить либо истину, либо ложь составляет 50/50.

JavaScript const randomBoolean = () => Math.random() >= 0.5; console.log(randomBoolean()); // Result: a 50/50 change on returning true of false

1234 const randomBoolean = () => Math.random() >= 0.5; console.log(randomBoolean());// Result: a 50/50 change on returning true of false

25. Удаление дублей в массиве

Set в JavaScript хранят только уникальные элементы. Мы можем использовать это поведение для удаления повторяющихся элементов из массива. Однако оно работает только с массивами, хранящими примитивные данные. Таким образом, вам придется написать многострочное решение для удаления дубликатов в массивах, хранящих объекты. Но, тем не менее, это вполне приличный метод удаления дублей в простых сценариях.

JavaScript const removeDuplicates = (arr) => […new Set(arr)]; removeDuplicates([31, 56, 12, 31, 45, 12, 31]); //[ 31, 56, 12, 45 ]

1234 const removeDuplicates = (arr) => […new Set(arr)]; removeDuplicates([31, 56, 12, 31, 45, 12, 31]);//[ 31, 56, 12, 45 ]

26. Проверка валидности даты

Проверьте правильность ввода даты пользователем.

JavaScript const isDateValid = (…val) => !Number.isNaN(new Date(…val).valueOf()); isDateValid(«December 17, 1995 03:24:00»); // Result: true

1234 const isDateValid = (…val) => !Number.isNaN(new Date(…val).valueOf()); isDateValid(«December 17, 1995 03:24:00»);// Result: true

27. Получение случайного элемента из массива

Эта однострочная строка возвращает вам случайный элемент из входного массива, который вы передаете в качестве аргумента функции.

JavaScript const randomArrayItem = (arr) => arr[Math.floor(Math.random() * arr.length)]; randomArrayItem([‘lol’, ‘a’, 2, ‘foo’, 52, ‘Jhon’, ‘hello’, 57]); // Result: It will be some random item from array

1234 const randomArrayItem = (arr) => arr[Math.floor(Math.random() * arr.length)]; randomArrayItem([‘lol’, ‘a’, 2, ‘foo’, 52, ‘Jhon’, ‘hello’, 57]);// Result: It will be some random item from array

Удачного кодирования!

Автор: Sayyed Hammad Ali

Источник: webformyself.com

Оставьте ответ

Ваш электронный адрес не будет опубликован.