JavaScript Sets: Your Friendly Guide to Organized Data

Здравствуйте, будущие маги JavaScript! Сегодня мы отправимся в увлекательное путешествие в мир JavaScript Sets. Не волнуйтесь, если вы новички в программировании – я буду вашим верным проводником, и мы шаг за шагом исследуем эту тему. К концу этого урока вы будете манипулировать Sets как профессионал!

JavaScript - Sets

Что такое Set?

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

Синтаксис: Создание Set

Давайте начнем с азов. Вот как вы создаете новый Set:

let mySet = new Set();

Вот и все! Вы только что создали пустой Set. Но что, если вы хотите создать Set с начальными значениями? Нет проблем:

let fruitSet = new Set(['apple', 'banana', 'orange']);

Теперь у вас есть Set с тремя фруктами. Помните, даже если вы попытаетесь добавить еще один 'apple', он не будет включен, потому что Sets хранят только уникальные значения.

Параметры: Что можно поместить в Set?

Sets в JavaScript bastante flexíveis. Вы можете добавлять различные типы значений:

Числа
Строки
Объекты
Массивы
Даже другие Sets!

Давайте посмотрим пример:

let mixedSet = new Set([1, 'two', {three: 3}, [4, 5]]);
console.log(mixedSet);

Если вы запустите этот код, вы увидите, что наш Set содержит все эти различные типы значений.

Примеры: Игры с Sets

Теперь, когда мы знаем основы, давайте повеселимся с Sets!

Добавление и удаление элементов

let colorSet = new Set();

// Добавление элементов
colorSet.add('red');
colorSet.add('blue');
colorSet.add('green');

console.log(colorSet); // Вывод: Set(3) { 'red', 'blue', 'green' }

// Попытка добавить дубликат
colorSet.add('red');
console.log(colorSet); // Вывод: Set(3) { 'red', 'blue', 'green' }

// Удаление элемента
colorSet.delete('blue');
console.log(colorSet); // Вывод: Set(2) { 'red', 'green' }

Как видите, когда мы попытались добавить 'red' снова, Set не изменился. Вот магия Sets – они автоматически обрабатывают дубликаты для нас!

Проверка элементов

Хотите узнать, содержит ли Set определенное значение? Используйте метод has():

let animalSet = new Set(['dog', 'cat', 'bird']);

console.log(animalSet.has('dog')); // Вывод: true
console.log(animalSet.has('fish')); // Вывод: false

Размер Set

Чтобы узнать, сколько уникальных элементов в вашем Set, используйте свойство size:

let numberSet = new Set([1, 2, 3, 4, 5, 5, 5]);
console.log(numberSet.size); // Вывод: 5

Хотя мы добавили три 5, Set учитывает их только один раз!

Математические операции с Sets

Теперь наденьте свои математические шляпы и посмотрим на некоторые операции, которые мы можем выполнять с Sets.

Объединение (Union)

Объединение combines два Sets, сохраняя все уникальные элементы из обоих:

let set1 = new Set([1, 2, 3]);
let set2 = new Set([3, 4, 5]);

let unionSet = new Set([...set1, ...set2]);
console.log(unionSet); // Вывод: Set(5) { 1, 2, 3, 4, 5 }

Пересечение (Intersection)

Пересечение сохраняет только элементы, существующие в обоих Sets:

let set1 = new Set([1, 2, 3, 4]);
let set2 = new Set([3, 4, 5, 6]);

let intersectionSet = new Set([...set1].filter(x => set2.has(x)));
console.log(intersectionSet); // Вывод: Set(2) { 3, 4 }

Разность (Difference)

Разность сохраняет элементы из первого Sets, которые не находятся во втором:

let set1 = new Set([1, 2, 3, 4]);
let set2 = new Set([3, 4, 5, 6]);

let differenceSet = new Set([...set1].filter(x => !set2.has(x)));
console.log(differenceSet); // Вывод: Set(2) { 1, 2 }

Referência do JavaScript Set

Вот удобная таблица всех методов и свойств, о которых мы говорили, plus няколко других:

Метод/Свойство	Описание
`new Set()`	Создает новый Set
`add(value)`	Добавляет новый элемент в Set
`delete(value)`	Удаляет элемент из Set
`has(value)`	Возвращает true, если значение существует в Set
`clear()`	Удаляет все элементы из Set
`size`	Возвращает количество элементов в Set
`forEach(callback)`	Вызывает функцию для каждого элемента в Set
`values()`	Возвращает итератор со всеми значениями в Set
`keys()`	То же, что и values()
`entries()`	Возвращает итератор с парами [value, value] из Set

И вот оно,朋友们! Вы только что完成了 свой express-курс по JavaScript Sets. Помните, Sets такие же, как и те друзья, которые всегда держат вещи уникальными и организованными – они великолепны, когда дело доходит до работы с данными, в которых не должно быть дубликатов.

Практикуйте создание и манипулирование Sets, и вскоре вы найдете их естественным образом в своих coding приключениях. Кто знает? Может быть, вы даже начнете видеть Sets везде – как в том ящике для носков, где ни один носок не повторяется!

Продолжайте программировать, будьте любопытны и помните: в мире Sets уникальность – это имя игры!

Credits: Image by storyset