Удалить дубликаты из массива с помощью JavaScript

Очень часто нам нужно удалить все дубликаты в массиве, и в JavaScript мы можем сделать это несколькими способами.

Метод фильтрации

Метод фильтра создает новый массив, вызывая функцию обратного вызова, которую мы предоставляем в качестве первого аргумента. Функция обратного вызова принимает три аргумента (текущий итерируемый элемент, индекс текущего итерируемого элемента, экземпляр массива) и выполняется для каждого элемента в массиве. В результате новый массив имеет элементы, которые выполняют условие в функции обратного вызова, если элемент проходит условие, он возвращает true и будет добавлен в новый массив.

Метод indexOf возвращает первый индекс массива, в котором был найден данный элемент.

const arr = [2, 33, 55, 5, “hello”, 33, 2, 44, “hello”];
const filteredResults = arr.filter((item, index) =>      arr.indexOf(item) === index);
console.log(filteredResults); //[2, 33, 55, 5, “hello”, 44];

Метод уменьшения

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

const arr = [2, 33, 55, 5, “hello”, 33, 2, 44, “hello”];
const reducedResult = arr.reduce((acc, item) => {
  if (!acc.includes(item)) {
     acc.push(item);
  }
  return acc;
}, []);
console.log(reducedResult); // [2, 33, 55, 5, “hello”, 44];

Метод для каждого

Метод forEach перебирает элементы массива, не изменяя массив. Он выполняет функцию обратного вызова, которая получает три аргумента — текущий итерируемый элемент, индекс элемента.
Мы создаем пустой массив, в котором будут храниться неповторяющиеся значения. В теле callback-функции мы проверяем, есть ли в новом массиве итерированное значение, если нет, то пишем его туда.

const arr = [2, 33, 55, 5, “hello”, 33, 2, 44, “hello”];
const forEachResult = [];
arr.forEach((item) => {
   if (!forEachResult.includes(item)) {
      forEachResult.push(item);
   }
});
console.log(forEachResult); //[2, 33, 55, 5, “hello”, 44];

Установить объект

Объект Set — это особый вид коллекции, где каждое значение может встречаться только один раз. Итак, для преобразования коллекции Set в массив мы используем оператор скорости […].

const arr = [2, 33, 55, 5, "hello", 33, 2, 44, "hello"];
const setResult = [...new Set(arr)];
console.log(setResult); //[2, 33, 55, 5, "hello", 44];