JavaScript заметки

Геометрия объектной модели документа Бесконечная прокрутка, анимация элементов при прокрутке или перетаскивание являются интересными интерфейсными решениями, которые существуют уже некоторое время. В данной статье автор анализирует методы и свойства, которые делают эти интерфейсы достижимыми. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Длина кэш-массива в циклах Когда вы изучаете for для циклов, то следуете стандартной процедуре:

for (let i = 0; i < array.length; i++){
  console.log(i);
}

Тем не менее, при таком синтаксисе цикл for повторно проверяет длину массива при каждой итерации. Иногда это может быть полезно, но в большинстве случаев эффективнее кэшировать длину массива, что потребует одного обращения к нему. Мы можем сделать это путем определения переменной длины, где задать переменную i, например, так:

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

В принципе, почти то же самое, что и выше, но при увеличении размера цикла мы получим значительную экономию времени. #циклы

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

Фильтр уникальных значений Тип Set был введен в ES6, и наряду с оператором «spread» ... мы можем использовать его для создания нового массива с уникальными значениями. Этот трюк работает для массивов, содержащих примитивные типы: undefined, null, boolean, string и number. (Если бы у вас был массив, содержащий объекты, функции или дополнительные массивы, вам понадобился бы другой подход!) #массив

AbortController Интерфейс AbortController представляет собой объект контроллера, который позволяет прерывать один или несколько веб-запросов по мере необходимости. Связь с запросом DOM осуществляется с помощью объекта AbortSignal. Данная статья знакомит с возможностями AbortController. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Переменные let и const У них блочная область видимости: такие переменные существуют только в пределах участка кода, ограниченного фигурными скобками. Такой подход позволяет избежать конфликта переменных, делая код более предсказуемым. let используется для переменных, которые нужно переназначить после создания. Переменные, объявленные с помощью const, невозможно переназначить или изменить. #переменные

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

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

Получение фрагментов url-адреса Объект "window.location" имеет набор полезных методов и свойств. С помощью них мы можем получить данные про протокол, хост, порт, домен и тому подобное из url-адреса браузера. Одно из свойств, которое мне кажется очень полезным

window.location.search

Свойство "search" возвращает фрагмент строки url-адреса, находящийся после вопросительного знака: "?project=js". Для получения параметров запроса, помимо "location.search" можно использовать ещё один полезный API, называемый "URLSearchParams".

let project = new URLSearchParams(location.search).get('project');

В результате получаем "js" #url

Подделка API Тесты и программные компоненты, которые ты хочешь протестировать, в большинстве случаев имеют зависимости. Типичной зависимостью может быть, например, внешний источник данных. Было бы непрактично вызывать настоящий API в тестовой среде или в процессе разработки. В данной статье автор демонстрирует 4 способа подделки API. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

"undefined" против "null" "undefined" – присутствует у переменной, которая была объявлена, но значение для неё задано не было "null" – обозначает пустое или несуществующее значение, которое явно присваивается переменной "undefined" и "null" не равны при строгом сравнивании: Дополнительно почитать на тему разницы между этими двумя значениями можно здесь #массив

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

isArray Ещё один полезный метод, на этот раз позволяющий определить, являются ли входящие данные массивом #массивы

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

Вам нравится читать контент на этом канале? Возможно, вы задумывались о том, чтобы купить на нем интеграцию? Следуйте 3 простым шагам, чтобы сделать это: 1) Регистрируйтесь по ссылке: https://telega.in/c/notesjs 2) Пополняйтесь удобным способом 3) Размещайте публикацию Если тематика вашего поста подойдет нашему каналу, мы с удовольствием опубликуем его.

Обмен значений переменных С помощью техники деструктуризации, это сделать очень просто. #полезно

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

Объединение нескольких объектов У вас может возникнуть потребность объединить вместе два объекта, чтобы создать третий, более полный. В этом случае можно использовать оператор "..." (да, три точки).

let emp = {
 'id': 'E_01',
 'name': 'Jack',
 'age': 32,
 'addr': 'India'
};

let job = {
 'title': 'Software Dev',
  'location': 'Paris'
};

Их можно объединить с помощью spread-оператора (оператора расширения): // spread-оператор let merged = {...emp, ...job}; console.log('Spread merged', merged); Существует и другой путь такого объединения. С помощью "Object.assign()"

console.log('Object assign', Object.assign({}, emp, job));

Обратите внимание, что и spread-оператор и "Object.assign" выполняют поверхностное (shallow) объединение. При поверхностном объединении, если свойства повторяются, то происходит перезапись первого объекта данными из таких же свойств второго. Для глубокого объединения объектов, следует использовать, например, библиотеку lodash #объект

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

Оператор "Запятая" В JavaScript оператор запятой используется для оценки каждого из операндов слева направо и возврата значения последнего операнда.

let count = 1;
let ret = (count++, count);
console.log(ret);

В примере выше значением переменной "ret" будет число 2. По тому же принципу, результатом следующего кода будет вывод в консоль числа 32.

let val = (12, 32);
console.log(val);

Где мы его используем? Есть идеи? Чаще всего оператор запятой используется параметров в цикле "for". В примере ниже оператор запятой задаёт значение переменной "j" после объявления счётчика "i".

for (var i = 0, j = 50; i <= 50; i++, j--)

#оператор