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

Question

Ivan Gagarinov · Accepted Answer

Чтобы получить из массива уникальные значения, можно воспользоваться простым алгоритмом:
1. Инициируем простой массив, в который будем складывать результат
2. Проходимся по исходному массиву и на каждой итерации проверяем, если в результате еще нет текущего элемента, то добавляем его в результат.

Для реализации можно использовать либо цикл, либо встроенные методы для перебора массива, например `reduce`:
```javascript
const items = ['item1', 'item2', 'item1', 'item3', 'item2', 'item4'];
const result = items.reduce((acc, item) => {
  if (acc.includes(item)) {
    return acc; // если значение уже есть, то просто возвращаем аккумулятор
  }
  return [...acc, item]; // добавляем к аккумулятору и возвращаем новый аккумулятор
}, []);
console.log(result); // => ['item1', 'item2', 'item3', 'item4']
```

Виктория Аблаева · Answer

Чтобы оставить в массиве только уникальные значения, воспользуемся таким лайфхаком:

```javascript
const names = ['Karina', 'Ilona', 'Petr', 'Maks', 'Ilona', 'Maks'];
const uniqueNames = new Set(names); // создаём коллекцию уникальных значений
console.log(Array.from(uniqueNames)); // => [ 'Karina', 'Ilona', 'Petr', 'Maks' ]
// преобразуем в массив
```

#### Документация:
[Set](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Set)

Кирилл Маркеев · Answer

Чтобы оставить в массиве только уникальные значения, можно воспользоваться методами `filter()` и `indexOf()`: 

```javascript
const array = [1, 2, 1, 2, 3, 4, 5, 2, 4, 1, 1, 6];

const getUnique = (arr) => {
  return arr.filter((el, ind) => ind === arr.indexOf(el));
};

console.log(getUnique(array)); // => [ 1, 2, 3, 4, 5, 6 ]
```

Принцип работы заключается в том, что мы сравниваем индекс текущего элемента массива (`ind`) с индексом **первого** вхождения этого элемента в массив (`arr.indexOf(el)`). И если они не равны, то это означает, что вхождение данного элемента в массив является _не первым_, то есть элемент ранее уже встречался в массиве.

Person · Answer

По сути как первое решение, но чуть усовершенствованное.
Работает на ВСЕХ типах, включая объекты и функции (но кроме null/false/undefined)

```
const options = [
	'Раз',
	2,
	3,
	true,
	(a, b) => a + b,
	4,
	'Раз',
	56,
	{ a: 1, b: 0 },
	3,
	2,
	(a, b) => a + b,
	'Раз',
	{ a: 1, b: 0 },
	1,
	false,
	false,
	true,
	(a, b) => a + b,
];


const getUniqueOptions = (options) => {
	return options.reduce(
		(res, cur) =>
			res.find((find) => JSON.stringify(find) === JSON.stringify(cur))
				? res
				: [...res, cur],
		[]
	).sort((a, b) => a - b); // и сортировочка для красоты :)
};

console.log(getUniqueOptions(options)); // ['Раз', 2, 3, true, ƒ, 4, 56, {…}, 1, false, false]
```

Виталий Меншиков · Answer

```
console.log(Array.from(new Set([1, 2, 1, 2, 3, 4, 5, 2, 4, 1, 1, 6]))) 
// [ 1, 2, 3, 4, 5, 6 ]
```

Никита Вихров · Answer

Уникальные значения массива оставляет `Set` — коллекция, которая хранит каждое значение один раз:

```javascript
const numbers = [1, 2, 2, 3, 1, 4];
const unique = [...new Set(numbers)];
console.log(unique); // => [1, 2, 3, 4]
```

Порядок сохраняется: каждое значение остаётся на месте первого появления. То же самое: `Array.from(new Set(numbers))`.

## Через `filter`

```javascript
const unique = numbers.filter((n, i) => numbers.indexOf(n) === i);
```

Элемент остаётся, если его первое вхождение совпадает с текущей позицией. На больших массивах способ медленный: `indexOf` каждый раз проходит массив сначала. На массиве из десятков тысяч элементов разница с `Set` заметна.

## Массив объектов

`Set` сравнивает объекты по ссылке, и два объекта с одинаковыми полями для него разные:

```javascript
console.log(new Set([{ id: 1 }, { id: 1 }]).size); // => 2
```

Уникальные по полю `id` — через `Map`:

```javascript
const users = [
  { id: 1, name: 'Анна' },
  { id: 2, name: 'Олег' },
  { id: 1, name: 'Анна' },
];

const uniqueUsers = [...new Map(users.map((u) => [u.id, u])).values()];
console.log(uniqueUsers.length); // => 2
```

Если `id` повторяется, в результате останется последний объект с этим `id`.

## Без учёта регистра

```javascript
const tags = ['JS', 'js', 'Python'];
const seen = new Set();
const uniqueTags = tags.filter((t) => {
  const key = t.toLowerCase();
  if (seen.has(key)) return false;
  seen.add(key);
  return true;
});
console.log(uniqueTags); // => ['JS', 'Python']
```

## Только значения, которые встречаются один раз

Обратная задача — убрать всё, что повторяется:

```javascript
const once = numbers.filter((n) => numbers.indexOf(n) === numbers.lastIndexOf(n));
console.log(once); // => [3, 4]
```

## `NaN`

`Set` считает `NaN` равным `NaN`, а `indexOf` — нет. Поэтому `filter` с `indexOf` удалит из массива все `NaN`.

Коллекции и методы массивов разбирают в бесплатном курсе [«Основы JavaScript»](https://ru.hexlet.io/programs/javascript-basics-free).

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

Ответы

Документация:

Через `filter`

Массив объектов

Без учёта регистра

Только значения, которые встречаются один раз

`NaN`

Каталог

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

Ответы

Документация:

Через filter

Массив объектов

Без учёта регистра

Только значения, которые встречаются один раз

NaN

Каталог

Через `filter`

`NaN`