1. Сохраняйте только первый объект в массиве со значением свойства
Чтобы отфильтровать повторяющиеся объекты из массива по свойству в JavaScript, используйте метод filter() для фильтрации элементов, которые не являются первыми в массиве со значением свойства.
Например:
JavaScript
const arr = [
{
name: 'John',
location: 'Los Angeles',
},
{
name: 'Kate',
location: 'New York',
},
{
name: 'Mike',
location: 'New York',
},
];
const unique = arr.filter(
(obj, index) =>
arr.findIndex((item) => item.location === obj.location) === index
);
/*
[
{ name: 'John', location: 'Los Angeles' },
{ name: 'Kate', location: 'New York' }
]
*/
console.log(unique);
Array filter() проверяет каждый элемент в массиве на соответствие условию, заданному функцией обратного вызова, и создает новый массив, заполненный элементами, прошедшими проверку. Он не изменяет исходный массив.
JavaScript
const arr = [1, 2, 3, 4]; const filtered = arr.filter((num) => num > 2); console.log(filtered); // [ 3, 4 ]
Метод Array findIndex() ищет элементы в массиве и возвращает индекс первого из них, прошедшего проверку, указанную переданной ему функцией обратного вызова. Мы используем его, чтобы найти первый элемент массива с тем же значением свойства, что и объект filter(), который в данный момент тестируется.
В нашем примере условие filter() для объекта состоит в том, что индекс его массива должен совпадать с результатом findIndex(). Если это условие true, это будет означать, что объект является первым элементом массива со значением свойства. Если это false, это будет означать, что элемент массива с таким значением свойства уже существует, поэтому объект является дубликатом и не должен быть включен в результат.
JavaScript
const arr = [
{
name: 'John',
location: 'Los Angeles',
},
{
name: 'Kate',
location: 'New York',
},
{
name: 'Mike',
location: 'New York',
},
];
// true - first object with location of New York
console.log(1 === arr.findIndex((obj) => obj.location === 'New York'));
// false - will not be included in result
console.log(2 === arr.findIndex((obj) => obj.location === 'New York'));
Фильтровать повторяющиеся объекты из массива по нескольким свойствам
В зависимости от вашего сценария вы можете захотеть, чтобы объект считался дубликатом только в том случае, если у него есть два или более свойства с одинаковыми значениями — несколько одинаковых значений свойств.
В этом случае мы будем использовать filter() и findIndex(), как и раньше, но добавим дополнительные сравнения между объектом filter() и объектом findIndex() для всех свойств.
Например:
JavaScript
const arr = [
{
name: 'Kate',
location: 'New York'
},
{
name: 'Mike',
location: 'New York'
},
{
name: 'Kate',
location: 'New York'
}
];
const unique = arr.filter(
(obj, index) =>
arr.findIndex(
(item) => item.location === obj.location && item.name === obj.name
) === index
)
/*
[
{ name: 'Kate', location: 'New York' },
{ name: 'Mike', location: 'New York' }
]
*/
console.log(unique);
2. Исключить дубликаты из массива unique
Вот еще один способ отфильтровать повторяющиеся объекты из массива в JavaScript:
- Создайте пустой массив
unique, в котором будут храниться уникальные объекты. - Перебрать объекты в массиве.
- Для каждого объекта добавьте его в массив
unique, если он не является дубликатом. В противном случае игнорируйте его.
Например:
JavaScript
const arr = [
{
name: 'John',
location: 'Los Angeles',
},
{
name: 'Kate',
location: 'New York',
},
{
name: 'Mike',
location: 'New York',
},
];
const unique = [];
for (const item of arr) {
const isDuplicate = unique.find((obj) => obj.location === item.location);
if (!isDuplicate) {
unique.push(item);
}
}
/*
[
{ name: 'John', location: 'Los Angeles' },
{ name: 'Kate', location: 'New York' }
]
*/
console.log(unique);
Мы используем цикл for...of для перебора массива и выполнения действия для каждого объекта.
Для каждого объекта мы используем метод find(), чтобы проверить, существует ли он уже в массиве unique. Array find() ищет в массиве первый объект, прошедший указанный тест, аналогично findIndex(), но возвращает сам объект вместо его индекса массива.
JavaScript
const nums = [2, 5, 8, 13, 19]; const doubleDigit = nums.find((num) => num > 9); console.log(doubleDigit); // 13
Если его нет в массиве unique, мы просто добавляем его методом push().
Этот метод не является однострочным, как первый, но вам может быть проще его понять. Это кажется естественным способом удаления повторяющихся элементов из списка как человека.
Фильтровать повторяющиеся объекты из массива по нескольким свойствам
Как и в предыдущем методе, если для определения того, является ли объект дубликатом, используется несколько свойств, вы можете просто добавить дополнительные проверки свойств — на этот раз в методе find():
JavaScript
const arr = [
{
name: 'Kate',
location: 'New York',
},
{
name: 'Mike',
location: 'New York',
},
{
name: 'Kate',
location: 'New York',
},
];
const unique = [];
for (const item of arr) {
// 👇 "name" and "location" used for duplicate check
const duplicate = unique.find(
(obj) => obj.location === item.location && obj.name === item.name
);
if (!duplicate) {
unique.push(item);
}
}
/*
[
{ name: 'Kate', location: 'New York' },
{ name: 'Mike', location: 'New York' }
]
*/
console.log(unique);
Первоначально опубликовано на codingbeautydev.com
Все сумасшедшие вещи, которые делает JavaScript
Увлекательное руководство по тонким предостережениям и менее известным частям JavaScript.
Зарегистрируйтесь и немедленно получите бесплатную копию.
Больше контента на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.
