Демонстрация requestAnimationFrame

В этой JavaScript демонстрации видно, как использовать requestAnimationFrame API для воспроизведения и паузы

#javascript #codepen

​​Как произвести удаление дублей массива(1 часть)

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

Преобразуем Set в массив, используя Array.from :

#javascript

Локальное хранилище

Локальное хранилище является наиболее широко используемым хранилищем из-за его простоты. Оно позволяет хранить пары ключ-значение, сериализованные в виде строк. Вы можете выполнять следующие действия в локальном хранилище:

• setItem() — сохранить ключ-значение
• getItem() — получить ключ-значение
• removeItem() — удалить ключ-значение
• clear() — очистить все пары «ключ-значение»
• key() — получить номер n-й пары ключ-значение

localStorage.setItem('session', JSON.stringify({'id': 5, 'timeout' : 500000}));
var sessionItem = JSON.parse(localStorage.getItem('session'));

#javascript

​​Как произвести удаление дублей массива(2 часть)

Метод filter() создает новый массив элементов , которые соответствуют предоставленным условиям. Другими словами, если элемент соответствует и возвращается true, он будет включен в фильтруемый массив. И любой элемент, который не соответствует или возвращает false, НЕ будет включен в фильтрованный массив.

#javascript

​​Как произвести удаление дублей массива (часть 3)

Метод reduce используется для сокращения элементов массива и объединения их в окончательный массив на основе некоторой переданной функции редуктора.
В этом случае наша функция-редуктор проверяет, содержит ли наш последний массив элемент. Если это не так, вставляем этот элемент в конечный массив. В противном случае пропускаем этот элемент и возвращаем только окончательный массив как есть (по сути, пропуская этот элемент).
reduce немного сложнее для понимания, поэтому рассмотрим подробно каждый случай:

#javascript

Размер веб-страницы

Размер веб-страницы состоит из ширины и высоты отображаемого содержимого страницы.

Используйте следующее для доступа к размеру содержимого веб-страницы (включая отступы страницы, но не границы, поля или полосы прокрутки):

const pageWidth  = document.documentElement.scrollWidth;
const pageHeight = document.documentElement.scrollHeight;

Если pageHeight больше, чем внутренняя высота окна, то отображается вертикальная полоса прокрутки.

#javascript

Массив и логическое значение

Вам нужно отфильтровать недействительные значения (0, undefined, null, false и т.д.) из массива? Возможно, вы не знали этого трюка:

myArray
    .map(item => {
        // ...
    })
    // Избавляемся от плохих значений
    .filter(Boolean);

Просто передайте Boolean, и все эти ложные значения будут убраны.

#javascript

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

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

const person = { name: 'David Walsh', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };
const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' };
const summary = {...person, ...tools, ...attributes};

#javascript

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

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

const obj =  { x :  1  } ;
// Захватываем obj.x, как {x}
const  { x }  = obj ;
// Захватываем obj.x, как {otherName}
const  { x : otherName }  = obj ;

Полезно для предотвращения конфликтов имен с существующими переменными.

#javascript

Внешний размер окна

Внешний размер окна состоит из ширины и высоты всего окна браузера, включая адресную строку, панель вкладок и другие панели браузера.

Чтобы получить доступ к внешнему размеру окна, вы можете использовать свойство outerWidth и outerHeight, которые доступны непосредственно для объекта window:

const windowOuterWidth  = window.outerWidth;
const windowOuterHeight = window.outerHeight;

#javascript

Добавление зависимостей в package.json вручную

Вам следует избегать обновления package.json вручную, так как это может нарушить синхронизацию между package.json и package-lock.json.
Вместо этого, вы можете использовать CLI команды, такие как npm i –save и npm i —save-dev для автоматического обновления package.json и package-lock.json. Они также предупредят вас, если есть какие-либо несовпадения версий в этих 2 файлах.

#javascript

Используйте let и const вместо var

При объявлении переменных JavaScript, предпочитают использовать let и const переменные. Эти две переменные не инициализируются во время поднятия (hoisting). Переменная var — инициализируется, и иногда это может привести к проблемам.

#javascript

Объявлять переменные в верхней части

По возможности старайтесь объявить переменные JavaScript в верхней части текущей области видимости. Это служит трем целям.

Во-первых, это помогает сделать ваш код чище.

Вторая причина заключается в том, что это помогает избежать ссылок на переменные до их определения.

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

#javascript #полезно

Freeze(). Как видно из названия, он может заморозить объект. Это означает, что freeze избегает изменения значения объекта. Давайте посмотрим пример кода с методом object.freeze().

let obj ={'country':""};
obj.country="Sri Lanka";
Object.freeze(obj);
console.log(obj);
obj.country="England";
console.log(obj);

Выходные значения:
{ country: 'Sri Lanka' }
{ country: 'Sri Lanka' }

#javascript

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

const copyToClipboard = (text) => navigator.clipboard.writeText(text);

copyToClipboard("This Sring is Copied To Clipboard.");

#javascript #полезно

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

const randomNumberInRange = (min = 0, max = 100) => Math.floor(Math.random() * (max - min + 1)) + min;

randomNumberInRange()
//Результат: случайное число от 0 до 100.
randomNumberInRange(100, 200)
//Результат: случайное число от 100 до 200.

#javascript

Преобразование RGB в Hex

Полезная функция в этом списке, которая используется для преобразования RGB в шестнадцатеричный код.

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 
rgbToHex(0, 51, 255);
// Result: #0033ff

#javascript