Очень большие функции JavaScript просты в использовании и очень гибки, и существуют различные способы реализации кода; иногда это можно решить одной строкой кода, поэтому старайтесь не использовать две строки.
В этой статье собран очень полезный однострочный код. Эти требования очень распространены в разработке. Использование одной строки кода может помочь вам повысить эффективность вашей работы.
Дедупликация массива
Есть много способов удалить все повторяющиеся значения из массива. Здесь мы поговорим о самом простом способе, который можно сделать одной строкой кода:
const uniqueArr = (arr) => [...new Set(arr)];console.log(uniqueArr(["Front-end","js","html","js","css","html"])); // ['Front-end', 'js', 'html', 'css']
Метод uniqueArr преобразует данные в набор, а затем деконструирует их в возвращаемый массив.
Получить параметры из URL и преобразовать их в объект
Путь к веб-странице часто имеет вид: www.google.com.hk?search=js&xxx=kkk. Нам часто нужно принимать параметры, которые можно реализовать с помощью стороннего пакета qs. Если вы просто хотите удалить параметры, это предложение кода будет достигнуто без введения qs.
const getParameters = URL => JSON.parse(`{"${decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"')}"}`
)getParameters("https://www.google.com.hk/search?q=js+md&newwindow=1");
// {q: 'js+md', newwindow: '1'}
Проверить, является ли объект пустым
Проверить, пуст ли объект, на самом деле не так просто. Даже если объект пуст, он возвращает false каждый раз, когда проверяет, равен ли объект {}.
К счастью, следующая единственная строка кода — это именно то, что нам нужно.
const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;
isEmpty({}) // true
isEmpty({a:"not empty"}) //false
перевернуть строку
Обращение строк может быть легко достигнуто с помощью разделения в сочетании с методами реверса и соединения.
const reverse = str => str.split('').reverse().join('');
reverse('this is reverse');
// esrever si siht
Создать случайный шестнадцатеричный
Генерация случайных чисел Я считаю, что вы можете сделать это на кончиках ваших пальцев, а затем генерировать шестнадцатеричные числа случайным образом, например, генерировать шестнадцатеричные значения цвета.
const randomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`
console.log(randomHexColor());
// #a2ce5b
Убедитесь, что текущая вкладка находится в фоновом режиме.
Браузеры используют просмотр с вкладками, любая веб-страница может быть в фоновом режиме, в это время пользователь не просматривает, знаете, как быстро определить, скрыта ли ваша веб-страница или видна пользователю?
const isTabActive = () => !document.hidden;isTabActive() // true|false
Определить, находится ли элемент в фокусе
Свойство activeElement возвращает текущий элемент в документе, на который наведен фокус.
const elementIsInFocus = (el) => (el === document.activeElement);elementIsInFocus(anyElement) // Returns true if the element is in focus, otherwise returns false
Проверить тип устройства
Используйте navigator.userAgent, чтобы определить, является ли это мобильным устройством или компьютерным устройством:
const judgeDeviceType =
() => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ? 'Mobile' : 'PC';judgeDeviceType() // PC | Mobile
Скопировать текст в буфер обмена
API буфера обмена Все его операции асинхронны и возвращают объекты Promise, что не приведет к зависанию страницы. Кроме того, он может помещать в буфер обмена произвольный контент (например, изображения).
const copyText = async (text) => await navigator.clipboard.writeText(text)
copyText('One Line of Code Front End World')
получить выделенный текст
Используйте встроенный getSelection, чтобы получить текст, выбранный пользователем:
const getSelectedText = () => window.getSelection().toString();getSelectedText(); //Return selected content
Проверить, является ли день рабочим
Мы часто используем его, когда пишем собственные компоненты календаря, чтобы определить, является ли дата рабочим днем; С понедельника по пятницу рабочий день:
const isWeekday = (date) => date.getDay() % 6 !== 0;isWeekday(new Date(2022, 03, 11)) // true
Преобразование Фаренгейта/Цельсия
Температура обработки может иногда вызывать головокружение. Эти две функции помогут вам преобразовать градусы Фаренгейта в градусы Цельсия и градусы Цельсия в градусы Фаренгейта.
- Преобразовать фаренгейты в градусы Цельсия
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;fahrenheitToCelsius(50); // 10
- Преобразовать градусы Цельсия в градусы Фаренгейта
const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;celsiusToFahrenheit(100) // 212
Количество дней между двумя датами
В ежедневной разработке мы часто сталкиваемся с необходимостью отображать оставшиеся дни. Как правило, нам нужно рассчитать разницу в днях между двумя датами:
const dayDiff = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000);dayDiff(new Date("2021-10-21"), new Date("2022-02-12"))
// Result: 114
Преобразование RGB в шестнадцатеричный
const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);rgbToHex(255, 255, 255); // #ffffff
Вычислить среднее значение массива
Способов расчета среднего много, и логика расчета одинакова, но методы реализации разные. Реализована простая строка кода:
const average = (arr) => arr.reduce((a, b) => a + b) / arr.length; average([1,9,18,36]) //16
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord. Заинтересованы в Взлом роста? Ознакомьтесь с разделом Схема.
