<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Удаление дубликатов в массиве JavaScript: лучшие способы и примеры]]></title><description><![CDATA[<p dir="auto">Дубликаты в массивах мешают при обработке данных в JavaScript. Они появляются при сборе информации из API или пользовательского ввода. Удаление повторов упрощает код и ускоряет работу приложений.</p>
<p dir="auto">В этой статье разберем основные методы удаления дубликатов. Покажем примеры для простых массивов и объектов. Вы узнаете, как выбрать подходящий подход для вашей задачи.</p>
<h2>Итеративный подход к удалению дубликатов</h2>
<p dir="auto">Итеративный метод подразумевает проход по массиву с проверкой каждого элемента на наличие в результирующем списке. Это базовый способ, который работает без современных фич JavaScript. Он понятен новичкам и не зависит от окружения.</p>
<p dir="auto">Рассмотрим массив чисел [1, 1, 2, 3, 4, 5, 4, 1]. При первом проходе добавляем 1 в новый массив. При втором встречаем 1 снова - пропускаем. В итоге получаем [1, 2, 3, 4, 5]. Такой подход прост, но <strong>O(n²)</strong> по времени из-за includes().</p>
<p dir="auto">Вот базовая реализация:</p>
<pre><code class="language-javascript">function removeDuplicates(arr) {
  const uniqueArr = [];
  for (let i = 0; i &lt; arr.length; i++) {
    if (!uniqueArr.includes(arr[i])) {
      uniqueArr.push(arr[i]);
    }
  }
  return uniqueArr;
}

console.log(removeDuplicates([1, 1, 2, 3, 4, 5, 4, 1])); // [1, 2, 3, 4, 5]
</code></pre>
<ul>
<li><strong>Плюсы</strong>: Легко понять, работает везде.</li>
<li><em>Минусы</em>: Медленно на больших массивах из-за includes().</li>
<li>Подходит для обучения или старых браузеров.</li>
</ul>
<h2>Самый быстрый способ: Set в JavaScript</h2>
<p dir="auto"><strong>Set</strong> - это встроенный объект, который хранит только уникальные значения. Конструктор new Set(arr) автоматически удаляет дубликаты. Затем преобразуем обратно в массив через spread-оператор […new Set(arr)].</p>
<p dir="auto">Это решение работает за <strong>O(n)</strong> и является самым быстрым. Пример: из [‘a’, ‘b’, ‘a’, ‘c’, ‘b’] получаем [‘a’, ‘b’, ‘c’]. Set не меняет исходный массив - всегда возвращает новый.</p>
<p dir="auto">Код минималистичен:</p>
<pre><code class="language-javascript">function removeDuplicates(arr) {
  return [...new Set(arr)];
}

console.log(removeDuplicates([1, 2, 2, 3, 4, 4, 5])); // [1, 2, 3, 4, 5]
console.log(removeDuplicates(['a', 'b', 'a', 'c', 'b'])); // ['a', 'b', 'c']
</code></pre>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Метод</th>
<th>Сложность</th>
<th>Подходит для</th>
</tr>
</thead>
<tbody>
<tr>
<td>Set</td>
<td>O(n)</td>
<td>Примитивы</td>
</tr>
<tr>
<td>Цикл</td>
<td>O(n²)</td>
<td>Малые данные</td>
</tr>
</tbody>
</table>
<ul>
<li>Работает только с примитивными типами (числа, строки).</li>
<li><em>Исключает NaN</em> - Set считает все NaN разными.</li>
<li>Идеален для 90% случаев.</li>
</ul>
<h3>Удаление дубликатов из массива объектов</h3>
<p dir="auto">Для объектов Set не сработает напрямую - сравнивает по ссылке. Нужно фильтровать по ключу, например id. Используем filter() с findIndex().</p>
<p dir="auto">Возьмем [{id: 1}, {id: 2}, {id: 1}]. Фильтр оставляет первое вхождение каждого id. Логика: текущий индекс == индекс первого совпадения по id.</p>
<pre><code class="language-javascript">const items = [{ id: 1, name: 'A' }, { id: 2, name: 'B' }, { id: 1, name: 'C' }];

const unique = items.filter((obj, idx, arr) =&gt; 
  idx === arr.findIndex(t =&gt; t.id === obj.id)
);

console.log(unique); // [{ id: 1, name: 'A' }, { id: 2, name: 'B' }]
</code></pre>
<ul>
<li><strong>findIndex()</strong> ищет первое совпадение.</li>
<li><em>Сохраняет первый объект</em>, удаляет последующие.</li>
<li>Для нескольких ключей создайте функцию сравнения.</li>
</ul>
<h2>Методы filter и reduce для гибкости</h2>
<p dir="auto">Метод filter() с indexOf() проверяет первое вхождение элемента. Это альтернатива циклу, но тоже <strong>O(n²)</strong>. Подходит, когда Set не годится.</p>
<p dir="auto">Пример с reduce(): аккумулируем уникальные элементы, проверяя includes(). Более функциональный стиль, но медленнее Set.</p>
<p dir="auto">Filter-реализация:</p>
<pre><code class="language-javascript">function removeDuplicates(arr) {
  return arr.filter((item, index) =&gt; arr.indexOf(item) === index);
}
</code></pre>
<p dir="auto">Reduce-вариант:</p>
<pre><code class="language-javascript">const uniqueLetters = ['a','a','b','c'].reduce((result, letter) =&gt; 
  result.includes(letter) ? result : [...result, letter], 
  []
);
</code></pre>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Метод</th>
<th>Сложность</th>
<th>Когда использовать</th>
</tr>
</thead>
<tbody>
<tr>
<td>filter</td>
<td>O(n²)</td>
<td>Нет Set в окружении</td>
</tr>
<tr>
<td>reduce</td>
<td>O(n²)</td>
<td>Функциональный стиль</td>
</tr>
<tr>
<td>Set</td>
<td>O(n)</td>
<td>Стандартный случай</td>
</tr>
</tbody>
</table>
<ul>
<li>filter создает новый массив.</li>
<li><em>reduce гибче</em> для сложной логики.</li>
<li>Избегайте на больших данных.</li>
</ul>
<h2>Продвинутые техники и оптимизации</h2>
<p dir="auto">Для массивов объектов по нескольким полям напишите isPropValuesEqual(). Сортировка + reduce ускоряет на повторяющихся id. Объект как хэш-таблица для примитивов.</p>
<p dir="auto">Пример с объектами по двум ключам:</p>
<pre><code class="language-javascript">function isPropValuesEqual(obj1, obj2, props) {
  return props.every(prop =&gt; obj1[prop] === obj2[prop]);
}

const unique = items.filter((obj, idx, arr) =&gt; 
  idx === arr.findIndex(t =&gt; isPropValuesEqual(t, obj, ['name', 'place']))
);
</code></pre>
<ul>
<li>Сортировка: O(n log n) + reduce.</li>
<li><em>Хэш-объект</em>: obj[value] = true для уникальности.</li>
<li>Тестируйте производительность на ваших данных.</li>
</ul>
<h2>Баланс скорости и читаемости кода</h2>
<p dir="auto">Set - лидер по скорости для простых случаев, но требует ES6. Для объектов комбинируйте filter с findIndex. Итеративные методы надежны в legacy-проектах.</p>
<p dir="auto">Выбор зависит от данных: примитивы - Set, объекты - кастомный filter. На больших объемах измеряйте время. Экспериментируйте с reduce для цепочек операций.</p>
]]></description><link>https://forum.exlends.ru/topic/820/udalenie-dublikatov-v-massive-javascript-luchshie-sposoby-i-primery</link><generator>RSS for Node</generator><lastBuildDate>Sat, 17 Oct 2026 03:05:46 GMT</lastBuildDate><atom:link href="https://forum.exlends.ru/topic/820.rss" rel="self" type="application/rss+xml"/><pubDate>Fri, 27 Feb 2026 12:36:48 GMT</pubDate><ttl>60</ttl></channel></rss>