Удалить дубли из массива javascript

Удаление повторяющихся объектов из массива JavaScript

Предположим, что у нас есть массив объектов, пример которого приведен ниже:

Первый и последний объект в массиве являются одинаковыми. Как удалить дубликаты из массива? На удивление, в JavaScript решить такую задачу довольно сложно. Чтобы понять это, рассмотрим, как удалить повторения из одномерного массива, элементами которого являются строки.

Удаление дубликатов из одномерных массивов (легкий способ)

Предположим, что у нас есть массив строк:

const strings = [ "My Sister the Serial Killer", "Educated", "My Sister the Serial Killer" ];

Чтобы удалить повторяющиеся элементы из такого массива, можно использовать метод filter() вместе с методом indexOf() . Он позволяет проверить, не повторяется ли какой-либо из элементов.

const filteredStrings = strings.filter((item, index) => < // Возврат к новому массиву, если индекс текущего элемента //совпадает с другим return strings.indexOf(item) === index; >);

strings.indexOf(item) всегда будет возвращать индекс первого вхождения элемента, мы можем выяснить, является ли текущий элемент повторяющимся в фильтрующей цикле. Если да, мы не возвращаем его в новый массив, созданный методом filter() .

Объекты не работают одинаково

Этот способ не подходит для сравнения объектов. В JavaScript любые два объекта с одинаковыми свойствами и значениями не считаются одинаковыми.

const a = < name: "My Sister the Serial Killer", author: "Oyinkan Braithwaite" >; const b = < name: "My Sister the Serial Killer ", author: "Oyinkan Braithwaite" >; a === b // false

В JavaScript объекты имеют ссылочный тип . Поэтому равными будут только ссылки на один и тот же объект. Таким образом, indexOf(object) в массиве объектов всегда будет возвращать индекс переданного элемента, даже если там есть другой объект с одинаковыми свойствами и значениями.

Мое решение

Единственным способом сравнения объектов является проверка свойств и значений каждого из них. Поэтому решение заключается в ручной проверке. Механизм реализации:

1. Проверять каждый элемент в массиве на соответствие последующему, который идет после него.
2. Проверять только те элементы, которые не были определены как дубликаты другого элемента.
3. Если значения каждого свойства объектов одинаковы, проверить, имеют ли объекты одинаковые ключи.

Финальная функция выглядит так:

function removeDuplicates(arr) < const result = []; const duplicatesIndices = []; // Перебираем каждый элемент в исходном массиве arr.forEach((current, index) => < if (duplicatesIndices.includes(index)) return; result.push(current); // Сравниваем каждый элемент в массиве после текущего for (let comparisonIndex = index + 1; comparisonIndex < arr.length; comparisonIndex++) < const comparison = arr[comparisonIndex]; const currentKeys = Object.keys(current); const comparisonKeys = Object.keys(comparison); // Проверяем длину массивов if (currentKeys.length !== comparisonKeys.length) continue; // Проверяем значение ключей const currentKeysString = currentKeys.sort().join("").toLowerCase(); const comparisonKeysString = comparisonKeys.sort().join("").toLowerCase(); if (currentKeysString !== comparisonKeysString) continue; // Проверяем индексы ключей let valuesEqual = true; for (let i = 0; i < currentKeys.length; i++) < const key = currentKeys[i]; if ( currentУдалить дубли из массива javascript !== comparisonУдалить дубли из массива javascript ) < valuesEqual = false; break; >> if (valuesEqual) duplicatesIndices.push(comparisonIndex); > // Конец цикла >); return result; >

Наталья Кайда автор-переводчик статьи « Removing duplicate objects from an Array (is hard) »

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

Источник

3 способа удаления дубликатов из массива в JS

Существует три способа удаления дубликатов из массива. В данной статье рассмотрим каждый из них и выясним наиболее подходящий.

Первый способ удаления дубликатов из массива.

Перед нами массив arr, где дублируются некоторые числа. Наша задача создать новый массив или преобразовать текущий массив, но без дубликатов. Для решения задачи, воспользуемся объектом set. Объект set может содержать в себе только уникальные элементы.

// Массив arr
const arr = [1, 2, 3, 5, 1, 6, 2, 5, 6, 7];
console.log(arr);

Создадим новую переменную arr_1 и применим объект set к исходному массиву. Метод new Set создает новую коллекцию. В результате мы получили новый набор (коллекцию) с уникальными числами, а все дубли исчезли.

let arr_1 = new Set(arr);
console.log(arr_1);

Элементы набора заключены в фигурные скобки, а массива — в квадратные. Как же нам получить все-же массив? Это можно сделать двумя способами: через оператор расширения spreаd (. ) или через метод Array.from().

// Spread
let arr_1 = [. new Set(arr)];
console.log(arr_1);

// Array.from
let arr_1 = Array.from(new Set(arr));
console.log(arr_1);

Оператор spread и метод Array.from() проделали одну и туже работу — преобразовали коллекцию в массив.

Второй способ удаления дублей

Метод filter() создает новый массив. Он вызывает callback функцию для каждого элемента массива. Элементы массива не прошедшие проверку, вылетают из вновь созданного массива. Метод filter() передает в callback функцию два параметра исходного массива: элемент массива и его индекс (порядковый номер в массиве). Метод indexOf сверяет индексы, начиная с первого, в исходном и в новом массиве. Если позиция текущего элемента совпадает с найденной, значит этот элемент уникальный и он добавляется в новый массив. Но, если индексы у одного и того же элементы не совпадают, значит это дубликат и он уже не попадет в новый массив.

// Filter
let arr_2 = arr.filter((item, index) => return arr.indexOf(item) === index
>);
console.log(arr_2);

Массив дублей

Если перед знаками равно поставить восклицательный знак, то мы получим противоположный эффект. В новом массиве останутся только дубли.

let arr_2 = arr.filter((item, index) => return arr.indexOf(item) !== index
>);
console.log(arr_2);

Третий способ удаления дублей

Метод reduce() тоже метод перебора массива и он принимает callback функцию с двумя параметрами: result и item. В переменной result будет накапливаться результат, а item является текущим элементом. Метод includes проверяет, есть ли текущий элемент в переменной result. Если есть, то возвращается result и ничего не происходит. В противном случае, мы добавляем в result текущий элемент и все это преобразуем обратно в массив.

// Reduce
let arr_3 = arr.reduce((result, item) => return result.includes(item) ? result : [. result, item];
>, []);
console.log(arr_3);

Итог

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

Создано 02.11.2020 10:10:37

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник

Как удалить дубликаты в массиве в JS

Необходимость удалить дубликаты в массиве в JS возникает не так уж редко. Например — чтобы удалить данные, когда кто-то дважды заполнил форму. На самом деле таких вариантов может быть сколько угодно. В этой статье мы рассмотрим три способа удаления дубликатов.

1. Использование Set

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

Мы можем воспользоваться этим методом, только нужно будет еще преобразовать Set в новый массив. Выглядит это так:

let chars = ['A', 'B', 'A', 'C', 'B']; let uniqueChars = [. new Set(chars)]; console.log(uniqueChars);

2. Использование методов indexOf() и filter()

Метод indexOf() возвращает индекс первого вхождения элемента в массиве:

let chars = ['A', 'B', 'A', 'C', 'B']; chars.indexOf('B');

Дубликатом будет считаться элемент с индексом, отличным от значения indexOf() :

let chars = ['A', 'B', 'A', 'C', 'B']; chars.forEach((element, index) => < console.log(`$- $ - $`); >);

A - 0 - 0 B - 1 - 1 A - 2 - 0 C - 3 - 3 B - 4 - 1

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

let chars = ['A', 'B', 'A', 'C', 'B']; let uniqueChars = chars.filter((element, index) => < return chars.indexOf(element) === index; >); console.log(uniqueChars);

Если по какой-то причине нам нужны сами дубликаты, мы можем модифицировать нашу функцию, слегка изменив наше правило:

let chars = ['A', 'B', 'A', 'C', 'B']; let dupChars = chars.filter((element, index) => < return chars.indexOf(element) !== index; >); console.log(dupChars);

3. Использование методов includes() и forEach()

Функция include() возвращает true , если элемент есть в массиве, и false — если такого элемента в массиве нет.

В следующем примере мы перебираем элементы массива и добавляем в новый массив только те, которых там пока нет.

let chars = ['A', 'B', 'A', 'C', 'B']; let uniqueChars = []; chars.forEach((element) => < if (!uniqueChars.includes(element)) < uniqueChars.push(element); >>); console.log(uniqueChars);

В общем, удалить дубликаты в массиве в JS можно разными способами, выбирая наиболее подходящий для каждого конкретного случая.

От редакции Techrocks. Также рекомендуем статью «Как удалить элемент из массива в JavaScript».

Источник