Проверка, использует ли пользователь устройство Apple
Как и во многих проектах, нам необходимо реализовать функции на основе устройств. Вы можете использовать эту функцию, чтобы убедиться, что пользователь использует устройство Apple или нет.
Как и во многих проектах, нам необходимо реализовать функции на основе устройств. Вы можете использовать эту функцию, чтобы убедиться, что пользователь использует устройство Apple или нет.
const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(isAppleDevice);
// Result: will return true if user is on an Apple device
#фунуции👍6
Узнать время из даты
Вы можете использовать метод
Вы можете использовать метод
.toTimeString() и получить время из указанной нами даты или получить текущее время.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
👍3
Удаление HTML из текста
Очень удобная однострочная функция JavaScript, которая также важна по соображениям безопасности. Пользователи могут отправлять входные значения на основе тегов. Принимая вводимые пользователем данные, вы можете удалить любые элементы HTML в тексте, введенном пользователем с помощью DOMParser.
Очень удобная однострочная функция JavaScript, которая также важна по соображениям безопасности. Пользователи могут отправлять входные значения на основе тегов. Принимая вводимые пользователем данные, вы можете удалить любые элементы HTML в тексте, введенном пользователем с помощью DOMParser.
const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';#функции
stripHtml('<h1>Hello World!!!</h1>');
// Result: Hello World!!!
👍12
Переключение элемента (показать/скрыть)
Вы можете легко переключаться между отображением /скрытием элемента с помощью этого однострочного метода, используя свойство CSS display.
Вы можете легко переключаться между отображением /скрытием элемента с помощью этого однострочного метода, используя свойство CSS display.
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
👍9
Переворот строки
Вы можете изменять строку с помощью split, join и reverse методов.
Вы можете изменять строку с помощью split, join и reverse методов.
const stringReverse = str => str.split("").reverse().join("");
stringReverse('elcitra ym ekil uoy epoh i');
// Result: i hope you like my article
#функции👍4
Использование заглавной буквы в строке
Поскольку 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.
👍5
Округление дробей до определенного количества десятичных знаков
Когда вы имеете дело с суммами, расчеты в десятичных дробях очень важны и должны быть точными и надежными. Использование округления десятичных дробей до фиксированного числа десятичных знаков — непростая задача в JavaScript. Встроенный метод
Чтобы избежать этого странного поведения, вы можете использовать
Когда вы имеете дело с суммами, расчеты в десятичных дробях очень важны и должны быть точными и надежными. Использование округления десятичных дробей до фиксированного числа десятичных знаков — непростая задача в JavaScript. Встроенный метод
toFixed() может легко выполнить это преобразование, но в некоторых случаях он дает странные результаты из-за того, как работает арифметика с плавающей запятой.Чтобы избежать этого странного поведения, вы можете использовать
Math.round(), чтобы округлить дробь до заданного количества десятичных знаков.// 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
👍5🔥2
Перемешивание массива
Вы можете использовать следующий код для перемешивания массива. Он использует методы sort и random.
Вы можете использовать следующий код для перемешивания массива. Он использует методы sort и random.
const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());#функции
console.log(shuffleArray([1, 2, 3, 4]));
// Result: [ 1, 4, 3, 2 ]
👍9
Обнаружение Dark Mode
Узнайте, находится ли устройство пользователя в dark mode, используя следующий код.
Узнайте, находится ли устройство пользователя в dark mode, используя следующий код.
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
console.log(isDarkMode) // Result: True or False
#функции👍10
Получение параметров запроса из URL-адреса
Очень полезная функция, когда вы имеете дело с параметрами запроса в URL-адресе. Вы можете легко получить параметры запроса из него, передав URL-адрес в качестве аргумента функции.
Очень полезная функция, когда вы имеете дело с параметрами запроса в URL-адресе. Вы можете легко получить параметры запроса из него, передав URL-адрес в качестве аргумента функции.
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' }
#функции👍7
Получение среднего значения массива чисел
Редуктор JavaScript позволяет вычислять среднее значение массивов в одной строке. Метод Reduce очень полезен при написании однострочных решений для ряда проблем, таких как нахождение суммы или максимума в массиве чисел.
Редуктор JavaScript позволяет вычислять среднее значение массивов в одной строке. Метод Reduce очень полезен при написании однострочных решений для ряда проблем, таких как нахождение суммы или максимума в массиве чисел.
const average = arr => arr.reduce((a, b) => a + b) / arr.length;#функции
average([21, 56, 23, 122, 67])
//57.8
👍9🔥2❤1
Проверка, поддерживает ли текущий пользователь сенсорные события
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
#функции👍4🔥2❤1
Нахождение дня в году
Еще одна очень полезная функция JavaScript, относящаяся к Датам/Календарю. Она в основном предоставляет вам количество дней в году. Например, 6 февраля получается 37 день из 365 дней в году.
Еще одна очень полезная функция JavaScript, относящаяся к Датам/Календарю. Она в основном предоставляет вам количество дней в году. Например, 6 февраля получается 37 день из 365 дней в году.
const dayOfYear = (date) =>#функции
Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
dayOfYear(new Date());
// Result: 272
👍2
Получение значений cookie браузера
Полезная короткая функция JavaScript, предназначенная для получения значений cookie браузера.
Полезная короткая функция JavaScript, предназначенная для получения значений cookie браузера.
const cookie = name => ; ${document.cookie}.split(; ${name}=).pop().split(';').shift();
cookie('_ga');
// Result: "GA1.2.1929736587.1601974046"
#функции👍2
Хочешь видеть на канале другие рубрики? Статьи, тесты, кодпены и т.д.
Anonymous Poll
77%
Да
17%
Нет
7%
Не важно
❤1👍1🔥1
Очищение всех cookie браузера
Еще одна однострочная функция, которую можно использовать для очистки всех файлов cookie, хранящихся на веб-странице, с помощью document.cookie и их очистки.
Еще одна однострочная функция, которую можно использовать для очистки всех файлов cookie, хранящихся на веб-странице, с помощью document.cookie и их очистки.
const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, =;expires=${new Date(0).toUTCString()};path=/));
#функции👍2
Получение случайного логического значения (true / false)
Эта функция вернет логическое значение (true или false) с помощью метода Math.random(). Он создаст случайное число от 0 до 1, после чего мы проверяем, больше оно или меньше 0,5. Это означает, что шанс получить либо истину, либо ложь составляет 50/50.
Эта функция вернет логическое значение (true или false) с помощью метода Math.random(). Он создаст случайное число от 0 до 1, после чего мы проверяем, больше оно или меньше 0,5. Это означает, что шанс получить либо истину, либо ложь составляет 50/50.
const randomBoolean = () => Math.random() >= 0.5;#функции
console.log(randomBoolean());
// Result: a 50/50 change on returning true of false
👍3
Удаление дублей в массиве
Set в JavaScript хранят только уникальные элементы. Мы можем использовать это поведение для удаления повторяющихся элементов из массива. Однако оно работает только с массивами, хранящими примитивные данные. Таким образом, вам придется написать многострочное решение для удаления дубликатов в массивах, хранящих объекты. Но, тем не менее, это вполне приличный метод удаления дублей в простых сценариях.
Set в JavaScript хранят только уникальные элементы. Мы можем использовать это поведение для удаления повторяющихся элементов из массива. Однако оно работает только с массивами, хранящими примитивные данные. Таким образом, вам придется написать многострочное решение для удаления дубликатов в массивах, хранящих объекты. Но, тем не менее, это вполне приличный метод удаления дублей в простых сценариях.
const removeDuplicates = (arr) => [...new Set(arr)];#функции
removeDuplicates([31, 56, 12, 31, 45, 12, 31]);
//[ 31, 56, 12, 45 ]
👍5
Проверка валидности даты
Проверьте правильность ввода даты пользователем.
Проверьте правильность ввода даты пользователем.
const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());#функции
isDateValid("December 17, 1995 03:24:00");
// Result: true
🔥3
Получение случайного элемента из массива
Эта однострочная строка возвращает вам случайный элемент из входного массива, который вы передаете в качестве аргумента функции.
Эта однострочная строка возвращает вам случайный элемент из входного массива, который вы передаете в качестве аргумента функции.
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
👍4❤1
Разделитель разрядов
Я задам лишь один вопрос: «Что будет выведено в консоль?»:
Всё просто, символ "
Я задам лишь один вопрос: «Что будет выведено в консоль?»:
console.log(1_000 + 1_500);Думаете, что произойдет конкатенация и в консоль выведется «1_0001_500»? Или же выведет ошибку? На самом деле ответом будет являться число
2500, но почему?Всё просто, символ "
_" является разделителем для улучшения читабельности. Согласитесь, гораздо быстрее понять, что написано «один миллион», когда он выглядит так: 1_000_000, а не так: 1000000
#полезно👍21