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

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

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

Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl
Download Telegram
Создание слайдбара

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

#статья

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

👉 Читать статью
👍2
Классы в языке JavaScript

С помощью ES6 мы можем создавать классы таким образом, и расширять их, используя ключевое слово extends

#полезно
👍5🔥31
Ленивая загрузка и производительность

Ленивая загрузка — это метод отсрочки загрузки ресурса до тех пор, пока он не понадобится. Это озволяет сохранить данные и уменьшить сетевую конкуренцию за критически важные ресурсы. В 2019 году метод стал веб-стандартом, и сегодня loading = «lazy» для изображений поддерживается большинством основных браузеров. В данной статье продемонстрировано, как ленивая загрузка влияет на производительность.

#статья

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

👉 Читать статью
👍31
Symbol( )

Вызов Symbol() или Symbol(описание) создаст уникальный символ, который не может быть просмотрен глобально.

#полезно
👍7🔥1
Массивы: Сравнение с языком С

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

#статья

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

👉 Читать статью
👍42🔥1
Symbol.for(key)

Symbol.for(key) создает символ, который по-прежнему неизменен и уникален, но может быть просмотрен глобально. Два идентичных вызова Symbol.for(key) возвращают один и тот же символ.

Примечательным примером использования Symbol для взаимодействия является Symbol.iterator, который существует во всех повторяющихся типах в ES6: массивы, строки, генераторы и т. д.

#полезно
👍51
Сортировка пузырьком

Сортировка пузырьком — это простейший алгоритм сортировки. Он многократно меняет местами соседние элементы, если они расположены в неправильном порядке. Этот алгоритм не подходит для больших наборов данных, так как его сложность по времени довольно высока. В данной статье автор демонстрирует работу алгоритма.

#статья

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

👉 Читать статью
👍9🔥1
Оператор delete

Оператор delete используется для удаления свойства объекта. Если он используется для удаления уже существующего свойства объекта, он возвращает значение true и удаляет свойство из объекта. Однако удаление несуществующего свойства объекта не повлияет на объект, но все равно вернется значение true. В данной статье автор рассказывает про особенности оператора delete.

#статья

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

👉 Читать статью
👍1🔥1
WeakMaps

Самое интересное в использовании WeakMaps для хранения наших личных данных заключается в том, что их ключи не выдают имена свойств, которые можно увидеть с помощью Reflect.ownKeys()

Практичным примером использования WeakMaps является хранение данных, связанных с элементом DOM

#полезно
👍4🔥1
Maps в языке JavaScript

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

Примечание. Использование функций или объектов не будет работать при проверке равенства с использованием таких методов, как map.get(). Таким образом, придерживайтесь примитивных значений, таких как строки, булевы и числа.

#полезно
👍7🔥42
Рекурсия

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

#статья

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

👉 Читать статью
👍53🔥2
Проверить вхождение определённого значения в массив

const numbers = [1, 2 ,3, 10, 50];
// old way
console.log(numbers.indexOf(3) > -1); // true, т.к. проверяется, есть ли в массиве 3
// new way
console.log(numbers.includes(3)); // true

Метод includes также полезен, если требуется сравнить несколько значений сразу.

#методы
👍41
Скачивание видео из VK

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

#статья

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

👉 Читать статью
👍4🔥1
Полезные плагины и библиотеки

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

#статья

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

👉 Читать статью
👍7🔥1
Отобразить число с точностью до двух знаков после запятой

const number = 100.32222;
console.log(number.toFixed(2)); // 100.32

#полезно
👍15
Логические и побитовые операторы в JavaScript

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

#статья

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

👉 Читать статью
👍3
Использование оператора опциональной последовательности (optional chaining operator)

Раньше, чтобы получить доступ ко вложенному свойству, нужно было проверять, существует ли каждое из свойств. Прямое обращение к user.location.street.name могло выбросить исключение, что мы пытаемся обратиться к name через несуществующие ссылки к методам location или street.

Но теперь, в версии ES11, код после оператора опциональной последовательности выполнится, только если обращение по предыдущей ссылке не привело к undefined или null.

Так что использование этого оператора сократит ваш код и сделает его более понятным.

#операторы
👍91
Забудьте о конкатенации, используйте шаблонные строки (литералы)

Конкатенация строк с помощью оператора "+" – это старая школа. Более того, конкатенация строк с участием большого количества переменных (или выражений) повышает риск возникновения путаницы и ошибок.

Шаблонные строки (или литералы) позволяют встраивать выражения прямо в текст. Они обладают уникальным синтаксисом, при котором строка заключается в обратные кавычки (``). Шаблонная строка может содержать места для подстановки динамических значений. Такие места отмечаются знаком доллара и фигурными скобками. Например, ${выражение}.

#полезно
9
Создание музыкального инструмента с помощью Web Audio API

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

#статья

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

👉 Читать статью
👍62
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 не поддерживают эту функцию.

#методы
🔥6👍3