🛠️ Set в JavaScript: теперь с новыми суперспособностями

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

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

Что такое set в JavaScript?

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

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

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

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

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

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

Пример

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

Метод isSupersetOf

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

Пример

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

Метод isDisjointFrom

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, Firefox 127. Мы надеемся, что они будут добавлены в ES2025.

Материалы:

Learn JS – https://learn.javascript.ru/map-set

MDN – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

GitHub – https://github.com/zloirock/core-js#new-set-methods