Рубрики
Без рубрики

Как удалить дубликаты в массиве с помощью JavaScript ES6

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

Автор оригинала: NITIN HEPAT.

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

Давайте обсудим, как удалить дубликаты из массива примитивов (например, массив строки, массива номеров) и массив не примитивов (например, массив объектов)

Использование метода indexof.

const dataArr = ['1','5','6','1','3','5','90','334'];

const resultArr = dataArr.filter((data,index)=>{
  return dataArr.indexOf(data) === index;
})
console.log(resultArr); //["1", "5", "6", "3", "90", "334"]

Как известно, этот метод фильтра используется для фильтрации метода от массива согласно данному условию

Data Arr.indexof (данные), метод indexof всегда возвращать первое вхождение

Использование набора

Набор – это объект, представленный в ES6, используемый для хранения набора уникальных значений

const dataArr = ['1','5','6','1','3','5','90','334','90'];

//creates  Set object from array of unique element
const dataArrWithSet = new Set(dataArr);


//we can create Set object to array also using spread operator
const resultArr = [...dataArrWithSet];

console.log(resultArr); 

Приведенный выше метод мой любимый, который требует минимальной линии кода

Используя уменьшение

Уменьшить представляет собой метод прототипа массива, который имеет функцию редуктора, которая выполняет на каждом элементе и приводит к одному выходу.

const dataArr = ['1','5','6','1','3','5','90','334','90'];


const resultArr = dataArr.reduce((acc,item)=>{
      if(!acc.includes(item)){
        acc.push(item);
      }
    return acc;
},[])

console.log(resultArr);//["1", "5", "6", "3", "90", "334"]

В вышеизложенном, например. ACC – это аккумулятор, который инициализируется пустым массивом, и каким бы какими бы возможными ресурсами функции редуктора сохраняются в аккумулятор. Но, прежде чем хранить элементы в аккумулятор, мы проверяем, что элемент уже присутствует или нет, если элемент не присутствует в аккумуляторе, то мы толкаем элементы в аккумулятор. Таким образом, нет шансов на толкать дубликаты элементов в аккумулятор. Таким образом, в конечном итоге мы получим коллекцию уникальных элементов

Использование метода Foreach

FOREACH – это метод прототипа массива, который используется для повторения элементов массива

const dataArr = ['1','5','6','1','3','5','90','334','90'];

const uniqueArr = [];
dataArr.forEach((item)=>{
    //pushes only unique element
      if(!uniqueArr.includes(item)){
        uniqueArr.push(item);
      }
   
})

console.log(uniqueArr); //["1", "5", "6", "3", "90", "334"]

В вышеизложенном, например. В Uniquearr мы только подталкиваем предметом, когда товар уже не там. Так наконец, мы получим коллекцию уникальных элементов

Удаление дубликатов из массива объектов

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

Используя карту

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

var arrOfObj = [
  {
    name:'abc',age:27
  },
  {
    name:'pqr',age:27
  },
  {
    name:'abc',age:27
  },
 ]
var dataArr = arrOfObj.map(item=>{
    return [item.name,item]
}); // creates array of array
var maparr = new Map(dataArr); // create key value pair from array of array

var result = [...maparr.values()];//converting back to array from mapobject

console.log(result); //[{"name":"abc","age":27},{"name":"pqr","age":27}]

В приведенном выше примере, если мы даем массив массива в качестве ввода на объект map, то объект MAP преобразует его в пару значений ключей, и если она найдет дубликаты ключа, просто замените его, поэтому на финале мы получаем arry с уникальной коллекцией значений

Приведенный выше пример не будет работать в каждом случае. Мы взяли имя как наше уникальное значение для карты. Но как мы знаем, что имя может быть то же самое в некоторых случаях, а возраст может быть одинаковым в некоторых случаях

например,

var arrOfObj = [
  {
    name:'abc',age:27
  },
  {
    name:'pqr',age:27
  },
  {
    name:'abc',age:27
  },
 {
    name:'abc',age:28
  },
 ]

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

Итак, какое решение для этого.

var arrOfObj = [
  {
    name:'abc',age:27
  },
  {
    name:'pqr',age:27
  },
  {
    name:'abc',age:27
  },
 {
    name:'abc',age:28
  },
 ]
var dataArr = arrOfObj.map(item=>{
    return [JSON.stringify(item),item]
}); // creates array of array
var maparr = new Map(dataArr); // create key value pair from array of array

var result = [...maparr.values()];//converting back to array from mapobject

console.log(result); //[{"name":"abc","age":27},{"name":"pqr","age":27}]

Как вы можете видеть, мы затрагиваем весь объект и сделайте его в качестве ключа. Итак, с вышеупомянутым решением получит 100% уникальную коллекцию массива.

Использование набора

Мы можем удалить дубликаты из массива, используя набор объекта также

var arrOfObj = [
  {
    id:1 ,name:'abc',age:27
  },
  {
    id:2 ,name:'pqr',age:27
  },
  {
    id:1 ,name:'abc',age:27
  },
 ]

var setObj = new Set(); // create key value pair from array of array

var result = arrOfObj.reduce((acc,item)=>{
  if(!setObj.has(item.id)){
    setObj.add(item.id,item)
    acc.push(item)
  }
  return acc;
},[]);//converting back to array from mapobject

console.log(result); //[{"id":1,"name":"abc","age":27},{"id":2,"name":"pqr","age":27}]

Как вы можете видеть выше, с помощью уменьшения и установки мы можем найти дубликат из массива

Заключение:

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

через TechboxWeb.