Введение в Set в JavaScript – все, что нужно знать о наборах

Перевод: Alex Devero – Introduction to Sets in JavaScript – All You Need to Know

Set (наборы) – это новый тип объекта, представленный в ES6 (ES2015). Хотя они не очень известны, они могут быть очень полезными и мощными. Это руководство поможет вам узнать все, что вам нужно знать о них. Вы узнаете, что такое наборы в JavaScript, как они работают и как их использовать.

Готовые сайты на 1С-Битрикс

Индивидуальная разработка дизайна сайтов любой сложности – для интернет-магазинов, корпоративных сайтов, лендингов. Разработка фирменного стиля и логотипа с учетом последних трендов. Мы предлагаем полный комплекс дизайнерских услуг.

Полный список наших услуг:
– Интернет-маркетинг
– Разработка
– Дизайн
– Поддержка сайта
– Базовое заполнение
– Хостинг

Введение в наборы (Set)

Наборы – это новый тип объекта, который был представлен в JavaScript с ES6 (ES2015). Наборы позволяют вам создавать коллекции значений. Эти значения могут быть любыми, от чисел и строк до массивов и объектов. Это не похоже на что-то захватывающее. То же самое можно сделать и с массивами.

Особенность наборов и их отличия от массивов заключается в том, что они могут содержать только уникальные значения. Когда вы пытаетесь добавить несколько одинаковых значений в набор, он примет только первое. Любое последующее такое же значение будет проигнорировано. Это также относится к таким значениям, как null и undefined. Каждый будет добавлен только один раз.

Это одна из причин, по которой разработчики JavaScript иногда выбирают наборы вместо массивов. Если вы хотите создать коллекцию некоторых значений, и вам нужно, чтобы все значения были уникальными, наборы – самый простой вариант.

Создание наборов в JavaScript

Если вы хотите создать наборы в JavaScript, делается это с помощью конструктора набора set(), которому предшествует ключевое слово new. Таким образом создастся новый объект Set.

// Создать новый пустой набор
const mySet = new Set()

Добавление значений в наборы

Когда вы создаете новый набор, вы можете сделать две вещи. Во-первых, вы можете создать новый пустой объект Set и добавить к нему значения позже. И вы можете добавлять значения в набор, используя метод add(). Этот метод принимает либо одно значение, либо итерацию. Итерация означает массив значений.

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

// Пример no.1: Добавление одного значения
// Создание пустого набора
const mySet = new Set()

// Добавление одного значения в набор "mySet"
mySet.add('Helo')
mySet.add(314)
mySet.add(false)
mySet.add(null)
mySet.add(undefined)
mySet.add({ name: 'Joe' })

// Вывод значений mySet
console.log(mySet)
// Результат:
// Set { 'Helo', 314, false, null, undefined, { name: 'Joe' } }


// Пример no.2: Добавление нескольких значений
// Создание пустого набора
const mySet = new Set()

// Добавление нескольких значений в набор mySet
mySet.add(['Strike', 13, false, null, [5, 6], { language: 'JS & TS' }])

// Вывод значений mySet
console.log(mySet)
// Результат:
// Set { [ 'Strike', 13, false, null, [ 5, 6 ], { language: 'JS & TS' } ] }

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

// Создание нового набора и добавление одного значения
const mySetOne = new Set(['Blackout!'])

// Вывод mySetOne
console.log(mySetOne)
// Результат:
// Set { 'Blackout!' }


// Создание нового набора и добавление одного значения
const mySetThree = new Set([{ galaxy: 'Milky way' }])

// Вывод mySetOne
console.log(mySetThree)
// Результат:
// Set { { galaxy: 'Milky way' } }


// Создание нового набора и добавление одного значения
const mySetFour = new Set([['Andromeda', 'Mayall\'s Object', 'Malin 1']])

// Вывод mySetOne
console.log(mySetFour)
// Результат:
// Set Set { [ 'Andromeda', "Mayall's Object", 'Malin 1' ] }


// Создание нового набора и добавление нескольких значений
const mySetTwo = new Set(['Entropy', 'atoms', ['gravity', 'space']])

// Вывод mySetOne
console.log(mySetTwo)
// Результат:
// Set { 'Entropy', 'atoms', [ 'gravity', 'space' ] }

