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