Зачем использовать Set?

Это структура данных, которая позволяет хранить уникальные значения любого типа. Она похожа на массив, но не допускает дубликатов. Это отличный способ хранить уникальные значения любого рода. Иногда вы хотите хранить уникальные значения в массиве, но не хотите перебирать массив, чтобы проверить, существует ли уже значение. Именно здесь Set оказывается очень кстати.

В предыдущей статье мы обсуждали Javascript Map. Set похож на Map, но хранит только ключи, а не значения. Это отличный способ хранить уникальные значения любого типа. В некоторых случаях использовать Map неудобно. Именно поэтому давайте поговорим о Set.

Что такое JavaScript Set?

Объекты Set — это коллекции значений. Значение в Set может встречаться только один раз, оно уникально в коллекции Set. Вы можете перебирать элементы Set в порядке вставки. Порядок вставки соответствует порядку, в котором каждый элемент был добавлен в Set методом add() успешно (то есть в Set не было идентичного элемента, когда Set вызывал add()).

Спецификация требует, чтобы наборы реализовывались "так, чтобы в среднем обеспечивать время доступа, которое является сублинейным по количеству элементов в коллекции". Таким образом, он может быть представлен внутренне как хэш-таблица (с O(1) поиском), дерево поиска (с O(log(N)) поиском) или любую другую структуру данных, пока сложность лучше, чем O(N).

Как создать Set?

Существует два способа создания Set. Первый способ — использовать конструктор Set. Второй способ — использовать литерал объекта Set.

Конструктор Set

Конструктор Set создает новый объект Set. Вы можете передать итерируемый объект в качестве аргумента конструктору. Элементы итерируемого объекта будут добавлены в новый Set.

const set = new Set([1, 2, 3, 4, 5])

Литерал объекта Set

Литерал объекта Set создает новый объект Set. Вы можете передать итерируемый объект в качестве аргумента литералу объекта. Элементы итерируемого объекта будут добавлены в новый Set.

const set = {1, 2, 3, 4, 5};

Методы и свойство Set

Метод	Описание
add()	Добавляет новый элемент с заданным значением в объект Set.
clear()	Удаляет все элементы из объекта Set.
delete()	Удаляет элемент, связанный со значением, и возвращает значение, которое Set.prototype.has(value) ранее возвращал бы. Set.prototype.has(value) после этого будет возвращать false.
entries()	Возвращает новый объект Iterator, содержащий массив [value, value] для каждого элемента в объекте Set в порядке вставки.
forEach()	Выполняет предоставленную функцию один раз для каждого значения в объекте Set в порядке вставки.
has()	Возвращает логическое значение, утверждающее, присутствует ли элемент с данным значением в объекте Set.
keys()	Возвращает новый объект Iterator, содержащий значения для каждого элемента в объекте Set в порядке вставки.
values()	Возвращает новый объект Iterator, содержащий значения для каждого элемента в объекте Set в порядке вставки.

Свойство	Описание
size	Возвращает количество значений в объекте Set.

Примеры Set

Добавление значения в Set

const set = new Set([1, 2, 3, 4, 5])
set.add(6)
console.log(Set) // Set { 1, 2, 3, 4, 5, 6 }

Удаление значения из Set

const set = new Set([1, 2, 3, 4, 5])
set.delete(3)
console.log(set) // Set { 1, 2, 4, 5 }

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

const set = new Set([1, 2, 3, 4, 5])
console.log(set.has(3)) // true

Итерация по Set

const set = new Set([1, 2, 3, 4, 5])
for (const item of Set) {
  console.log(item)
}
// 1
// 2
// 3
// 4
// 5

Преобразование Set в массив

const set = new Set([1, 2, 3, 4, 5])
const array = Array.from(set)
console.log(array) // [1, 2, 3, 4, 5]

Преобразование массива в Set

const Array = [1, 2, 3, 4, 5]
const set = new Set(array)
console.log(Set) // Set { 1, 2, 3, 4, 5 }

Получение размера Set

const set = new Set([1, 2, 3, 4, 5])
console.log(set.size) // 5

Очистка Set

const set = new Set([1, 2, 3, 4, 5])
set.clear()
console.log(set) // Set {}

Слияние Set

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([6, 7, 8, 9, 10])
const set3 = new Set([...set1, ...set2])
console.log(set3) // Set { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 }

Получение пересечения двух Set

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5, 6, 7, 8])
const set3 = new Set([...set1].filter((x) => set2.has(x)))
console.log(set3) // Set { 4, 5 }

Получение разности двух Set

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5, 6, 7, 8])
const set3 = new Set([...set1].filter((x) => !set2.has(x)))
console.log(set3) // Set { 1, 2, 3 }

Проверка, является ли Set подмножеством другого Set

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5])
console.log([...set2].every((x) => set1.has(x))) // true

Проверка, является ли Set надмножеством другого Set

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5])
console.log([...set1].every((x) => set2.has(x))) // false

Проверка, являются ли два Set непересекающимися

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([6, 7, 8, 9, 10])
console.log([...set1].every((x) => !set2.has(x))) // true

Проверка, равны ли два Set

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([1, 2, 3, 4, 5])
console.log(set1.size === set2.size && [...set1].every((x) => set2.has(x))) // true

Поддержка браузерами

Chrome	Firefox	Edge	Safari	Opera
49+	44+	12+	10.1+	36+

Set vs. Array

Set	Array
Уникальное значение, не допускает дубликатов	Допускает дубликаты значений
Set — это коллекция значений без определенного порядка	Array — это коллекция значений в определенном порядке
Set итерируемый	Array итерируемый
Set медленнее массива при инициализации, так как использует хэш-процесс.	Array быстрее в плане инициализации
Производительность выше при проверке существования элемента	Производительность выше при доступе к элементу

Эта статья была изначально опубликована на blog.imam.dev.

Множества JavaScript: основы для начинающих разработчиков