JavaScript заметки

Как создать пустой объект Если в Object.create использовать null в качестве единственного аргумента, то создастся совершенно чистый объект. Object.create является отличной утилитой для создания прототипов. Объекты, созданные с помощью Object.create, имеют proto и наследуют свойства объекта, которыми можно манипулировать. Что если мы хотим создать объект который не был подвержен манипуляциям извне? Мы можем сделать это с Object.create(null): Можно создать объект, который кажется пустым с помощью {}, но этот объект всё ещё имеет proto, hasOwnProperty и другие методы объекта. Однако, есть способ создать чистый объект:

const dict = Object.create(null);

console.log(dict.proto === undefined); // true
console.log(dict); // {} No properties

// Свойства объекта не существуют, пока мы не добавим их

На этом объекте нет абсолютно никаких ключей или методов, которые мы туда не поместим. Поскольку прототипа не существует, объектом нельзя манипулировать извне. #полезно

Хочешь создавать уникальные современные сайты, но разработка занимает много времени? https://t.me/sen10r — канал для Frontend программистов, с огромным количеством готовых решений, для твоих проектов, которые ускорят твою работу! https://t.me/FigmaTemp1ate — канал, где собраны уникальные примеры реальных макетов в Figma, которые заказчики присылают на вёрстку. https://t.me/mavenjs — опытные разработчики создали канал, чтобы ваш код выглядел достойно и опрятно.

Массив и Boolean Иногда нам нужно отфильтровать массив не по его первоначальному значению, а по новому значению, поэтому мы используем map: myArray.map(item => { // Делаем обработку ... // Если нам всё равно на item, мы возвращаем false или null, или undefined return false; }); #функции

Оператор с запятой Вновь простой вопрос, что будет выведено в консоль?

console.log((2,5 - 2) * 2);

Совершенно верно, 6. Но почему? Всё дело в том, что тут написано не число два с половиной, а число два, запятая, число 5. Что делает запятая? Она выполняет слева направо каждый из операндов и возвращает значение последнего, в данном примере число 5. #операторы

Быстрая очистка массива с сохранением ссылки Какой самый быстрый способ очистить массив мы знаем? Разумеется — это присвоить массиву значение пустого массива [], но тогда ссылка на этот массив изменится, а что если нам нужно её сохранить?

const array = [/Какие-то данные/];
array.length = 0; //[]

Всё, массив очищен, а ссылка сохранена. P.S. Аналогичным способом можно заполнять массивы пустыми данными: const array = [1, 2]; array.length = 4; //[1, 2, , ] #функции

Разделитель разрядов Я задам лишь один вопрос: «Что будет выведено в консоль?»:

console.log(1_000 + 1_500);

Думаете, что произойдет конкатенация и в консоль выведется «1_0001_500»? Или же выведет ошибку? На самом деле ответом будет являться число 2500, но почему? Всё просто, символ "_" является разделителем для улучшения читабельности. Согласитесь, гораздо быстрее понять, что написано «один миллион», когда он выглядит так: 1_000_000, а не так: 1000000 #полезно

Получение случайного элемента из массива Эта однострочная строка возвращает вам случайный элемент из входного массива, который вы передаете в качестве аргумента функции.

const randomArrayItem = (arr) => arr[Math.floor(Math.random() * arr.length)];

randomArrayItem(['lol', 'a', 2, 'foo', 52, 'Jhon', 'hello', 57]);
// Result: It will be some random item from array

#функции

Проверка валидности даты Проверьте правильность ввода даты пользователем.

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());

isDateValid("December 17, 1995 03:24:00");
// Result: true

#функции

Сколько нужно времени, чтобы освоить востребованную профессию фронтенд-разработчика?  Всего 10 месяцев! Вы можете совмещать обучение с любым своим занятием. Главное условие - желание. В Xeкслете вы можете пройти онлайн-курс по профессии «‎Фронтенд-разработчик».  Во время программы вы: ✔️ Изучите JavaScript в связке с HTML и CSS. ✔️ Освоите React для создания сложных компонентов, которые легко поддерживать и использовать повторно. ✔️ Решите более 310 задач в браузере. ✔️ Создадите 4 проекта для портфолио на GitHubВыполните 150 тестовых заданий от наших партнёров. ✔️ Научитесь работать с чужим кодом и оформлять пул-реквесты в Open Source проектах. Обучение построено так, что его невозможно «отсидеть» или «прослушать». Мы не сторонники подхода «повтори за учителем»: вы будете не просто писать код, а научитесь самостоятельно находить лучшие решения. 📌 Пройдите первые 10 бесплатных уроков из профессии и получите дополнительно скидку 10% !

Удаление дублей в массиве Set в JavaScript хранят только уникальные элементы. Мы можем использовать это поведение для удаления повторяющихся элементов из массива. Однако оно работает только с массивами, хранящими примитивные данные. Таким образом, вам придется написать многострочное решение для удаления дубликатов в массивах, хранящих объекты. Но, тем не менее, это вполне приличный метод удаления дублей в простых сценариях.

const removeDuplicates = (arr) => [...new Set(arr)];

removeDuplicates([31, 56, 12, 31, 45, 12, 31]);
//[ 31, 56, 12, 45 ]

#функции

Получение случайного логического значения (true / false) Эта функция вернет логическое значение (true или false) с помощью метода Math.random(). Он создаст случайное число от 0 до 1, после чего мы проверяем, больше оно или меньше 0,5. Это означает, что шанс получить либо истину, либо ложь составляет 50/50.

const randomBoolean = () => Math.random() >= 0.5;

console.log(randomBoolean());
// Result: a 50/50 change on returning true of false

#функции

Очищение всех cookie браузера Еще одна однострочная функция, которую можно использовать для очистки всех файлов cookie, хранящихся на веб-странице, с помощью document.cookie и их очистки.

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, =;expires=${new Date(0).toUTCString()};path=/));

