JavaScript заметки

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

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

console.log(isDarkMode) // Result: True or False

#функции

Frontend-разработчики создали каналы, в которых ежедневно выходят полезные посты. Специалист по JavaScript - образовательный канал по JS человеческим языком, с повседневными практическими заметками по языку. Сеньор Помидор - канал для frontend программистов, с примерами лучших решений на HTML|CSS|JS. Figma - Templates - канал, где собраны примеры реальных макетов в Figma, которые заказчики присылают на вёрстку.

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

const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());

console.log(shuffleArray([1, 2, 3, 4]));
// Result: [ 1, 4, 3, 2 ]

#функции

Округление дробей до определенного количества десятичных знаков Когда вы имеете дело с суммами, расчеты в десятичных дробях очень важны и должны быть точными и надежными. Использование округления десятичных дробей до фиксированного числа десятичных знаков — непростая задача в 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

#функции

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

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);

capitalize("i hope you like my article.");
// I hope you like my article.

#функции

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

const stringReverse = str => str.split("").reverse().join("");

stringReverse('elcitra ym ekil uoy epoh i');
// Result: i hope you like my article

#функции

Переключение элемента (показать/скрыть) Вы можете легко переключаться между отображением /скрытием элемента с помощью этого однострочного метода, используя свойство 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

#функции

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

const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';

stripHtml('<h1>Hello World!!!</h1>');
// Result: Hello World!!!

#функции

Узнать время из даты Вы можете использовать метод .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

#функции

Проверка, использует ли пользователь устройство 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 #фунуции

Срочно! Нужны фронтендеры и программисты разных уровней и новички Для новичков: - Бесплатные обучения - Стажировка - Практикумы - Бесплатные курсы Для опытных: - Вакансии junior - Вакансии junior+ - Вакансии middle - Вакансии senior - Вакансии Team Lead - Другие вакансии

Преобразование температуры по Фаренгейту/Цельсию Если вы имеете дело с температурой в своем проекте, тогда эти две функции 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

#функции

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

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)

#функции

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

const randomHex = () => #${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")};

console.log(randomHex());
// Result: #92b008

#функции

Нахождение количества дней между двумя датами Следующая функция — очень полезная однострочная функция, когда вы работаете с календарем / датами в 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 #функции

Прокрутка до начала страницы Еще одна полезная функция JavaScript, которая используется для автоматической прокрутки к началу веб-страницы. const goToTop = () => window.scrollTo(0, 0); goToTop(); #функции

Преобразование RGB в Hex Полезная функция в этом списке, которая используется для преобразования RGB в шестнадцатеричный код. const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); rgbToHex(0, 51, 255); // Result: #0033ff #функции

Получение случайного числа из определенного диапазона Важная функция 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. #функции

Копирование в буфер обмена Полезная однострочная функция JavaScript, с помощью которой можно легко скопировать любой текст в буфер обмена. const copyToClipboard = (text) => navigator.clipboard.writeText(text); copyToClipboard("This Sring is Copied To Clipboard."); #функции

pop() Метод pop() удаляет последний элемент массива.

var students = [ 'Jack', 'James', 'Robert', 'John'];
 console.log(students);
 students.pop();
 console.log(students)

Output: [ 'Jack', 'James', 'Robert', 'John' ] [ 'Jack', 'James', 'Robert' ] #методы