Уникальные значения в JS и jQuery: аналог hashmap в JavaScript

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

Для выделения уникальных значений из массива в JavaScript предусмотрен объект Set. Он хранит только уникальные значения. Оператор расширения ... преобразует объект обратно в массив.

const uniqueArray = [...new Set([1, 2, 2, 3, 4, 4, 5])]; // [1, 2, 3, 4, 5]

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

Попробуем отсортировать массив фруктов с повторяющимися элементами:

Исходный массив: [🍏, 🍎, 🍊, 🍏, 🍎, 🍇, 🍊, 🍇]

Устраняем дубликаты:

const uniqueBasket = [...new Set(fruits)];

В итоге получаем следующий отсортированный массив:

Отсортированный массив: [🍏, 🍎, 🍊, 🍇]

Таким образом, в массиве остаются лишь уникальные элементы.

Альтернативные методы, если Set не подходит

Иногда использование Set может быть неприменимо, в особенности при работе с объектами.

Классический метод через Array.filter и indexOf

Для поддержки устаревших браузеров или особых условий фильтрации дубликатов можно использовать комбинацию Array.prototype.filter() и Array.prototype.indexOf().

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((value, index, self) => {
  return self.indexOf(value) === index;
});

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

Определение уникализированности объектов посредством функции

В случае массивов объектов уникальность элементов часто зависит от определённого свойства.

function getUniqueByProperty(array, propertyName) {
  const uniqueObjects = array
    .map(e => e[propertyName])
    .map((e, i, final) => final.indexOf(e) === i && i)
    .filter(e => array[e])
    .map(e => array[e]);
   
  return uniqueObjects;
}

Сокращение массива с помощью reduce

Метод Array.prototype.reduce() позволяет контролировать процесс формирования массива уникальных значений.

const uniqueArray = array.reduce((unique, item) => {
  return unique.includes(item) ? unique : [...unique, item];
}, []);

Работа с устаревшими браузерами

Для совместимости кода с браузерами, не подтверждающими поддержку ES6, рекомендуется использовать полифиллы. Это особенно касается методов как Array.includes.

Нестандартные решения

Применение JSON Stringify/Parse для работы с уникальными объектами

При работе с объектами можно применять комбинацию JSON.stringify() и Set.

const uniqueObjectArray = [
  ...new Map(array.map(item => [JSON.stringify(item), item])).values(),
];

Глубокое сравнение объектов

Глубокое сравнение объектов требует рекурсивной функции, сравнивающей свойства.

Особенности и исключения

Значения null, undefined и NaN могут создать особые ситуации при обработке массивов. Поэтому необходимо их учитывать.

Профессиональный совет

Перед применением Set рекомендуется проверить данные. Set эффективен только для определённых типов данных и простых структур. При работе со сложными структурами стоит применять подход с пользовательской функцией фильтрации.

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

1. Array.prototype.filter() – JavaScript | MDN
2. Set – JavaScript | MDN
3. ECMAScript 6 sets: union, intersection, difference
4. Array.prototype.reduce() – JavaScript | MDN
5. Spread syntax (...) – JavaScript | MDN
6. javascript – Remove duplicate values from JS array – Stack Overflow