Обратите внимание, что когда вы добавляете значения для набора при его создании, этот массив будет деконструирован. Это означает, что новый Set ([‘a’, ‘b’]) станет Set {‘a’, ‘b’}. Видите? Нет массива, обертывающего значения. Однако, если вы добавите массив внутрь самого внешнего массива, он останется массивом, например, в [‘Entropy’, ‘atom’, [‘gravity’, ‘space’]].

Удаление значений из наборов

Самый простой способ удалить значение из набора – использовать метод delete(). Этот метод работает аналогично методу add(). Вы передаете значение в качестве аргумента при вызове этого метода. Если удаление прошло успешно, delete() вернет true. Если нет, он вернет false.

Одним из потенциальных недостатков этого метода является то, что он работает только с одним значением за раз. Если вы попытаетесь передать несколько значений в виде нескольких аргументов, это сработает только частично. Метод delete() удалит только первое значение, и проигнорирует остальные.

Если вы попытаетесь передать значения в виде массива. Метод delete() игнорирует все значения.

// Создать новый набор с некоторыми значениями
const mySet = new Set(['Pegasus', 'Hydra', 'Virgo'])

// Вывод mySet
console.log(mySet)
// Результат:
// Set { 'Pegasus', 'Hydra', 'Virgo' }

// Удаление некоторых значений
mySet.delete('Pegasus')

// Вывод mySet
console.log(mySet)
// Результат:
// Set { 'Hydra', 'Virgo' }


// Пытаемся снова удалить несколько значений, используя массив
// Вообще не работает
mySet.delete(['Hydra', 'Virgo'])

// Вывод mySet
console.log(mySet)
// Результат:
// Set { 'Hydra', 'Virgo' }


// Попробуем удалить несколько значений, используя несколько параметров
// Удаляет только первое значение, переданное в delete()
mySet.delete('Hydra', 'Virgo')

// Вывод mySet
console.log(mySet)
// Результат:
// Set { 'Virgo' }

Удаление всех значений из наборов

Иногда вам может потребоваться удалить все значения из набора. Это можно сделать с помощью метода clear(). Этот метод не принимает никаких аргументов.

// Создаем новый набор
const mySet = new Set()

// Добавление некоторых значений
mySet.add('Centaurus')
mySet.add('Sculptor')
mySet.add('Circinus')

// Вывод mySet
console.log(mySet)
// Результат:
// Set { 'Centaurus', 'Sculptor', 'Circinus' }

// Удаление всех значений
mySet.clear()

// Вывод mySet
console.log(mySet)
// Результат:
// Set {}

Проверка существующих значений в наборах

Метод has(), вероятно, самый простой способ проверить, содержит ли набор определенное значение. Этот метод принимает один параметр, значение, которое вы хотите найти. Если значение существует, has() вернет true. В противном случае он вернет false.

// Создаем новый набор с некоторыми значениями
const mySet = new Set(['Jack', 'Andrew', 'Victoria', 'Emma'])

// Проверяем, содержит ли "mySet" "Andrew"
mySet.has('Andrew')
// Результат:
// true

// Проверяем, содержит ли "mySet" "Leopold"
mySet.has('Leopold')
// Результат:
// false

Узнаем, размер набора

Если вы хотите узнать, сколько элементов находится в массиве, вы можете использовать его свойство length. У наборов нет именно этого свойства. Однако у них есть альтернатива. Эта альтернатива – свойство size. Он работает так же, как свойство length, возвращает число всех значений, которые существуют в определенном наборе.

// Создать новый набор
const mySet = new Set()

// Выводим размер mySet
console.log(mySet.size)
// Результат:
// 0

// Добавляем некоторые значения
mySet.add('Earth')
mySet.add('Mars')
mySet.add('Jupiter')

// Выовдим размер mySet
console.log(mySet.size)
// Вывод:
// 3

Наборы, ключи и значения

Если вы хотите узнать, какие значения содержит набор, вы можете использовать два метода. Что ж, это один метод и один псевдоним для одного и того же метода. Метод – values(), а псевдоним – keys(). Использование любого из этих методов создаст объект-итератор. Этот итератор содержит все значения в том порядке, в котором вы добавили их в набор.

Когда у вас есть этот итератор, вы можете перебирать все значения одно за другим. Когда вы работаете с объектом-итератором, вы можете перейти к следующему значению, вызвав метод next(). Вы вызываете этот метод для созданного вами объекта итератора.

