Колекція Set у JavaScript

JavaScriptJunior~2 хв читання

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. Вийде {}; перед серіалізацією перетворіть колекцію на масив.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.