Уникальные значения из массива объектов в JavaScript

Быстрый ответ

Чтобы исключить дубликаты, примените методы reduce и findIndex из ES6:

const array = [{id: 1, value: 'a'}, {id: 2, value: 'b'}, {id: 1, value: 'c'}];

const unique = array.reduce((accumulator, current) => {
  if (accumulator.findIndex(object => object.id === current.id) === -1) {
    accumulator.push(current);
  }
  return accumulator;
}, []);

console.log(unique); // [{id: 1, value: 'a'}, {id: 2, value: 'b'}]

Переменная accumulator сохраняет уникальные элементы, а current используется для поиска дубликатов через findIndex.

Пути победы над дубликатами

Избегание дубликатов с помощью Set и map

Для уникализации простых свойств идеально подходит сочетание Set и map():

const uniqueAges = [...new Set(array.map(obj => obj.age))];
console.log(uniqueAges); // [age1, age2, age3, ...]

Подробнее об этом расскажет наш спикер на видео

Обращение со сложными свойствами с использованием Map

При работе со сложными свойствами структура данных Map оказается очень полезной:

const uniqueObjects = [...new Map(array.map(item => [item.key, item])).values()];
console.log(uniqueObjects); // [object1, object2, object3, ...]

Классический метод: проверка индексов

Воспользуйтесь проверенной временем комбинацией filter с indexOf:

const unique = array.map(e => e.id)
                    .filter((id, index, self) => self.indexOf(id) === index)
                    .map(id => array.find(a => a.id === id));
console.log(unique); // [object1, object2, ...]

Визуализация

Представьте, что вы находитесь в библиотеке...

Имеется в вашем распоряжении такой набор книг:

| Код книги | Жанр        |
| --------- | ----------- |
| 1         | Детектив    |
| 2         | Научная фантастика |
| 3         | Детектив    | <-- Жанр, который дублируется
| 4         | Нон-фикшн   |

Применяя метод уникализации, вы получите следующую таблицу:

| **Жанр**   |
| ----------- |
| Детектив    |
| Научная фантастика |
| Нон-фикшн   |

Представьте книжную полку, на которой нет двух книг того же жанра. 📚✨

Мастерство программирования и нюансы

Цепная реакция: map(), Set, filter()

Сочетание этих методов обеспечивает не только приятность кода, но и четкое выражение ваших намерений:

let uniqueChain = Array.from(new Set(array.map(item => item.property)))
                       .map(property => array.find(item => item.property === property));
console.log(uniqueChain); // [unique object1, unique object2, ...]

TypeScript: типизированная безопасность

В TypeScript можно воспользоваться типизацией для уникализации:

const unique: Array<MyObjectType> = [...new Set(array.map(item => item.propertyKey))];

Значимость производительности

Предложенные методы, особенно при работе с большим объемом данных, обычно обрабатываются быстрее классических циклов.

Целостность данных при удалении дубликатов

Использование map при обнаружении дубликатов сохраняет последнее вхождение элемента, что может быть как преимуществом, так и недостатком в зависимости от задачи.

Полезные материалы

1. Array.prototype.filter() – JavaScript | MDN — детальное изучение фильтрации массивов в JavaScript.
2. Array.prototype.map() – JavaScript | MDN — руководство по итерации и преобразованию массивов с помощью map.
3. Array.prototype.reduce() – JavaScript | MDN — подробности по объединению элементов массива через reduce.
4. ECMAScript 2015 Language Specification – ECMA-262 6th Edition — основы работы с ES6 Set для получения уникальных значений.
5. javascript – How to remove all duplicates from an array of objects? – Stack Overflow — советы по исключению дубликатов в массивах JavaScript.
6. JavaScript Array Distinct() – codeburst — мастер-класс по использованию метода Distinct для получения уникальных элементов массива в современном JavaScript.
7. Map and Set – JavaScript.info — подробнейший обзор работы со структурами данных Map и Set для управления коллекциями и парами ключ/значение.