Объект Set предназначен для хранения уникальных значений любого типа. В отличие от коллекции Map он не содержит пар ключ-значение, но при этом тоже является итерируемым объектом. То есть он приближается к массивам, хотя и не является массивом в реальности.
Создание экземпляра объекта Set
Для создания экземпляра объекта Set нужно использовать констркутор. Можно создать пустой объект, который не содержит никаких значений и заполнить его потом с помощью метода add() или передать массив со всеми его значениями.
Например:
| 1 2 3 4 5 6 7 8 | const mySet = new Set(); mySet.add(23); mySet.add(12); console.log(mySet); //23, 12 const myArr = [23, 12, 34, 2, 15, 23, 80, 12]; const set2 = new Set(myArr); console.log(set2); // 23, 12, 34, 2, 15, 80 |
Как видно из второго примера, в set2 попали только те значения из массива, которые не повторяются.
Свойства и методы Set
set.size– возвращает количество элементов в экземпляре Set.set.add(value)– добавляет уникальное значение либо ничего не делает, если такое уже есть, и возвращает тот же объектset.set.delete(value)– удаляет указанное вvalueзначение, возвращаетtrue, еслиvalueбыло в множестве на момент вызова, иначеfalse.set.has(value)– возвращаетtrue, если значение присутствует в множестве, иfalse, если оно отсутствует.set.clear()– удаляет все имеющиеся значения, очищая экземпляр Set.
Давайте посмотрим, как использовать объекты типа Set.
Использование Set для удаления повторяющихся элементов массива
Поскольку в Set могут существовать только уникальные значения, то мы можем воспользоваться им в момент создания нового массива из старого путем деструктуризации, если в конечный массив должны попасть только уникальные значения.
| 1 2 3 | const numArray = [12, -1, 19, 20, 5, 12, 5, -3, 19, 12]; const uniqueNumArray = [...new Set(numArray )]; console.log( uniqueNumArray ); // [12, -1, 19, 20, 5, -3] |
Объединение двух массивов
В том случае, если нужно получить из двух массивов один, причем с неповторяющимися значениями - это как раз задача для Set + деструктуризация массива.
| 1 2 3 4 | let arrA = [1, 4, 3, 2, 7]; let arrB = [5, 2, 6, 7, 1]; arrA = [...new Set([...arrA, ...arrB])]; console.log(arrA); //[1, 4, 3, 2, 7, 5, 6] |
Создание полигонов в SVG на основе Set
В примере ниже мы будем генерировать с помощью Set координаты для создания многоугольников в SVG. Поскольку Set является итерируемым объектом, но доступа к его индексам мы не имеем, при переборе этого объекта методом forEach() мы добавим переменную i, которая будет нам нужна для формирования координат. В одном случае мы должны разделить координаты запятой (x и y), в другом - поставить пробел перед следующими координатами.
See the Pen new Set for Poligons by Elen (@ambassador) on CodePen.
Пример с вводом слов
Здесь нужно ввести слова, которые начинаются на определенную букву. Если вводить много, то велика вероятность повтора. Поэтому скрипт покажет повторяющиеся слова и выведет при клике на кнопку список уникальных слов.
See the Pen Untitled by Elen (@ambassador)on CodePen.
Пример реализации аниации фигур на основе threejs
Используем Set для хранения данных фигур, coplfdftvs[ с помощью treejs.
See the Pen Wire together fire together by Dulini Mendis (@DuliniM) on CodePen.
