Методы массивов .map(), .filter(), .reduce(), и т. д.

Так же, как и цикл for, методы массивов map, filter и reduce позволяют перебирать элементы массива:

• .map() — позволяет преобразовать каждый элемент массива;
• .filter() — создаёт новый массив со всеми элементами, которые прошли проверку, заданную в функции;
• .reduce() — позволяет преобразовать весь массив в соответствии с нашими нуждами (даже в другой тип данных).

Указанные методы короче и читаются легче, чем цикл for. Комбинируя эти методы и стрелочные функции, можно ещё больше сократить код.

#методы

Деструктурирующее присваивание

Деструктурирующее присваивание позволяет распаковать массивы или объекты в переменные. Это удобная концепция, поскольку не нужно ссылаться на весь объект, когда мы хотим его использовать.

Деструктуризация позволяет извлечь нужное нам значение из объекта, создав для этого значения независимую переменную. Мы можем сделать код чище, не ссылаясь на объект, когда нам нужно только одно его значение.

#общее

Параметры по умолчанию

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

#функции

Синтаксис spread (три точки — …)

Синтаксис spread позволяет расширять объекты (их пары ключ-значение) и массивы, получая новые объекты. Этот синтаксис работает только при создании нового объекта или массива.

Синтаксис spread хорош для объединения свойств старого объекта в новом. Когда объект или массив расширяется, создавая новый объект или массив, появляется временная копия.

#общее

Короткие условные операторы

В JavaScript есть сокращённая форма записи условных операторов if-else — тернарная операция (ternary). В отличие от if-else тернарные операции являются выражениями. Это даёт большую гибкость, позволяя использовать их так же, как и любые другие выражения (такие как ${} в случае с шаблонными строками).

Тернарные операции не всегда лучше оператора if-else. Например при обработке множественных условий первые окажутся неудобочитаемыми.

#операторы

Модули ES

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

Можно осуществлять множественный экспорт/импорт с помощью фигурных скобок (и ключевых слов export/import) или одиночный без скобок (с ключевыми словами export default и import).

Такой подход позволяет сделать код модульным. Мы можем писать код там, где он нужен, не собирая всё в один большой файл. В примере ниже показано, как вызвать функцию getLocalTime из отдельного файла в app.js.

#модули

Промисы + async/await

Можно отложить на неопределённое время выполнение некоторых участков кода в JavaScript (например setTimeout(), событие listener или сетевой запрос с fetch API).

Промисы — способ сделать предсказуемым асинхронный код на JS. Они помогают разрешать код, созданный с помощью async. Успешно выполненный код обрабатывается с помощью функций обратного вызова .then(), ошибки — с помощью функции .catch();

async/await — улучшенный синтаксис для работы с промисами, который заставляет асинхронный код выглядеть синхронным.

#методы

pop()

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

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

Output:
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Robert' ]

#методы

Копирование в буфер обмена

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

const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard("This Sring is Copied To Clipboard.");

#функции

Получение случайного числа из определенного диапазона

Важная функция 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.

#функции

Преобразование 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 goToTop = () => window.scrollTo(0, 0);

goToTop();

#функции

Нахождение количества дней между двумя датами

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

#функции

Генерация случайного шестнадцатеричного числа

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

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

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

#функции

Проверка, является ли указанный день будним днем

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

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)

#функции

Преобразование температуры по Фаренгейту/Цельсию

Если вы имеете дело с температурой в своем проекте, тогда эти две функции 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

#функции

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

#фунуции

Узнать время из даты

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

#функции

Удаление HTML из текста

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

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

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

#функции

Переключение элемента (показать/скрыть)

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

#функции