JavaScript заметки
8.55K subscribers
2.75K photos
4 videos
1.27K links
Регулярные заметки по практическому JavaScript. Обучащию посты позволят прокачать навыки во Frontend-разработке.

Можно почитать пока компилируется проект :)

Сотрудничество: @noname_media

Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl
Download Telegram
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, содержащий только четные числа из исходного массива.

#методы
👍4
File System Access API

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

#статья

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

👉 Читать статью
👍2
Ключевое слово this

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

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

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

#полезно
👍7
Temporal API

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

#статья

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

👉 Читать статью
3
Object.entries()

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

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

#методы
👍8
Анатомия ошибки

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

#статья

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

👉 Читать статью
.reduce()

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

#массивы
👍4
Логические операторы

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

#статья

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

👉 Читать статью
👍3
Нечеткое сравнение строк

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

#статья

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

👉 Читать статью
👍2
Array.from()

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

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

#массивы
👍4
Web Audio API

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

#статья

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

👉 Читать статью
👍4
Стрелочные функции

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

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

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

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

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

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

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

#полезно
🔥3👍2
Создание пианино

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

#статья

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

👉 Читать статью
2
Метод Array.prototype.includes()

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

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

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

#методы
🔥3👍1
Работа с медиа

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

#статья

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

👉 Читать статью
2
Деструктуризация

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

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

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

Деструктуризация - это полезная фича в JavaScript, которая делает работу с объектами и массивами более удобной.

#массивы
👍8
Селфи в браузере

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

#статья

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

👉 Читать статью
Стрелочные функции

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

Вместо обычного синтаксиса:

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

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

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

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

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

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

#полезно
👍31
tracking.js

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

#статья

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

👉 Читать статью
👍3
spread operator

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

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

#операторы