​​Как произвести удаление дублей массива(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

Credit Card Form - VueJs

#codepen #javascript

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

const goToTop = () => window.scrollTo(0, 0);
goToTop();

#javascript

Функция array.flatMap() принимает функцию обратного вызова в качестве аргумента и возвращает новый сопоставленный массив:

const mappedArray = array.flatMap((item, index, origArray) => {
 // ...
 return [value1, value2, ..., valueN];
}[, thisArg]);

Функция обратного вызова вызывается для каждого элемента исходного массива с тремя аргументами: текущий элемент, индекс и исходный массив. Затем массив, возвращаемый обратным вызовом, сглаживается на 1 уровень в глубину, а полученные элементы добавляются в сопоставленный массив.

#javascript

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

userLogin('user').then(function(user){
    getArticle(user).then(function(articles){
        showArticle(articles).then(function(){
            //Your code goes here...
        });
    });
});

Чтобы избежать этого, нам нужно отменить вложенность кода, вызвав getArticle из первого then и обработать его во втором then. 👇

userLogin('user')
  .then(getArticle)
  .then(showArticle)
  .then(function(){
       //Your code goes here...
});

#javascript #полезно

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

const copyToClipboard = (text) => navigator.clipboard.writeText(text);
 
copyToClipboard("This Sring is Copied To Clipboard.");

#javascript #полезно