Эти строки JS-кода делают вас похожим на эксперта по интерфейсу

внешний интерфейс JavaScript

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

JavaScript может делать так много удивительных вещей!

От сложных фреймворков до работы с API — нужно многому научиться.

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

Ознакомьтесь с этими 13 однострочниками JavaScript, которые заставят вас выглядеть экспертом!

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

Эта функция используетMath.random()Метод возвращает логическое значение (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

2. Проверьте, является ли дата рабочим днем

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

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)

3. Переверните строку

Есть несколько различных способов перевернуть строку. Следующий код является одним из самых простых способов.

const reverse = str => str.split('').reverse().join('');
reverse('hello world');     
// Result: 'dlrow olleh'

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

Мы можем использоватьdocument.hiddenсвойство, чтобы проверить, находится ли текущая вкладка на переднем плане.

const isBrowserTabInView = () => document.hidden;
isBrowserTabInView();
// Result: returns true or false depending on if tab is in view / focus

5. Проверьте, четное ли число

Самый простой способ решить эту проблему — использовать оператор по модулю (%). Если вы не знакомы с этим, вотStack OverflowХорошая иллюстрация на .

const isEven = num => num % 2 === 0;
console.log(isEven(2));
// Result: true
console.log(isEven(3));
// Result: false

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

7. Сохраняйте десятичные точки (не округляйте)

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

const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);
// Examples
toFixed(25.198726354, 1);       // 25.1
toFixed(25.198726354, 2);       // 25.19
toFixed(25.198726354, 3);       // 25.198
toFixed(25.198726354, 4);       // 25.1987
toFixed(25.198726354, 5);       // 25.19872
toFixed(25.198726354, 6);       // 25.198726

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

мы можем использоватьdocument.activeElementСвойство проверяет, находится ли элемент в данный момент в фокусе.

const elementIsInFocus = (el) => (el === document.activeElement);
elementIsInFocus(anyElement)
// Result: will return true if in focus, false if not in focus

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

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

10. Проверьте, является ли текущий пользователь устройством Apple.

мы можем использоватьnavigator.platformчтобы проверить, является ли текущий пользователь устройством Apple.

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

11. Прокрутите страницу вверх

window.scrollTo()Метод принимает координаты x и y для прокрутки. Если мы установим эти координаты равными нулю, мы сможем прокрутить страницу вверх.

Примечание. IE не поддерживаетscrollTo()метод.

const goToTop = () => window.scrollTo(0, 0);
goToTop();
// Result: will scroll the browser to the top of the page

12. Получите среднее значение всех параметров

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

const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4);
// Result: 2.5

13. Преобразование Фаренгейта/Цельсия. (Это следует редко использовать в Китае)

Обработка температур иногда может сбивать с толку. Эти 2 функции помогут вам конвертировать градусы Фаренгейта в градусы Цельсия и наоборот.

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

Спасибо за чтение! Надеюсь, вы сегодня узнали что-то новое.

Эта статья была впервые опубликована в публичном аккаунте«Передняя часть — это весело», добро пожаловать, чтобы следовать.

Категории