Полезные плагины и библиотеки

Делимся статьей, где автор рассказывает про полезные плагины и библиотеки для JavaScript. Всего их 25. Они помогут тебе при работе с анимацией, видео, диаграммами и прочим.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

flat

Это метод, который создает новый массив со всеми элементами вложенного массива, рекурсивно объединенными с вышестоящим массивом до заданной глубины.

const array = [1, 2, [3, 4]];
array.flat(); // [1, 2, 3, 4];

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

const crazyArray = [1, 2, [3, 4], [[5], [6, [7,8]]]];
crazyArray.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8];

Чем глубже вы погружаетесь в массив, тем больше вычислительного времени потребуется для его выравнивания. Обратите внимание, что IE и Edge не поддерживают эту функцию.

#методы

Рекурсивные функции

Внутри функции можно вызывать её саму — это пример рекурсивной функции.

Если разложить пример, то получится следующая цепочка:

- fac(3) это 3 * fac(2);
- fac(2) это 2 * fac(1);
- fac(1) это 1.

Получается, что fac(3) это 3 * 2 * 1, то есть 6. Такой подход часто применяется в математических операциях, но не ограничивается ими.

#функции

Фейковый API сервер

Делимся статьей, где автор рассказывает про создание гибридного фейкового API сервера с помощью json-server. Ты узнаешь, для чего он нужен и где используется. Также продемонстрированы достоинства и недостатки.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

reduce()

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

Например, мы можем использовать reduce() для суммирования всех чисел в массиве:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);
console.log(sum); // Output: 15

Функция обратного вызова выполняется для каждого элемента массива, и результат сохраняется в аккумуляторе. В конце итерации reduce() возвращает окончательное значение аккумулятора

#методы

Редко используемые API

Делимся статьей, где автор рассказывает про 4 API. Они редко используются, однако очень полезны. К ним относятся Beacon, Clipboard, Notifications и Perfomance. Присутствует ссылка на репозиторий с примерами.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Array.filter()

Метод filter() создает новый массив, в который включаются только те элементы исходного массива, которые удовлетворяют определенным условиям. Другими словами, этот метод позволяет фильтровать массив по определенным критериям.

Вот пример использования метода filter() для отбора всех четных чисел из массива:

let arr = [1, 2, 3, 4, 5, 6];
let evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

В этом примере мы создали массив arr, содержащий числа от 1 до 6, и затем применили метод filter() к этому массиву. В качестве аргумента методу передали функцию обратного вызова (также называемую функцией предиката), которая возвращает true для всех четных чисел и false для всех нечетных чисел. Как результат, метод filter() создал новый массив evenNumbers, содержащий только четные числа из исходного массива.

#методы

File System Access API

File System Access API обеспечивает возможности чтения, записи и управления файлами. Этот API позволяет взаимодействовать с файлами на локальном устройстве пользователя или в доступной пользователю сетевой файловой системе. Делимся статьей, где подробно разобран основной функционал API.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Ключевое слово this

Ключевое слово "this" в JavaScript является одной из наиболее мощных и полезных функций языка. Оно позволяет ссылаться на текущий объект внутри метода объекта и обеспечивает удобный способ доступа к его свойствам и методам.

Например, если у вас есть объект "person" с методом "getName", который возвращает имя объекта, вы можете вызвать этот метод, используя ключевое слово "this".

Кроме того, "this" также может использоваться в функциях, которые вызываются как методы объекта. Например, если у вас есть объект "person" с методом "greet", который приветствует человека по имени, вы можете вызвать этот метод, используя ключевое слово "this" для ссылки на текущий объект.

#полезно

Temporal API

Temporal предоставляет отдельные классы ECMAScript для дат, времени и других вариантов использования с заданной областью. Это делает код более читабельным и предотвращает ошибки, вызванные неправильным принятием 0, UTC или местного часового пояса. Данная статья поможет разобраться с Temporal API.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Object.entries()

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

Как видно из примера, метод Object.entries() преобразует объект person в массив массивов, где каждый вложенный массив содержит ключ и значение объекта. Это может быть полезно, например, для итерации по объекту или для выполнения каких-либо операций с ключами и значениями.

#методы

Анатомия ошибки

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

.reduce()

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

#массивы

Логические операторы

В данной статье автор подробно рассказывает про логические операторы «НЕ», «ИЛИ», «И» и нулевого слияния. Дополнительно рассматриваются побитовые операторы. Они используются для криптографии.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Нечеткое сравнение строк

Нечетко сравнение строк — это метод поиска строк, которые приблизительно (а не точно) соответствуют шаблону. Другими словами, нечеткое сопоставление строк — это тип поиска, при котором совпадения будут найдены, даже если пользователи ошибаются в написании слов или вводят только части слов для поиска. Делимся статьей, где рассмотрены самые популярные алгоритмы сравнения.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Array.from()

Функция Array.from() позволяет создавать новый массив из итерируемого или массиво-подобного объекта. Это может быть полезно, когда вы хотите выполнить некоторые операции на коллекции элементов, например, на коллекции элементов DOM или на строке.

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

#массивы

Web Audio API

Web Audio API предоставляет мощную и универсальную систему управления звуком. Она позволяет выбирать источники звука, добавлять эффекты к звуку, создавать визуализацию звука, применять пространственные эффекты (например, панорамирование) и многое другое. В данной статье рассказано, как был создан музыкальный инструмент с помощью API.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Стрелочные функции

Одна из полезных фишек JavaScript - это использование стрелочных функций (arrow functions). Они позволяют создавать функции более компактным и читаемым способом, чем традиционные функции.

Вот пример обычной функции:

function multiply(a, b) {
  return a * b;
}

И вот пример той же функции, записанной как стрелочная функция:

const multiply = (a, b) => a * b;

Кроме того, стрелочные функции автоматически привязывают this к текущему контексту, что упрощает работу с объектами и избавляет от необходимости использовать bind, call или apply.

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

#полезно

Создание пианино

В данной статьей автор демонстрирует создание пианино с помощью JavaScript. Обрати внимание, проект лучше всего работает в Chrome и других браузерах с тем же движком. Могут быть проблемы при работе с Safari.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Метод Array.prototype.includes()

Он позволяет проверить, содержится ли элемент в массиве, возвращая true или false.

Например, можно использовать его для проверки наличия определенного значения в массиве перед выполнением определенных действий. Этот метод был введен в стандарт ECMAScript 2016 и доступен во всех современных браузерах. Не забудьте попробовать его в своих проектах!

Метод includes() также поддерживает поиск по индексу, указанному вторым аргументом.

#методы

Работа с медиа

Делимся статьей, где представлены основные интерфейсы и методы по работе с медиа. Ты узнаешь, как захватить поток с устройства/экрана пользователя; научишься преобразовывать текст в речь и обратно; сможешь получить список медиаустройств пользователя и многое другое.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью