Игра с кодом | Эти практичные однострочные коды JavaScript облегчат вам работу

Оглавление

Дедупликация массива

Получить параметры из URL и преобразовать в объект

Проверить, является ли объект пустым

обратная строка

генерировать случайный шестнадцатеричный

Проверьте, находится ли текущая вкладка в фоновом режиме.

Проверить, находится ли элемент в фокусе

Проверить тип устройства

Скопировать текст в буфер обмена

получить выделенный текст

Запрос, является ли день рабочим днем

Преобразование Фаренгейта/Цельсия

Разница в днях между двумя датами

Преобразование RGB в шестнадцатеричный

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

В этой статье собраны очень полезные однострочные коды. Эти требования очень распространены при разработке. Использование однострочных кодов может помочь вам повысить эффективность работы. Завершите проект быстрее и эффективнее.Хотя это короткая строка кода, ее ценность в проекте безгранична, так что поторопитесь и соберите ее.

Дедупликация массива

Есть много способов удалить все повторяющиеся значения из массива, здесь мы поговорим о самом простом способе, который можно сделать одной строкой кода:

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

Затем преобразуйте Set в массив и верните его. Этот метод эффективен, код понятен, но есть проблемы с совместимостью.

const uniqueArr = (arr) => [...new Set(arr)];

console.log(uniqueArr(["前端","js","html","js","css","html"]));
// ['前端', 'js', 'html', 'css']

uniqueArrМетод преобразует данные в набор, а затем деструктурирует их в массив и возвращает.

Получить параметры из URL и преобразовать в объект

Путь веб-страницы часто: www.baidu.com?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

2. Преобразуйте объект в строку, а затем оцените, равен ли он "{}"

let obj = {};
console.log(JSON.stringify(obj) === "{}");//返回true

3. Метод Object.keys() возвращает массив имен свойств объекта, если длина равна 0, возвращается пустой объект (метод записи ES6)

console.log(Object.keys(obj).length == 0);//返回true

4. Метод Object.getOwnPropertyNames() получает имя свойства объекта и сохраняет его в массиве, если длина равна 0, это пустой объект

console.log(Object.getOwnPropertyNames(obj).length == 0);//返回true

5. Метод isEmptyObject() в jQuery, его принцип заключается в использовании метода for in для суждения (примечание: при использовании этого метода не забудьте указать jQuery в кавычках)

console.log($.isEmptyObject(obj));//返回true

обратная строка

Перевернуть строку можно легко, используя splitкомбинацию reverseи joinметод.

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 Свойство возвращает текущий элемент в документе, на который наведен фокус.

onst elementIsInFocus = (el) => (el === document.activeElement);

elementIsInFocus(anyElement)
// 元素处于焦点返回true，反之返回false

Используя jQuery, вы можете легко добавлять прослушиватели событий. Вот простой пример:

$('input').on('focus', function() {    console.log('input is focused!');});

В приведенном выше примере мы добавили прослушиватели событий фокуса ко всем элементам ввода. Когда один из элементов находится в фокусе, на консоль будет выведено сообщение «ввод сфокусирован!».

Итак, как определить, находится ли элемент в фокусе? Вы можете использовать селектор псевдокласса :focus, предоставленный jQuery, который может выбрать элемент, на котором в данный момент находится фокус. Например:

if ($('#myInput:focus').length > 0) {

    console.log('myInput is focused!');

}

В приведенном выше коде мы используем синтаксис селектора jQuery, чтобы выбрать поле ввода с идентификатором myInput и определить, находится ли оно в фокусе. Если поле ввода сфокусировано, выведите «myInput is focused!».

Проверить тип устройства

Используйте, чтобы navigator.userAgent определить, является ли это мобильным устройством или компьютерным устройством:

const judgeDeviceType =
      () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ? 'Mobile' : 'PC';

judgeDeviceType()  // PC | Mobile

Скопировать текст в буфер обмена

Clipboard API Все его операции асинхронны, они возвращают Promise объекты, не вызывая зависания страницы. Кроме того, он может помещать в буфер обмена произвольный контент (например, изображения).

const copyText = async (text) => await navigator.clipboard.writeText(text)
copyText('单行代码 前端世界')

получить выделенный текст

getSelection Получить текст, выбранный пользователем, с помощью встроенного метода :

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

getSelectedText();
// 返回选中的内容

Запрос, является ли день рабочим днем

Когда мы пишем наши собственные компоненты календаря, мы часто используем его, чтобы определить, является ли определенная дата рабочим днем; с понедельника по пятницу рабочие дни:

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