Що таке Set у JavaScript

У JavaScript об’єкт Set (множина) – це колекція унікальних значень будь-якого типу. Щоб створити новий порожній Set, можна використовувати наступний синтаксис:

let setObject = new Set();

Конструктор Set також може приймати ітерований об’єкт (Iterable об’єкти у JavaScript), в такому разі всі елементи цього об’єкта (без дублікатів) будуть додані до нової множини:

let setObject = new Set(iterableObject);

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

add(value) – додає до множини новий елемент із заданим значенням. Повертає поточний об’єкт Set, тому цей метод можна використовувати в ланцюжку з іншими методами Set.

clear() – видаляє всі елементи з об’єкту Set.

delete(value) – видаляє елемент зі значенням заданим у value.

entries() – повертає новий ітератор, котрий містить пари [value, value] для кожного елемента Set.

forEach(callback [, thisArg]) – викликає функцію зворотного виклику (callback) для кожного з елементів Set, у порядку їх додавання.

has(value) – повертає true, якщо елемент із заданим значенням є у Set, в іншому разі повертає false.

values() – повертає новий ітератор, який містить значення кожного з елементів об’єкту Set, у порядку їх додавання.

keys() – аналогічно методу values(), повертає ітаратор зі значеннями елементів Set.

Далі буде розглянуто деякі приклади роботи з Set у JavaScript.

Створення нового Set

Розглянемо приклад створення нового Set на основі масиву:

let chars = new Set(['a', 'a', 'b', 'c', 'c']);

console.log(chars);
// Set(3) { 'a', 'b', 'c' }

console.log(typeof chars);
// object

console.log(chars instanceof Set);
// true

Всі значення елементів у Set є унікальними, відповідно дублікати елементів наявні у вхідному масиві, відсутні у створеному на його основі Set.

Розмір Set

Щоб отримати кількість елементів, які містить об’єкт Set, використовується його властивість size:

let chars = new Set(['a', 'a', 'b', 'c', 'c']);

console.log(chars.size); // 3

Додавання елементів до Set

Щоб додати елемент до Set, використовується метод add():

let chars = new Set(['a', 'a', 'b', 'c', 'c']);
chars.add('d');

console.log(chars); 
// Set(4) { 'a', 'b', 'c', 'd' }

Оскільки метод add() повертає об’єкт Set, його можна використовувати в ланцюжку:

let chars = new Set(['a', 'a', 'b', 'c', 'c']);
chars.add('d').add('e');

console.log(chars); 
// Set(5) { 'a', 'b', 'c', 'd', 'e' }

Перевірка наявності значення у Set

Перевірити, чи містить множина певний елемент, можна за допомогою методу has():

let chars = new Set(['a', 'a', 'b', 'c', 'c']);

console.log(chars.has('a')); // true
console.log(chars.has('z')); // false

Видалення елементів з Set

Для видалення з Set елемента з заданим значенням, використовується метод delete():

let chars = new Set(['a', 'a', 'b', 'c', 'c']);
let deleted = chars.delete('c');

console.log(deleted); // true
console.log(chars); // Set(2) { 'a', 'b' }

Метод delete() повертає true, якщо елемент успішно видалено.

Для видалення всіх елементів з Set, використовується метод clear():

let chars = new Set(['a', 'a', 'b', 'c', 'c']);
chars.clear();

console.log(chars); 
// Set(0) {}

Перебір елементів Set у JavaScript

Об’єкт Set зберігає порядок додавання своїх елементів, тому при ітерації над його елементами, їх послідовність буде такою самою, як і при додаванні. Приклад перебору елементів Set за допомогою циклу for...of:

let chars = new Set(['a', 'b']);
chars.add('b').add('c').add('d');

for (let char of chars) {
  console.log(char);
}

/*
a
b
c
d
*/

Set також має методи keys(), values() та entries() (так само як і Map). Однак ключі та значення у Set є ідентичними. Наприклад:

let chars = new Set(['a', 'a', 'b', 'c', 'c']);

for (let [key, value] of chars.entries()) {
  console.log(key, value);
}

/*
a a
b b
c c
*/

Виклик callback для кожного елемента Set

При потребі викликати функцію зворотного виклику для кожного елемента Set, можна використати метод forEach():

const names = ['Alice', 'Bob', 'Alice', 'Charlie', 'Bob', 'Dave'];
const uniqueNames = new Set(names);

uniqueNames.forEach((name) => {
  console.log(name.toUpperCase());
});

/*
ALICE
BOB
CHARLIE
DAVE
*/

Мітки: