Получение среднего значения массива чисел
Редуктор JavaScript позволяет вычислять среднее значение массивов в одной строке. Метод Reduce очень полезен при написании однострочных решений для ряда проблем, таких как нахождение суммы или максимума в массиве чисел.
Редуктор JavaScript позволяет вычислять среднее значение массивов в одной строке. Метод Reduce очень полезен при написании однострочных решений для ряда проблем, таких как нахождение суммы или максимума в массиве чисел.
const average = arr => arr.reduce((a, b) => a + b) / arr.length;#функции
average([21, 56, 23, 122, 67])
//57.8
👍9🔥2❤1
Проверка, поддерживает ли текущий пользователь сенсорные события
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
#функции👍4🔥2❤1
Нахождение дня в году
Еще одна очень полезная функция JavaScript, относящаяся к Датам/Календарю. Она в основном предоставляет вам количество дней в году. Например, 6 февраля получается 37 день из 365 дней в году.
Еще одна очень полезная функция 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
👍2
Получение значений cookie браузера
Полезная короткая функция JavaScript, предназначенная для получения значений cookie браузера.
Полезная короткая функция JavaScript, предназначенная для получения значений cookie браузера.
const cookie = name => ; ${document.cookie}.split(; ${name}=).pop().split(';').shift();
cookie('_ga');
// Result: "GA1.2.1929736587.1601974046"
#функции👍2
Хочешь видеть на канале другие рубрики? Статьи, тесты, кодпены и т.д.
Anonymous Poll
77%
Да
17%
Нет
7%
Не важно
❤1👍1🔥1
Очищение всех cookie браузера
Еще одна однострочная функция, которую можно использовать для очистки всех файлов cookie, хранящихся на веб-странице, с помощью document.cookie и их очистки.
Еще одна однострочная функция, которую можно использовать для очистки всех файлов cookie, хранящихся на веб-странице, с помощью document.cookie и их очистки.
const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, =;expires=${new Date(0).toUTCString()};path=/));
#функции👍2
Получение случайного логического значения (true / false)
Эта функция вернет логическое значение (true или false) с помощью метода Math.random(). Он создаст случайное число от 0 до 1, после чего мы проверяем, больше оно или меньше 0,5. Это означает, что шанс получить либо истину, либо ложь составляет 50/50.
Эта функция вернет логическое значение (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
👍3
Удаление дублей в массиве
Set в JavaScript хранят только уникальные элементы. Мы можем использовать это поведение для удаления повторяющихся элементов из массива. Однако оно работает только с массивами, хранящими примитивные данные. Таким образом, вам придется написать многострочное решение для удаления дубликатов в массивах, хранящих объекты. Но, тем не менее, это вполне приличный метод удаления дублей в простых сценариях.
Set в JavaScript хранят только уникальные элементы. Мы можем использовать это поведение для удаления повторяющихся элементов из массива. Однако оно работает только с массивами, хранящими примитивные данные. Таким образом, вам придется написать многострочное решение для удаления дубликатов в массивах, хранящих объекты. Но, тем не менее, это вполне приличный метод удаления дублей в простых сценариях.
const removeDuplicates = (arr) => [...new Set(arr)];#функции
removeDuplicates([31, 56, 12, 31, 45, 12, 31]);
//[ 31, 56, 12, 45 ]
👍5
Проверка валидности даты
Проверьте правильность ввода даты пользователем.
Проверьте правильность ввода даты пользователем.
const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());#функции
isDateValid("December 17, 1995 03:24:00");
// Result: true
🔥3
Получение случайного элемента из массива
Эта однострочная строка возвращает вам случайный элемент из входного массива, который вы передаете в качестве аргумента функции.
Эта однострочная строка возвращает вам случайный элемент из входного массива, который вы передаете в качестве аргумента функции.
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
👍4❤1
Разделитель разрядов
Я задам лишь один вопрос: «Что будет выведено в консоль?»:
Всё просто, символ "
Я задам лишь один вопрос: «Что будет выведено в консоль?»:
console.log(1_000 + 1_500);Думаете, что произойдет конкатенация и в консоль выведется «1_0001_500»? Или же выведет ошибку? На самом деле ответом будет являться число
2500, но почему?Всё просто, символ "
_" является разделителем для улучшения читабельности. Согласитесь, гораздо быстрее понять, что написано «один миллион», когда он выглядит так: 1_000_000, а не так: 1000000
#полезно👍21
Быстрая очистка массива с сохранением ссылки
Какой самый быстрый способ очистить массив мы знаем? Разумеется — это присвоить массиву значение пустого массива
P.S. Аналогичным способом можно заполнять массивы пустыми данными:
Какой самый быстрый способ очистить массив мы знаем? Разумеется — это присвоить массиву значение пустого массива
[], но тогда ссылка на этот массив изменится, а что если нам нужно её сохранить?const array = [/Какие-то данные/];Всё, массив очищен, а ссылка сохранена.
array.length = 0; //[]
P.S. Аналогичным способом можно заполнять массивы пустыми данными:
const array = [1, 2];
array.length = 4; //[1, 2, , ]
#функции👍10
Оператор с запятой
Вновь простой вопрос, что будет выведено в консоль?
Всё дело в том, что тут написано не число два с половиной, а число два, запятая, число 5. Что делает запятая? Она выполняет слева направо каждый из операндов и возвращает значение последнего, в данном примере число 5.
#операторы
Вновь простой вопрос, что будет выведено в консоль?
console.log((2,5 - 2) * 2);Совершенно верно, 6. Но почему?
Всё дело в том, что тут написано не число два с половиной, а число два, запятая, число 5. Что делает запятая? Она выполняет слева направо каждый из операндов и возвращает значение последнего, в данном примере число 5.
#операторы
👍10
Массив и Boolean
Иногда нам нужно отфильтровать массив не по его первоначальному значению, а по новому значению, поэтому мы используем map:
Иногда нам нужно отфильтровать массив не по его первоначальному значению, а по новому значению, поэтому мы используем map:
myArray.map(item => {
// Делаем обработку ...
// Если нам всё равно на item, мы возвращаем false или null, или undefined
return false;
});
#функцииКак создать пустой объект
Если в Object.create использовать
Можно создать объект, который кажется пустым с помощью
#полезно
Если в 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
// Свойства объекта не существуют, пока мы не добавим их
#полезно
👍6
Объединение объектов
Необходимость объединения нескольких объектов в JavaScript существовала всегда, особенно когда мы начали создавать классы и виджеты с параметрами:
Также мы можем использовать
#полезно
Необходимость объединения нескольких объектов в 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 делает это немного короче.#полезно
👍4
Параметры функций
Возможность устанавливать значения по умолчанию для аргументов функции была отличным дополнением к JavaScript; но мы также можем “кидать” ошибки, когда данный параметр не передан функции:
Возможность устанавливать значения по умолчанию для аргументов функции была отличным дополнением к 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
#функции👍5❤1🔥1
Адаптивная вёрстка: что это и как использовать
В этой статье будут рассмотрены основные элементы сайта и способы их адаптации.
#статья
❤️ Прожимай реакции, если нравится такой формат
👉 Читать статью
В этой статье будут рассмотрены основные элементы сайта и способы их адаптации.
#статья
❤️ Прожимай реакции, если нравится такой формат
👉 Читать статью
❤7👍1🔥1
Деструктуризация псевдонимов
Деструктуризация - это очень приятное дополнение к JavaScript, потому что иногда мы предпочитаем ссылаться на свойства под другим именем, поэтому мы можем использовать псевдонимы:
Деструктуризация - это очень приятное дополнение к 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
#полезно👍10🔥4❤2
null - это объект
null является объектом. Сомневаетесь? Ведь данное утверждение противоречит самой сути null. Вот доказательства:alert(typeof null); //Выдаст сообщение 'object'Несмотря на очевидный факт,
null не является реализацией никакого базового объекта. (Значения в JavaScript являются реализациями базового объекта. Так, каждое число является реализацией объекта Number, каждый объект является реализацией объекта Object.) Такое положение возвращает нас обратно к практическому смыслу, потому что если null является отсутствием значения, то он не может быть реализацией какого-либо объекта. Следовательно следующее выражение возвращает false:alert(null instanceof Object); //Выдаст сообщение 'false'#полезно
👍12
NaN - это число
Считаете факт представления null объектом странным? Попробуйте проверить NaN! Он оказывается числом! Кроме того, NaN не равен самому себе!
#полезно
Считаете факт представления null объектом странным? Попробуйте проверить NaN! Он оказывается числом! Кроме того, NaN не равен самому себе!
alert(typeof NaN); //Выдаст сообщение 'Number'В действительности NaN не равен ничему. Единственный способ проверить значение NaN - функция
alert(NaN === NaN); //Выдаст сообщение 'false'
isNaN().#полезно
👍5