dr.Brain

doctor Brain

мир глазами веб-разработчика

JavaScript: удаление дублей

удаляем дубли в списке с помощью JavaScript

dr.Brain

время чтения 2 мин.

Photo by Stefan Cosma on Unsplash

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

const contacts = [
    { name: "Mandy", email: "mandy@email.com" },
    { name: "Alysse", email: "alice@email.com" }, 
    { name: "Mandi", email: "mandy@email.com" },// Duplicate 
];

const nbaContacts = [
    { name: "Lebron", personal_email: "lebron@email.com" },
    { name: "Irving", personal_email: "irving@email.com" }, 
    { name: "Levron", personal_email: "lebron@email.com" }, //duplicate
]

Создадим функцию removeDuplicates, в которой с помощью метода map соберем в массив emails все электронные адреса из полей email (массив contacts) и personal_email (массив nbaContacts). После этого с помощью new Set(emails) избавимся от дублей, создадим новый массив contacts и, перебрав значения uniqueEmails.forEach заполним его только уникальными значениями.

function removeDuplicates(elements: Array<any>, key: string) {
  let emails = elements.map(p => p[key]);
  let uniqueEmails = Array.from(new Set(emails));

  let contacts = [];
  uniqueEmails.forEach((value) => {
    let contact = elements.find(p => p[key] === value);
      uniqueContacts.push(contact)
  })

  return contacts
}

В приведенном выше варианте применены распространенные конструкции: map, Set(), foreach.

Но есть и другой, более продвинутый способ.

Теперь объявим uniqueEmails, который будет содержать только уникальные значения. Затем с помощью фильтрации переберем элементы входящего массива, используя elm[key] для получения правильного значения. Если в uniqueEmails адрес отсутствует (!uniqueEmails.has(value)), он попадает в массив, а фильтр возвращает true. В противном случае возвращается false, указывающий на необходимость удаления элемента.

function removeDuplicates(elements: Array<any>, key: string) {
  const uniqueEmails = new Set();
  return elements.filter(elm => {
    const value = elm[key];
    const isDuplicate = !uniqueEmails.has(value);
    uniqueEmails.add(value);
    return !isDuplicate;
  });
}

Еще больше информации о методе map читайте на MDN.


Спасибо за внимание.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.