Как найти уникальные значения в массиве?

👨‍💻 Frontend Developer 🟠 Может встретиться 🎚️ Средний
#JavaScript #Массивы #База JS

Краткий ответ

Есть несколько способов найти уникальные значения в массиве JavaScript:

  1. Set — самый простой и быстрый способ 🆕
  2. filter с indexOf — классический способ 📚
  3. reduce — функциональный подход 🔧
const arr = [1, 2, 2, 3, 3, 4];
 
// Set — самый частый способ
const unique1 = [...new Set(arr)]; // [1, 2, 3, 4]
 
// filter с indexOf
const unique2 = arr.filter((item, index) => arr.indexOf(item) === index); // [1, 2, 3, 4]
 
// Оба работают, но Set быстрее!

Полный ответ

Найти уникальные значения — как отсортировать носки в шкафу, оставив по одному экземпляру каждого цвета! 🧦✨

Set (самый частый способ)

Самый простой и быстрый способ — использовать [Set]:

const colors = ['красный', 'синий', 'красный', 'зелёный', 'синий'];
 
// Создаём Set (уникальные значения) и обратно в массив
const unique = [...new Set(colors)];
console.log(unique); // ['красный', 'синий', 'зелёный']
 
// Работает с любыми значениями
const mixed = [1, '1', 1, true, true, false];
console.log([...new Set(mixed)]); // [1, '1', true, false]

filter с indexOf (классический способ)

Проверяем, является ли элемент первым в массиве:

const numbers = [1, 2, 2, 3, 3, 4];
 
const unique = numbers.filter((item, index) => {
  return numbers.indexOf(item) === index;
});
 
console.log(unique); // [1, 2, 3, 4]
 
// Как это работает:
// Для 1: indexOf(1) = 0, index = 0 → 0 === 0 ✅
// Для 2: indexOf(2) = 1, index = 1 → 1 === 1 ✅
// Для 2: indexOf(2) = 1, index = 2 → 1 !== 2 ❌ (не берём)

reduce (функциональный способ)

Накапливаем уникальные значения:

const arr = [1, 2, 2, 3, 3, 4];
 
const unique = arr.reduce((acc, current) => {
  if (!acc.includes(current)) {
    acc.push(current);
  }
  return acc;
}, []);
 
console.log(unique); // [1, 2, 3, 4]

Когда что использовать

Set — для большинства случаев

// ✅ Просто и быстро
const arr = [1, 2, 2, 3, 3, 4];
const unique = [...new Set(arr)];

filter + indexOf — для совместимости

// ✅ Работает везде, даже в старых браузерах
const arr = [1, 2, 2, 3, 3, 4];
const unique = arr.filter((item, index) => arr.indexOf(item) === index);

reduce — когда нужна сложная логика

// ✅ Когда нужно что-то особенное при накоплении
const arr = [1, 2, 2, 3, 3, 4];
const unique = arr.reduce((acc, current) => {
  // Своя логика...
  return acc;
}, []);

Особые случаи

С объектами

// ❌ Set не поможет с объектами
const arr = [{id: 1}, {id: 1}, {id: 2}];
const unique = [...new Set(arr)]; // Не работает!
 
// ✅ Нужна своя логика
const uniqueObjects = arr.filter((item, index, self) => 
  index === self.findIndex(obj => obj.id === item.id)
);

С null/undefined

// ✅ Работает нормально
const arr = [1, null, undefined, 1, null];
console.log([...new Set(arr)]); // [1, null, undefined]

Частые ошибки

Думать, что Set работает с вложенными объектами

// ❌ Ошибка
const arr = [[1, 2], [1, 2], [3, 4]];
const unique = [...new Set(arr)]; // Не уберёт дубликаты!
 
// ✅ Правильно — преобразовать в строки
const uniqueArrays = [...new Set(arr.map(JSON.stringify))].map(JSON.parse);

Использовать неэффективные способы

// ❌ Медленно для больших массивов
const arr = [/* большой массив */];
arr.filter(item => arr.indexOf(item) === arr.lastIndexOf(item)); // Очень медленно!
 
// ✅ Быстро
const unique = [...new Set(arr)];

Простые правила

  1. Set — самый быстрый и простой способ 🆕
  2. filter + indexOf — классический, но медленный 📚
  3. reduce — гибкий, но сложный 🔧
  4. Set с объектами — не работает как ожидается ⚠️
  5. Производительность — Set быстрее для больших массивов ⚡

Знание разных способов нахождения уникальных значений помогает выбрать правильный инструмент! 💪


Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