Нахождение дня в году

Еще одна очень полезная функция 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

#функции

Получение значений cookie браузера

Полезная короткая функция JavaScript, предназначенная для получения значений cookie браузера.

const cookie = name => ; ${document.cookie}.split(; ${name}=).pop().split(';').shift();

cookie('_ga');
// Result: "GA1.2.1929736587.1601974046"

#функции

Очищение всех cookie браузера

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

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

#функции

Получение случайного логического значения (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

#функции

Удаление дублей в массиве

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

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

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

#функции

Проверка валидности даты

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

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

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

#функции

Получение случайного элемента из массива

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

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

#функции

Разделитель разрядов

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

console.log(1_000 + 1_500);

Думаете, что произойдет конкатенация и в консоль выведется «1_0001_500»? Или же выведет ошибку? На самом деле ответом будет являться число 2500, но почему?

Всё просто, символ "_" является разделителем для улучшения читабельности. Согласитесь, гораздо быстрее понять, что написано «один миллион», когда он выглядит так: 1_000_000, а не так: 1000000

#полезно

Быстрая очистка массива с сохранением ссылки

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

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

Всё, массив очищен, а ссылка сохранена.

P.S. Аналогичным способом можно заполнять массивы пустыми данными:

const array = [1, 2];
array.length = 4; //[1, 2, , ]

#функции

Оператор с запятой

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

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

Совершенно верно, 6. Но почему?

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

#операторы

Массив и Boolean

Иногда нам нужно отфильтровать массив не по его первоначальному значению, а по новому значению, поэтому мы используем map:

myArray.map(item => {
// Делаем обработку ...

// Если нам всё равно на item, мы возвращаем false или null, или undefined
return false;
});

#функции

Как создать пустой объект

Если в 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

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

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

#полезно

Объединение объектов

Необходимость объединения нескольких объектов в JavaScript существовала всегда, особенно когда мы начали создавать классы и виджеты с параметрами:

const person = { name: "Alex", gender: "Male" };
const tools = { computer: "Mac", editor: "VSCode" };
const attributes = { handsomeness: "Extreme", hair: "Brown", eyes: "Green" };

const summary = { ...person, ...tools, ...attributes };

console.log(summary);
// { computer: "Mac", editor: "VSCode", eyes: "Green", gender: "Male", hair: "Brown", handsomeness: "Extreme", name: "Alex" }

Таким образом создается новый объект, содержащий все свойства и значения объектов, предоставленных оператором spread. Мы можем предоставить любое количество объектов для слияния.

Также мы можем использовать Object.assign для выполнения того же, но оператор распространения spread делает это немного короче.

#полезно

Параметры функций

Возможность устанавливать значения по умолчанию для аргументов функции была отличным дополнением к JavaScript; но мы также можем “кидать” ошибки, когда данный параметр не передан функции:

const isRequired = () => {
throw new Error("param is required");
};

const hello = (name = isRequired()) => {
console.log(hello ${name});
};

// этот вызов выдаст ошибку, потому что имя не указано
hello();

// этот вызов также выдаст ошибку
hello(undefined);

// эти вызовы сработают
hello(null); // hello null
hello("Alexey"); // hello Alexey

#функции

Адаптивная вёрстка: что это и как использовать

В этой статье будут рассмотрены основные элементы сайта и способы их адаптации.

#статья

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

👉 Читать статью

Деструктуризация псевдонимов

Деструктуризация - это очень приятное дополнение к JavaScript, потому что иногда мы предпочитаем ссылаться на свойства под другим именем, поэтому мы можем использовать псевдонимы:

const person = { fullName: "Alexey" };

// Берём person.fullName как { fullName }
const { fullName } = person;
console.log(fullName); // Alexey

// Берём person.fullName как { name }
const { fullName: name } = person;
console.log(name); // Alexey

#полезно

null - это объект

null является объектом. Сомневаетесь? Ведь данное утверждение противоречит самой сути null. Вот доказательства:

alert(typeof null); //Выдаст сообщение 'object'

Несмотря на очевидный факт, null не является реализацией никакого базового объекта. (Значения в JavaScript являются реализациями базового объекта. Так, каждое число является реализацией объекта Number, каждый объект является реализацией объекта Object.) Такое положение возвращает нас обратно к практическому смыслу, потому что если null является отсутствием значения, то он не может быть реализацией какого-либо объекта. Следовательно следующее выражение возвращает false:

alert(null instanceof Object); //Выдаст сообщение 'false'

#полезно

NaN - это число

Считаете факт представления null объектом странным? Попробуйте проверить NaN! Он оказывается числом! Кроме того, NaN не равен самому себе!

alert(typeof NaN); //Выдаст сообщение 'Number'
alert(NaN === NaN); //Выдаст сообщение 'false'

В действительности NaN не равен ничему. Единственный способ проверить значение NaN - функция isNaN().

#полезно

10 игр для изучения JavaScript

В этой статье вы найдете десятку интересных игр для изучения JavaScript. Попробуйте их, ведь учиться, играя, куда легче!

#статья

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

👉 Читать статью

replace() может получать возвратную функцию

Это один из самых скрытых секретов JavaScript (который появился начиная с версии 1.3). Обычно вызов функции replace() выглядит примерно так:

alert('10 13 21 48 52'.replace(/d+/g, '')); //заменяем все числа на *

Простая замена. Но что если нужно более сложно контролировать когда и как будет производиться замена? Например, нужно заменять числа только до 30. Такая задача не может быть решена только регулярным выражением (оно может сделать все, что угодно со строкой, но не с математикой выражения). Нужно использовать возвратную функцию для вычисления соответствия.

alert('10 13 21 48 52'.replace(/d+/g, function(match) {
    return parseInt(match) < 30 ? '' : match;
}));

Для каждой проверки JavaScript вызывает функцию, передавая ей аргументы для проверки. А затем мы возвращаем либо звездочку, либо само число.

#функции