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

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

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

Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl
Download Telegram
Шифр Вернама

Шифр Вернама — это метод шифрования буквенного текста. Это один из методов замены для преобразования обычного текста в зашифрованный текст. В этом механизме мы присваиваем номер каждому символу обычного текста. Делимся статьей, где автор демонстрирует реализацию шифра Вернама.

#статья

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

👉 Читать статью
👍2
Быстро преобразовать строку в число

const number = "20";
const converted = +number;
console.log(converted); // 20

#полезно
🔥11👍4
Алгоритмы поиска

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

#статья

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

👉 Читать статью
1
Преобразовать строку в массив

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"]

#строки #массивы
👍3
Способы применения reduce

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

#статья

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

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

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

#полезно
👍9
Основные приемы работы с Canvas

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

#статья

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

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

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

#методы
👍2
Двоичное дерево

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

#статья

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

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

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

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

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

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

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

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

#полезно
👍5
Как в Google Chrome измерить использование памяти веб-страницей

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

#статья

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

👉 Читать статью
👍3
Значение как число

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

Чтобы сразу получать числовое значение, используйте "event.target.valueAsNumber".

#полезно
👍9🔥2
Полезные плагины и библиотеки

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

#статья

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

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

#методы
👍5
Рекурсивные функции

Внутри функции можно вызывать её саму — это пример рекурсивной функции.

Если разложить пример, то получится следующая цепочка:

- fac(3) это 3 * fac(2);
- fac(2) это 2 * fac(1);
- fac(1) это 1.

Получается, что fac(3) это 3 * 2 * 1, то есть 6. Такой подход часто применяется в математических операциях, но не ограничивается ими.

#функции
👍2
Фейковый API сервер

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

#статья

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

👉 Читать статью
4👍2
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() возвращает окончательное значение аккумулятора

#методы
👍5
Редко используемые API

Делимся статьей, где автор рассказывает про 4 API. Они редко используются, однако очень полезны. К ним относятся Beacon, Clipboard, Notifications и Perfomance. Присутствует ссылка на репозиторий с примерами.

#статья

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

👉 Читать статью
🔥1
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