В этом сообщении блога я углубляюсь в объект 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 в вашем следующем проекте, если вы еще не использовали его! Если да, поделитесь своими любимыми вариантами использования в разделе комментариев! И как всегда удачного кодирования 🎉.