JavaScript заметки

Друзья! Присоединяйтесь к каналу FrontEndDev! ☝🏻Админы собирают для вас лучшие материалы о технологиях front end разработки, которые помогут вам стать настоящим профессионалом. 👨🏻‍💻 Статьи от лучших экспертов и практиков, а также полезные советы и рекомендации для оптимизации вашей работы!

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

const arr = [1, 2, 3];
const newArr = arr.map((item) => item + 1);
console.log(newArr); // [2, 3, 4]

Также метод map() позволяет применить функцию к каждому элементу объекта и вернуть новый объект на основе результатов этой функции. Например, чтобы создать новый объект, в котором каждое свойство увеличено на 1, можно использовать следующий код:

const obj = {a: 1, b: 2, c: 3};
const newObj = Object.fromEntries(
  Object.entries(obj).map(([key, value]) => [key, value + 1])
);
console.log(newObj); // {a: 2, b: 3, c: 4}

Использование метода map() позволяет упростить манипуляции с элементами массива и объекта и повысить читаемость кода. #методы

Apache Cordova Apache Cordova — это среда разработки мобильных приложений с открытым исходным кодом. Она позволяет использовать стандартные веб-технологии — HTML5, CSS3 и JavaScript для кроссплатформенной разработки. Делимся статьей, где автор демонстрирует создание мобильного приложения для Android с помощью Apache Cordova. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Никакие платные курсы больше не нужны — по этим 4 каналам можно освоить Frontend-разработку с нуля 👇 📌Senior Frontend — JS, HTML и CSS 📌Frontend Interview — как проходить собеседования 📌Web Craft — только Web-разработка 📌Frontender Libs — библиотеки для фронтендера

spread operator Он позволяет легко и быстро объединять и расширять массивы, объекты и другие коллекции данных. Оператор расширения также позволяет передавать неопределенное количество аргументов в функцию и извлекать свойства из объектов. Использование оператора расширения может существенно упростить и ускорить написание кода в JavaScript. #операторы

tracking.js Библиотека tracking.js привносит в среду браузера различные алгоритмы и методы компьютерного зрения. Используя современные спецификации HTML5, библиотека предоставляет возможность отслеживать цвета в реальном времени, распознавать лица и многое другое. Делимся статьей, где автор демонстрирует использование tracking.js. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

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

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

можно использовать следующий синтаксис с использованием стрелочной функции:

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

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

Селфи в браузере В данной статье автор рассказывает, как сделать селфи в браузере. Для захвата изображения используется MediaStream Image Capture. Для захвата потока - Media Capture and Streams. File API используется для работы с файлами. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

С 24 по 30 марта МТС проводит хакатон True Tech Hack. Что на кону: победители разделят призовой фонд 1 500 000 рублей.  Кто участвует: frontend-, backend- и мобильные разработчики, data science специалисты, UX/UI-дизайнеры и продакт-менеджеры.  Что делать: создать решения для просмотра фильмов на мультимедийной онлайн-платформе KION для людей с особыми потребностями. Условия: ты можешь участвовать со своей командой или тебе помогут ее найти.  Финальный питчинг и награждение: 31 марта офлайн на конференции True Tech Day. Создавай впечатления для тех, кто ощущает мир иначе, на хакатоне от МТС.  Успей зарегистрироваться до 22 марта по ссылке: https://cnrlink.com/truetechhack18

Деструктуризация Она позволяет извлекать данные из массивов и объектов более простым и удобным способом.

const user = { name: 'John', age: 30 };
const { name, age } = user;

В этом примере мы используем деструктуризацию, чтобы извлечь значения name и age из объекта user и сохранить их в переменных с теми же именами. Деструктуризация - это полезная фича в JavaScript, которая делает работу с объектами и массивами более удобной. #массивы

Работа с медиа Делимся статьей, где представлены основные интерфейсы и методы по работе с медиа. Ты узнаешь, как захватить поток с устройства/экрана пользователя; научишься преобразовывать текст в речь и обратно; сможешь получить список медиаустройств пользователя и многое другое. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Метод Array.prototype.includes() Он позволяет проверить, содержится ли элемент в массиве, возвращая true или false. Например, можно использовать его для проверки наличия определенного значения в массиве перед выполнением определенных действий. Этот метод был введен в стандарт ECMAScript 2016 и доступен во всех современных браузерах. Не забудьте попробовать его в своих проектах! Метод includes() также поддерживает поиск по индексу, указанному вторым аргументом. #методы

Создание пианино В данной статьей автор демонстрирует создание пианино с помощью JavaScript. Обрати внимание, проект лучше всего работает в Chrome и других браузерах с тем же движком. Могут быть проблемы при работе с Safari. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

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

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

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

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

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

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

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

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

Стартануть в IT быстро и эффективно — подготовительный курс по Frontend-разработке. 🗓 Начинаем уже сегодня - 9 марта! Даем: 72 урока с практикой в браузере, 3 онлайн вебинара и 1 сессию лайвкодинга с практикующим разработчиком. Получаем: крепкие знания базы языка, умение понимать код и первую программу на JavaScript, написанную вместе с наставником. 📌Успейте записаться прямо сейчас!

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

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