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

Недавно у меня было техническое интервью, на котором меня попросили написать функцию JavaScript, которая удаляет все повторяющиеся элементы из массива. В моем исходном решении использовался очень простой цикл for, который добавлял уникальные элементы в качестве ключей к существующему объекту:

const obj = {}
const filteredArr = []
for (let i = 0; i < arr.length; i++) {
  if (!obj[arr[i]]) {
    obj[arr[i]] = true
    filteredArr.push(arr[i])
  }
}
return filteredArr

Это работает, но меня попросили представить некоторый синтаксис ES6. Затем я выбрал forEach:

const obj = {}
const filteredArr = []
arr.forEach(fruit => {
  if (!obj[fruit]){
    obj[fruit] = true
    filteredArr.push(fruit)
  }
})
return filteredArr

Хотя это немного интереснее, это делается примерно с таким же объемом кода. Затем мой интервьюер спросил меня, знаю ли я, как выполнить эту задачу всего за пару строк кода. Невозможно, - подумал я. В JavaScript нет встроенных методов для удаления дубликатов массивов! Затем мне дали «эту ссылку, и позвольте мне сказать вам, я весь день занимался выродками.

Рефакторинг с помощью Set

Насколько я понимаю, Set в JavaScript позволяет хранить уникальные элементы в упорядоченном списке. Уникальность встроена в 🤯 с помощью оператора строго равенства === для определения равенства. Набор поддерживает как примитивные типы данных (числа, строки, логические значения), так и ссылки на объекты.

Что еще более интересно, если у вас уже есть существующий массив, заполненный дубликатами, вы можете использовать Set, чтобы удалить их. Вот как это работает с массивами. Сначала создайте новый набор с помощью new Set () и сохраните это значение в переменной. Если у вас есть существующий массив для удаления дубликатов, вы можете передать его в качестве аргумента в новый набор.

const mySet = new Set([1, 1, 2, 3, 3, 6, 10, 10])
// => Set(5) {1, 2, 3, 6, 10}

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

const mySet = new Set(arr)
return  [...mySet]

Синтаксически красивый и приторный 🍭. Это заставило меня задуматься о других вариантах использования Set.

Другие способы использования набора

Для объекта Set доступен ряд методов для добавления, извлечения и перебора элементов:

Добавление элементов: используйте метод .add для добавления элементов в набор. Эти новые элементы будут добавлены в конец массива. Если вы попытаетесь добавить тот же элемент в тот же набор, он просто вернет набор без изменений.

Удаление элементов: используйте метод .delete, чтобы удалить элемент из набора. Нет необходимости знать, где в наборе индексируется элемент, если у вас есть доступ к привязке (если это объект) или значение (если это примитивный тип данных):

const mySet = new Set()
// => undefined
const myObj = {text: 'sets are fun!'}
// => undefined
mySet.add(myObj)
// => Set(1) {{…}}
mySet.has(myObj)
true
mySet.has({text: 'sets are fun!'})
false

Проверка элементов: используйте метод .has, чтобы проверить, включен ли элемент в настоящий момент в набор. Возвращаемое значение - логическое.

Получение количества элементов. Если вы хотите узнать, сколько элементов находится в наборе, используйте атрибут .size, чтобы получить число.

Надеюсь, это сообщение в блоге вдохновило вас на использование Sets в вашем следующем проекте, если вы еще не использовали его! Если да, поделитесь своими любимыми вариантами использования в разделе комментариев! И как всегда удачного кодирования 🎉.