Как использовать объект Set в JavaScript

Что такое объект Set и как мы можем его использовать?

Когда я впервые начал изучать JavaScript, я прошел множество различных руководств. Одна вещь, с которой я никогда не сталкивался ни в одном из руководств для начинающих, — это объект Set.

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

Представьте себе такую ​​ситуацию: у вас есть массив элементов, и вы хотите удалить дубликаты из массива. Вы можете начать думать, что можете либо отобразить, либо отфильтровать массив. Но быстрый поиск в Google покажет вам, что проще всего это сделать с помощью объекта Set.

В этой статье мы рассмотрим объект Set и посмотрим, как его использовать, на некоторых примерах в JavaScript. К концу статьи у вас должно быть понимание следующего:

• Что такое объект Set?
• Свойства и методы объекта Set
• Разница между массивом и Set

Что такое объект Set?

«Объект Set позволяет хранить уникальные значения любого типа, будь то примитивные значения или ссылки на объекты».

Другими словами, объект Set подобен массиву. Вы можете хранить предметы любого типа. Но вы не можете хранить повторяющиеся значения.

Например, здесь у меня есть массив чисел.

const numbers = [1, 2, 3, 2, 1];

Я могу создать новый Set, передав массив в качестве параметра.

const uniqueNumbers = new Set(numbers);

Если я запишу обе эти переменные в консоль, мы увидим следующий вывод.

console.log(numbers);
console.log(uniqueNumbers);

Как видите, Set имеет только значения, 1, 2, 3, потому что последние 2, 1 являются дубликатами.

Если у вас есть Set и вы хотите превратить его обратно в массив, вы можете просто распространить объект Set внутри массива.

const uniqueNumbersArray = [...uniqueNumbers];

Если я выведу массив uniqueNumbersArray в консоль, мы увидим следующее.

Свойства и методы объекта Set

Объект Set поставляется со следующими свойствами и методами:

• Set.size — свойство size возвращает количество значений в объекте Set.

const numbers = [1, 2, 3, 2, 1];
const uniqueNumbers = new Set(numbers);
uniqueNumbers.size // returns 3

• Set.add(value) — добавляет значение к объекту Set и возвращает объект Set с добавленным значением.

const numbers = [1, 2, 3, 2, 1];
const uniqueNumbers = new Set(numbers);
uniqueNumbers.add(4) // returns Set(4) { 1, 2, 3, 4 }

• Set.delete(value) — удаляет элемент, связанный со значением, и возвращает логическое значение независимо от того, был ли элемент удален или нет.

const numbers = [1, 2, 3, 2, 1];
const uniqueNumbers = new Set(numbers);
uniqueNumbers.delete(2) // returns true
uniqueNumbers.size // returns 2

• Set.clear() — удаляет все элементы из объекта Set и возвращает неопределенное значение.

const numbers = [1, 2, 3, 2, 1];
const uniqueNumbers = new Set(numbers);
uniqueNumbers.clear() // returns undefined
uniqueNumbers.size // returns 0

• Set.has(value) — возвращает логическое значение, определяющее, присутствует ли элемент со значением в объекте Set или нет.

const numbers = [1, 2, 3, 2, 1];
const uniqueNumbers = new Set(numbers);
uniqueNumbers.has(2) // returns true
uniqueNumbers.has(4) // returns false

Разница между массивом и набором?

В большинстве случаев можно использовать массив. Однако вы захотите использовать Set, когда вам нужны только уникальные значения и вы хотите избежать дублирования.

Другое существенное различие между массивом и Set заключается в том, что массив представляет собой упорядоченный список объектов. Вы можете получить доступ к элементам массива, сославшись на его целочисленный индекс в списке. Set — это неупорядоченный пул уникальных элементов. Поскольку он неупорядочен, нет целочисленного индекса, который можно использовать для доступа к определенному элементу.

Заключение

Спасибо за прочтение! Я надеюсь, что эта статья помогла вам понять объект Set в JavaScript.

Спустя почти 6 месяцев изучения JavaScript я впервые столкнулся с объектом Set. Я не считаю, что это фундаментальная концепция, необходимая при первом изучении JavaScript, но, безусловно, хорошо знать, что она существует на тот момент, когда вам понадобится ее использовать!

Если вы хотите продолжить изучение JavaScript, ознакомьтесь со статьями ниже.