Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Колекція Set у JavaScript». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**`Set` це вбудована структура даних JavaScript, яка з'явилася в ES6 і зберігає лише унікальні значення будь-якого типу.** Іншими словами, у `Set` не може бути повторюваних елементів: спроба додати дублікат просто нічого не змінює.

## Теорія

### TL;DR
- `Set` це колекція унікальних значень, дублікати ігноруються.
- Методи: `add`, `has`, `delete`, `clear`; розмір дає `size`.
- Порядок вставки зберігається, колекція ітерована.
- `set.has(x)` працює за O(1), на відміну від `arr.includes(x)` з O(n).
- Індексів у `Set` немає, `set[0]` нічого не поверне.
- Класичний прийом: `[...new Set(arr)]` прибирає дублікати з масиву.

### Швидкий приклад

```javascript
const set = new Set();

set.add(1);
set.add(2);
set.add(2); // дублікат, не додасться
set.add('hello');

console.log(set);      // Set(3) {1, 2, 'hello'}
console.log(set.size); // 3
```

### Основні методи

| Метод / властивість | Що робить | Приклад |
| --- | --- | --- |
| `add(value)` | Додає елемент | `set.add(10)` |
| `has(value)` | Перевіряє наявність | `set.has(10)` повертає `true` |
| `delete(value)` | Видаляє елемент | `set.delete(10)` |
| `clear()` | Очищає `Set` | `set.clear()` |
| `size` | Кількість елементів | `set.size` |

`add()` повертає сам `Set`, тому виклики можна зв'язувати: `set.add(1).add(2)`.

### Перебір Set

```javascript
const set = new Set(['a', 'b', 'c']);

for (const value of set) {
  console.log(value);
}
// a
// b
// c

set.forEach(v => console.log(v)); // те саме
```

У `forEach` колбек отримує `(value, value, set)`: другий аргумент дублює перший, бо ключів у `Set` немає.

### Практичні прийоми

Видалення дублікатів з масиву:

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

console.log(unique); // [1, 2, 3, 4]
```

Це дуже частий і практичний прийом: `new Set()` плюс spread `...` дорівнює «прибрати дублікати».

Перетин множин:

```javascript
const a = new Set([1, 2, 3]);
const b = new Set([2, 3, 4]);

const intersection = new Set([...a].filter(x => b.has(x)));
console.log(intersection); // Set(2) {2, 3}
```

Різниця множин:

```javascript
const difference = new Set([...a].filter(x => !b.has(x)));
console.log(difference); // Set(1) {1}
```

### Чим Set відрізняється від масиву

| Особливість | `Array` | `Set` |
| --- | --- | --- |
| Дублікати | Дозволені | Заборонені |
| Порядок | Упорядкований | Упорядкований (за вставкою) |
| Перевірка наявності | `arr.includes(x)` за O(n) | `set.has(x)` за O(1) |
| Видалення елемента | Повільно (`splice`) | Швидко (`delete()`) |
| Індексація | Є (`arr[0]`) | Немає |
| Розмір | `arr.length` | `set.size` |
| Перебір | `for`, `forEach`, `map` | `for...of`, `forEach` |

### Коли використовувати Set

Беріть `Set`, якщо:

- потрібно зберігати **лише унікальні значення**;
- важливо **швидко перевіряти наявність** елементів;
- індексація не потрібна, позиції не мають значення;
- треба легко **видаляти або очищати** елементи.

Коротко:

| Що | Опис |
| --- | --- |
| **Тип** | Колекція унікальних значень |
| **Ключові методи** | `.add()`, `.has()`, `.delete()`, `.clear()` |
| **Розмір** | `size` |
| **Перетворення в масив** | `[...set]` |
| **Головна відмінність від масиву** | Тільки унікальні елементи та швидкий пошук |

### Типові помилки

- **Чекати, що `Set` прибере дублікати об'єктів.** Унікальність визначається за посиланням, тому два однакові за вмістом літерали `{ id: 1 }` залишаться двома різними елементами.
- **Звертатися за індексом.** `set[0]` поверне `undefined`; щоб дістати елемент за позицією, спершу перетворіть колекцію на масив: `[...set][0]`.
- **Плутати `size` і `length`.** У `Set` є тільки `size`, і це властивість, а не метод.
- **Викликати методи масиву напряму.** `set.map(...)` і `set.filter(...)` не існують; спочатку `[...set].map(...)`.
- **Забувати про `NaN` і `-0`.** `Set` вважає `NaN` рівним `NaN`, тому додасться лише один такий елемент, а `-0` і `0` зберігаються як одне значення.
- **Серіалізувати `Set` через `JSON.stringify`.** Вийде `{}`; перед серіалізацією перетворіть колекцію на масив.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати604 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.