JavaScript заметки

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

‼️🅱️🅱️🅱️🅱️🅱️🅱️‼️ ✅️News ИИ - это новостной канал об Искуственном интелекте, каждый день мы рассказываем: — О новых сервисах в Сфере ИИ — О последних достижениях в сфере ИИ — Рассказываем как смелые энтузиасты зарабатывают при помощи ИИ — Публикуем самые крутые и уникальные картинки от нашумевшей ИИ Midjourney — Рассказываем лайфхаки как бесплатно пользоваться популярными сервисами такими как ChatGPT и Midjourney ✅️News ИИ - обязательно подпишись

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, содержащий только четные числа из исходного массива. #методы

Редко используемые API Делимся статьей, где автор рассказывает про 4 API. Они редко используются, однако очень полезны. К ним относятся Beacon, Clipboard, Notifications и Perfomance. Присутствует ссылка на репозиторий с примерами. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

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 сервер Делимся статьей, где автор рассказывает про создание гибридного фейкового API сервера с помощью json-server. Ты узнаешь, для чего он нужен и где используется. Также продемонстрированы достоинства и недостатки. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Рекурсивные функции Внутри функции можно вызывать её саму — это пример рекурсивной функции. Если разложить пример, то получится следующая цепочка: - fac(3) это 3 * fac(2); - fac(2) это 2 * fac(1); - fac(1) это 1. Получается, что fac(3) это 3 * 2 * 1, то есть 6. Такой подход часто применяется в математических операциях, но не ограничивается ими. #функции

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 не поддерживают эту функцию. #методы

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

Значение как число Вы когда-нибудь обращали внимание, что "event.target.value" всегда возвращает строковое значение, даже если для поля ввода "input" задан тип "number"? Чтобы сразу получать числовое значение, используйте "event.target.valueAsNumber". #полезно

Как в Google Chrome измерить использование памяти веб-страницей Благодаря этой статье ты узнаешь, как измерять утечки памяти страницы Google Chrome помощью performance.measureMemory. API performance.measureUserAgentSpecificMemory() позволяет разработчикам измерять использование памяти веб-страницами. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Забудьте о конкатенации, используйте шаблонные строки (литералы) Конкатенация строк с помощью оператора "+" – это старая школа. Более того, конкатенация строк с участием большого количества переменных (или выражений) повышает риск возникновения путаницы и ошибок. Шаблонные строки (или литералы) позволяют встраивать выражения прямо в текст. Они обладают уникальным синтаксисом, при котором строка заключается в обратные кавычки (``). Шаблонная строка может содержать места для подстановки динамических значений. Такие места отмечаются знаком доллара и фигурными скобками. Например, ${выражение}. #полезно

Frontend-разработчики, Сбер приглашает вас познакомиться и пройти все этапы отбора в команду на One Day Offer, который состоится 5 марта ⚡️ Если вы уже больше двух лет занимаетесь коммерческой разработкой, знаете React и получили профильное образование — не упустите возможность стать частью команды и получить оффер всего за один день. 👉 Чем вы будете заниматься, если успешно пройдете техническое интервью? Поддерживать и развивать официальный сайт СберБанка — онлайн-витрину сервисов и продуктов банка, а также его экосистемы. Команда фронтенда в Сбере состоит из 100+ крутых специалистов топ-компаний мира и использует в своей работе автоматизированную инфраструктуру разработки в облаках и только самый современный стек: React, TypeScript, NodeJS, Webpack, PostCSS и др. Если вы хотите стать частью команды — переходите по ссылке, регистрируйтесь на One Day Offer и готовьтесь к собеседованию 😉

Использование оператора опциональной последовательности (optional chaining operator) Раньше, чтобы получить доступ ко вложенному свойству, нужно было проверять, существует ли каждое из свойств. Прямое обращение к user.location.street.name могло выбросить исключение, что мы пытаемся обратиться к name через несуществующие ссылки к методам location или street. Но теперь, в версии ES11, код после оператора опциональной последовательности выполнится, только если обращение по предыдущей ссылке не привело к undefined или null. Так что использование этого оператора сократит ваш код и сделает его более понятным. #операторы

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

Проверить вхождение определённого значения в массив

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 также полезен, если требуется сравнить несколько значений сразу. #методы

Основные приемы работы с Canvas Делимся статьей, где автор демонстрирует основные приемы работы с Canvas. Ты узнаешь, как рисовать различные фигуры. Также сможешь реализовать алгоритм fibonacci flower, также известный как golden ratio или phyllotaxis. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Отобразить число с точностью до двух знаков после запятой const number = 100.32222; console.log(number.toFixed(2)); // 100.32 #полезно

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

Преобразовать строку в массив const name = "Mike johnson"; console.log(name.split("")); // ["M", "i", "k", "e", " ", "j", "o", "h", "n", "s", "o", "n"] const chars = "a,b,c,d,e,f"; console.log(chars.split(",")); // ["a", "b", "c", "d", "e", "f"] #строки #массивы