// Создаем новый набор
const mySet = new Set()

// Добавляем некоторые значения
mySet.add('Loki')
mySet.add('Thor')
mySet.add('Freyr')

// Создаем объект-итератор, содержащий все значения
const mySetValues = mySet.values()

// Альтернатива:
// const mySetValues = mySet.keys()

// Вывод mySetValues
console.log(mySetValues)
// Результат:
// [Set Iterator] { 'Loki', 'Thor', 'Freyr' }

// Выводим первое значение
console.log(mySetValues.next().value)
// 'Loki'

// Выводим второе значение
console.log(mySetValues.next().value)
// 'Thor'

// Выводим третье значение
console.log(mySetValues.next().value)
// 'Freyr'

// Выводим четвертое значение
// В наборе всего три значения
// поэтому «value» теперь «undefined»
console.log(mySetValues.next().value)
// Вывод:
// undefined

Цикл по значениям с помощью цикла for … of

Если вы не хотите использовать метод next() для получения значений, вы можете вместо этого использовать цикл for … of. Цикл for … of поможет вам перебрать объект итератора и автоматически получить все значения одно за другим.

// Создаем новый набор
const mySet = new Set()

// Добавляем некоторые значения
mySet.add('Loki')
mySet.add('Thor')
mySet.add('Freyr')

// Создаем объект-итератор, содержащий все значения
const mySetValues = mySet.values()

// Перебираем объект-итератор mySetValues
// и выводим все значения одно за другим
for (const val of mySetValues) {
  console.log(val)
}

// Результат:
// 'Loki'
// 'Thor'
// 'Freyr'

Получение всех записей из набора

Помимо методов values() и keys(), вы также можете получить доступ ко всем значениям внутри набора с помощью метода entries(). Подобно values() и keys(), этот метод также создает объект-итератор, содержащий все записи. Затем вы можете перебирать этот объект, используя метод next() или цикл for … of.

// Создаем новый набор
const mySet = new Set()

// Добавляем некоторые значения
mySet.add('MSFT')
mySet.add('AAPL')
mySet.add('BABA')
mySet.add('ADBE')
mySet.add('DELL')

// Создаем объект-итератор, содержащий все записи (значения)
const mySetEntries = mySet.entries()

// Перебираем объект-итератор mySetValues
// и выводим все значения одно за другим
for (const entry of mySetEntries) {
  console.log(entry)
}

// Результат:
// [ 'MSFT', 'MSFT' ]
// [ 'AAPL', 'AAPL' ]
// [ 'BABA', 'BABA' ]
// [ 'ADBE', 'ADBE' ]
// [ 'DELL', 'DELL' ]


// Или используя метод next()
// Выводим первое значение
console.log(mySetEntries.next().value)
// Результат:
// [ 'MSFT', 'MSFT' ]

// Выводим второе значение
console.log(mySetEntries.next().value)
// Результат:
// [ 'AAPL', 'AAPL' ]

// Выводим третье значение
console.log(mySetEntries.next().value)
// Результат:
// [ 'BABA', 'BABA' ]

// Выводим четвертое значение
console.log(mySetEntries.next().value)
// Результат:
// [ 'ADBE', 'ADBE' ]

Когда вы используете метод entries(), формат каждой записи будет [key, value]. Что может вас удивить, так это то, что ключ и значение в этом массиве записей будут одинаковыми. Вы могли видеть это на примере выше. Не беспокойся об этом. Так был реализован метод entries() в JavaScript.

Итерация наборов с помощью forEach ()

Цикл for … in – не единственный способ перебора набора. Вы также можете использовать метод forEach(). Это может быть даже проще и быстрее, чем использование цикла for … in.

// Создаем новый набор
const mySet = new Set(['JavaScript', 'Python', 'Ruby', 'Perl'])

// Используем forEach () для перебора "mySet"
// и выводим все существующие значения
mySet.forEach(val => {
  console.log(val)
})
// Результат:
// 'JavaScript'
// 'Python'
// 'Ruby'
// 'Perl'

Заключение

Наборы могут быть полезным и мощным инструментом в коллекции инструментов каждого разработчика JavaScript. Они могут быть удобной альтернативой массивам и картам (maps). Я надеюсь, что это руководство помогло вам понять, что такое наборы в JavaScript, как они работают и, самое главное, как их использовать.