Привет всем! Я Кирилл Мыльников, frontend разработчик компании Usetech. Сегодня хочу поделиться информацией о новых методах, которые скоро появятся в коллекции Set в JavaScript.

Set был добавлен в стандарте ES2015, но всегда казался немного ограниченным. Работать с ним можно было только через добавление, удаление и проверку наличия элементов. Однако, при работе с несколькими коллекциями или сравнении их, приходилось писать дополнительные функции. Но теперь нам готовят новые методы, которые значительно упростят работу с Set и позволят избежать необходимости придумывать свои функции.

Давайте вместе погрузимся в мир Set и вспомним, что это такое, какие методы доступны на данный момент и какие новые методы могли бы появиться в следующей спецификации. Мы рассмотрим все на практических примерах.

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

Основные методы:

• add(value) - добавляет значение в коллекцию (если оно уже существует, то ничего не делает)

• delete(value) - удаляет значение из коллекции 

• has(value) -  возвращается true, если значение присутствует в коллекции, иначе false

• clear() - удаляет все значения в коллекции

• size - возвращает количество элементов в коллекции

Давайте теперь все эти методы разберем на практике.

Создадим коллекцию new Set()

const fruits = new Set(["orange", "apple", "banana"]);

Теперь давайте с помощью свойство add добавим новые значение:

fruits.add("grape")fruits.add("apple")

Обратите внимание на свойство  “apple” которое уже есть в коллекции. В данном случае оно проигнорируется  и это можно проверить с помощью метода size.

fruits.size //результат будет - 4, а не 5

Можем теперь проверить присутствует ли элемент в коллекции с помощью метода has(value)

fruits.has("orange") // результат true

Теперь удалим элемент, выведем размер коллекции и сразу же разберемся с методом clear(), который удаляет все значения:

fruits.delete("orange")
fruits.size //результат будет - 3
fruits.clear()
fruits.size //результат будет - 0

Какие новые методы ждать в коллекции Set?

Вот мы и подошли к самому главному. К вашему вниманию представляются новые методы:

• union(other)

• intersection(other) 

• difference(other) 

• symmetricDifference(other)

• isSubsetOf(other)

• isSupersetOf(other)

• isDisjointFrom(other)

union - Принимает и возвращает новую коллекцию, которая содержит элементы, присутствующие в одной или обеих из исходных коллекций.

Пример:

const evens = new Set([1, 2, 3, 4]);
const squares = new Set([1, 5, 3, 6]);
evens.union(squares); // Set(6) { 1, 2, 3, 4, 5, 6 }  

intersection - Принимает и возвращает новую коллекцию, которая содержит только те элементы, которые присутствуют в обеих исходных коллекциях.

Пример:

const evens = new Set([1, 2, 3, 4]);
const squares = new Set([1, 5, 3, 6]);
evens.intersection(squares); // Set(6) { 1, 3 }

difference - Получаем разницу между первой и второй коллекцией и наоборот, отсекая повторяющиеся значения.

Пример:

const frontend = new Set(["JavaScript", "HTML", "CSS"]);
const backend = new Set(["Python", "Java", "JavaScript"]);
const onlyFrontEnd = frontend.difference(backend);// => Set {"HTML", "CSS"}
const onlyBackEnd = backend.difference(frontend);// => Set {"Python", "Java"}

symmetricDifference - Принимает и возвращает новую коллекцию, содержащую элементы, которые присутствуют либо в первой коллекции, либо во второй, но не в обоих одновременно.

Пример:

const frontend = new Set(["JavaScript", "HTML", "CSS"]);
const backend = new Set(["Python", "Java", "JavaScript", "PHP"]);
const onlyFrontend = frontend.symmetricDifference(backend);
// => Set {"HTML", "CSS", "Python", "Java", "PHP"}
const onlyBackend = backend.symmetricDifference(frontend);
// => Set {"Python", "Java", "PHP", "HTML", "CSS" }

isSubsetOf - Принимает коллекцию и возвращает логическое значение  в зависимости от того, все ли элементы первой коллекции присутствуют во второй.

Пример:

const frontendAll = new Set(["JavaScript", "HTML", "CSS", "React"]);
const frontedBase = new Set(["HTML", "CSS"]);
frontedBase.isSubsetOf(frontendAll);// => true
frontendAll.isSubsetOf(frontedBase);// => false

isSupersetOf - Принимает коллекцию и возвращает логическое значение в зависимости от того, все ли элементы второй коллекции присутствуют в первой.

Пример:

const frontendAll = new Set(["JavaScript", "HTML", "CSS", "React"]);
const frontedBase = new Set(["HTML", "CSS"]);
frontedBase.isSupersetOf(frontendAll);// => false
frontendAll.isSupersetOf(frontedBase);// => true

isDisjointFrom - Принимает коллекцию и возвращает логическое значение в зависимости от наличия пересечений между коллекциями.

Пример:

const frontendLanguage = new Set(["JavaScript", "HTML", "CSS", "React"]);
const backendLanguage = new Set(["Java", "PHP", "JavaScript", "Ruby"]);
const compiledLanguage = new Set(["Java", "С++", "Go"]);
compiledLanguage.isDisjointFrom(frontendLanguage);// => true
backendLanguage.isDisjointFrom(frontendLanguage);// => false

Как видим что между compiledLanguage и frontendLanguage нет пересечений возвращаем true, в противном случае false.

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

Поддержка:

На данный момент эти методы работают в Chrome 122 и Safari 17. Мы надеемся, что они будут добавлены в ES2024.

Материалы:

Learn JS 

MDN 

GitHub