От автора: вот три способа отфильтровать дубликаты из массива и вернуть только уникальные значения. Мой любимый — с использованием Set. Он быстрее и проще всего позволяет произвести удаление дубликатов в массиве.
1. Использование Set
Позвольте мне начать с объяснения того, что представляет собой Set: Set — это новый объект данных, представленный в ES6. Так как Set позволяет хранить только уникальные значения, когда вы передаете в него массив, он удалит все повторяющиеся значения.
Хорошо, давайте вернемся к нашему коду и разберем, что происходит. А происходят 2 вещи:
Сначала мы создаем новый Set, передавая ему массив. Поскольку Set допускаются только уникальные значения, все дубликаты будут удалены.
Теперь дубликаты исчезли, мы преобразуем их обратно в массив с помощью оператора spread…
Преобразуем Set в массив, используя Array.from
Кроме того, вы можете использовать Array.from для преобразования Set в массив:
2. Использование filter
Чтобы понять этот вариант, давайте рассмотрим, что делают эти два метода: indexOf и filter.
indexOf
Метод indexOf возвращает первый индекс предоставленного элемента, который он находит в нашем массиве.
filter
Метод filter() создает новый массив элементов , которые соответствуют предоставленным условиям. Другими словами, если элемент соответствует и возвращается true, он будет включен в фильтруемый массив. И любой элемент, который не соответствует или возвращает false, НЕ будет включен в фильтрованный массив.
Давайте рассмотрим, что происходит, когда мы перебираем массив.
Ниже приведен вывод из файла console.log, показанный выше. Дубликаты — это место, где индекс не совпадает с indexOf. Таким образом, в этих случаях условие будет ложным и не будет включено в наш фильтрованный массив.
Извлечение повторяющихся значений
Мы также можем использовать метод filter для извлечения дублированных значений из массива. Мы можем сделать это, просто настроив условие следующим образом:
Опять же, если мы выполним код, то получим:
3. Использование reduce
Метод reduce используется для сокращения элементов массива и объединения их в окончательный массив на основе некоторой переданной функции редуктора.
В этом случае наша функция-редуктор проверяет, содержит ли наш последний массив элемент. Если это не так, вставляем этот элемент в конечный массив. В противном случае пропускаем этот элемент и возвращаем только окончательный массив как есть (по сути, пропуская этот элемент).
reduce немного сложнее для понимания, поэтому рассмотрим подробно каждый случай:
И вот вывод из console.log:
Автор: Samantha Ming
Источник: https://medium.com/
Редакция: Команда webformyself.