Розуміння множин у JavaScript

Автор

В ES6 JavaScript з’явилися нові структури даних – множини (Sets). Розглянемо їх детальніше.

Які особливості множин?

Як їх застосовувати в JavaScript?

Які методи вони пропонують для розв’язання різних задач?

Знайдемо відповіді на ці питання в даній статті.

Множини

З назви зрозуміло, що множина – це колекція унікальних елементів. Вона не зберігає дублікати.

В JavaScript множини зберігають елементи у порядку їх додавання. Це означає, що вони впорядковані. Множини можуть зберігати як примітивні типи даних, так і об’єкти.

Розглянемо синтаксис створення множин в JavaScript.

Для практики вам знадобиться IDE.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);
console.log(names);

const randomWord = new Set("Hiiiiiii");
console.log(randomWord);

const numbers = new Set([5, 5, 5, 2, 1, 1, 2, 3]);
console.log(numbers);

Властивості та методи

Множини мають різні властивості та методи для ефективної роботи з ними. Назви методів досить інтуїтивні, що спрощує їх використання. Розглянемо їх детальніше.

Розмір

Властивість `size` повертає кількість елементів у множині.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);
console.log(`Розмір: ${names.size}`);

Додати

Метод `add` додає новий елемент до множини. Якщо елемент вже існує, він не буде доданий повторно.

// порожня множина
const names = new Set();

names.add("John");
names.add("Harry");
names.add("Wick");
names.add("Jack");
names.add("Harry");

console.log(names);

Має

Метод `has` приймає один аргумент і повертає `true`, якщо елемент присутній в множині, інакше повертає `false`.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

console.log(names.has("Harry"));
console.log(names.has("Alley"));

Видалити

Метод `delete` приймає аргумент і видаляє відповідний елемент з множини. Якщо елемент не існує, помилка не виникає.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

names.delete("John");

console.log(names);

Записи

Метод `entries` повертає ітератор, що містить масиви пар ключ-значення, де ключ і значення ідентичні, у порядку додавання.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

const entries = names.entries();

console.log(entries.next().value);
console.log(entries.next().value);
console.log(entries.next().value);
console.log(entries.next().value);
console.log(entries.next().value);

Ключі

Метод `keys` повертає ітератор елементів множини у порядку їх додавання.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

const keys = names.keys();

console.log(keys.next().value);
console.log(keys.next().value);
console.log(keys.next().value);
console.log(keys.next().value);
console.log(keys.next().value);

Значення

Метод `values` повертає ітератор елементів множини у порядку додавання, подібно до методу `keys`.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

const values = names.values();

console.log(values.next().value);
console.log(values.next().value);
console.log(values.next().value);
console.log(values.next().value);
console.log(values.next().value);

Очистити

Метод `clear` видаляє всі елементи з множини.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

names.clear();

console.log(names);

Для кожного

Метод `forEach` дозволяє ітеруватись по множині та обробляти кожен елемент.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

names.forEach((element) => {
    console.log(element);
});

Практичний приклад

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

Ось як це можна реалізувати:

  • Створюємо масив з дублікатами.
  • Ініціалізуємо порожню множину.
  • Проходимось по масиву:
    • Додаємо кожен елемент до множини.
    • Дублікати автоматично не додаються.
  • Створюємо порожній масив.
  • Проходимось по множині та додаємо елементи до нового масиву.
  • Виводимо новий масив без дублікатів.

Спробуйте реалізувати це самостійно. Якщо виникнуть труднощі, погляньте на рішення нижче.

const arr = ["John", "Harry", "Wick", "Jack", "Harry"];

const temp = new Set();

arr.forEach((element) => {
    temp.add(element);
});

const newArr = [];

temp.forEach((element) => {
    newArr.push(element);
});

console.log(newArr);

Висновок

Тепер ви знаєте все необхідне для роботи з множинами в JavaScript. Використовуйте їх у своїх проектах. Насолоджуйтесь процесом кодування 👨‍💻