#функции

Получение значений cookie браузера Полезная короткая функция JavaScript, предназначенная для получения значений cookie браузера. const cookie = name => ; ${document.cookie}.split(; ${name}=).pop().split(';').shift(); cookie('_ga'); // Result: "GA1.2.1929736587.1601974046" #функции

Нахождение дня в году Еще одна очень полезная функция JavaScript, относящаяся к Датам/Календарю. Она в основном предоставляет вам количество дней в году. Например, 6 февраля получается 37 день из 365 дней в году.

const dayOfYear = (date) =>
  Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

dayOfYear(new Date());
// Result: 272

#функции

Проверка, поддерживает ли текущий пользователь сенсорные события

const touchSupported = () => {
  ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);
}

console.log(touchSupported());
// Result: will return true if touch events are supported, false if not

#функции

Получение среднего значения массива чисел Редуктор JavaScript позволяет вычислять среднее значение массивов в одной строке. Метод Reduce очень полезен при написании однострочных решений для ряда проблем, таких как нахождение суммы или максимума в массиве чисел.

const average = arr => arr.reduce((a, b) => a + b) / arr.length;

average([21, 56, 23, 122, 67])
//57.8

#функции

Готовишься к собеседованию на frontend разработчика? Канал, где мы регулярно публикуем тесты и задания для практики - @interview_masters. Также у нас есть удобное приложение в котором можно отточить свои навыки. Присоединяйся к нам уже сейчас - @interview_masters!

Получение параметров запроса из URL-адреса Очень полезная функция, когда вы имеете дело с параметрами запроса в URL-адресе. Вы можете легко получить параметры запроса из него, передав URL-адрес в качестве аргумента функции.

const getParameters = (URL) => JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '\"').replace(/&/g, '","').replace(/=/g, '":"') +'"}');

getParameters("https://www.google.de/search?q=cars&start=40");
// Result: { q: 'cars', start: '40' }

#функции