Привет всем! Я Кирилл Мыльников, 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.
Материалы:
Комментарии (10)
artptr86
19.06.2024 07:32+1о новых методах, которые скоро появятся в коллекции Set
Мы надеемся, что они будут добавлены в ES2024
Я вас разочарую, но эти методы в ES2024 не появятся, потому что они были добавлены в ES2025.
vvshard
19.06.2024 07:32+2На данный момент эти методы работают в Chrome 122 и Safari 17.
И ещё в Firefox 127
Keeper10
Давно пора! И 10 лет не прошло.