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

Узнайте о грядущих обновлениях Set в JavaScript, включая новые методы union, intersection, difference и другие. Подробный обзор и примеры использования.

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

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

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

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

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

• add(value) – добавляет значение в коллекцию (если оно уже существует, то ничего не делает)
• delete(value) – удаляет значение из коллекции
• has(value) - возвращается true, если значение присутствует в коллекции, иначе false
• clear() – удаляет все значения в коллекции
• size – возвращает количество элементов в коллекции

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

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

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

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

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

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

👨‍💻🎨 Библиотека фронтендера

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»

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

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

• union(other)
• intersection(other)
• difference(other)
• symmetricDifference(other)
• isSubsetOf(other)
• isSupersetOf(other)
• isDisjointFrom(other)

Метод union

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

Пример

Метод intersection

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

Пример

Метод difference

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

Пример

Метод symmetricDifference

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

Пример

Статья по теме

Хватит использовать массивы! Как JavaScript Set ускоряет код

Метод isSubsetOf

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

Пример

Метод isSupersetOf

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

Пример

Метод isDisjointFrom

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

Пример

Между 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

***

Вакансии по фронтенду

Вакансии по фронтенду, джаваскрипт, React, Angular, Vue @jsdevjob