Новые методы появятся в Set JavaScript
Привет всем! Я Кирилл Мыльников, 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 — Принимает и возвращает новую коллекцию, которая содержит элементы, присутствующие в одной или обеих из исходных коллекций.
Пример:
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);// => falseisSupersetOf — Принимает коллекцию и возвращает логическое значение в зависимости от того, все ли элементы второй коллекции присутствуют в первой.
Пример:
const frontendAll = new Set(["JavaScript", "HTML", "CSS", "React"]);
const frontedBase = new Set(["HTML", "CSS"]);
frontedBase.isSupersetOf(frontendAll);// => false
frontendAll.isSupersetOf(frontedBase);// => trueisDisjointFrom — Принимает коллекцию и возвращает логическое значение в зависимости от наличия пересечений между коллекциями.
Пример:
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 — 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
