Демонстрация 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