Поиск уникальных строк из массива JavaScript - обычная задача для веб-разработчиков. Вот три способа, как это сделать.
Уникальный массив строк
При работе или изучении JavaScript вам неизбежно придется находить уникальные строки в массиве.
Это идеальная практическая задача для изучения того, как использовать Set, функцию ES6, в сочетании с оператором ... распространения, как вы увидите позже.
Но это тоже проблема реальной жизни. Возможно, вашему приложению React нужно найти список всех уникальных адресов электронной почты для ваших клиентов.
Или, может быть, вам нужно получить уникальные имена пользователей из какой-то базы данных, которую вы загрузили с помощью JSON через соединение API.
В этой статье я покажу вам, как именно фильтровать массив строк JavaScript, сохраняя только уникальные элементы, удаляя повторяющиеся строки.
Метод 1 - использование набора для поиска уникальных строк
Функция JavaScript ES6 Set отлично подходит для поиска уникальных примитивных значений, включая строки. Вы можете создать новый массив, содержащий только уникальные строки из другого массива, всего в одной строке кода.
Вот как это работает:
Как вы можете видеть в примере кода, Array.from() эквивалентно использованию квадратных скобок [] с оператором распространения ....
В большинстве случаев Set будет всем, что вам нужно. Но давайте посмотрим на два других метода удаления неуникальных строк из массива.
Метод 2 - уникальные строки с объектом JavaScript
Если вы не хотите использовать Set, вы можете перебирать массив, используя цикл for...of, проверяя уникальность с помощью объекта JavaScript.
Вот как это будет выглядеть:
Этот метод работает, потому что объекты JavaScript должны иметь уникальные ключи (также называемые свойствами). Внутри цикла свойства, которые еще не были установлены, имеют значение undefined, которое является ложным значением, что означает, что оно оценивается как false в операторе if или другом условном выражении, таком как тернарный оператор ?.
Для сравнения: переменные, которые еще не были объявлены, выдают ReferenceError при доступе, а необъявленные свойства - нет.
При желании вы можете пропустить вызов .push() (Array.prototype.push()), чтобы добавить элементы в новый массив, потому что вы можете получить уникальные ключи объекта с помощью метода Object.keys(). Этот метод возвращает итерацию, которую можно превратить в массив с помощью оператора Array.from() или ... распространения.
Метод 3 - поиск уникальных строк с помощью ES5
Если вы используете ES5 для поддержки старых браузеров, таких как Internet Explorer 9, у вас не будет доступа к Set или for...of циклу.
Вместо этого вам нужно будет изменить последний метод, чтобы вместо него использовался простой for цикл. В остальном код аналогичен удалению повторяющихся строк:
В отличие от последнего примера, в ES5 нет простого способа просто превратить уникальный Object.keys() (метод, который доступен в IE9) непосредственно в массив.
Вы не можете использовать ... оператор распространения или Array.from(), поэтому вам необходимо .push() преобразовать строки в новый массив с помощью цикла.
Заключение: Set Удаляет повторяющиеся строки
Для фильтрации массива по уникальным строкам потребуется всего одна строка кода, если вы решите использовать фантастическую функцию ES6 Set.
Тем не менее, полезно достаточно хорошо разбираться в тонкостях JavaScript, чтобы иметь возможность находить уникальные строки с помощью циклов и объектов.
И, если вы застряли в поддержке Internet Explorer, вы, вероятно, вообще не сможете использовать Set ... если только вы не используете Babel для полифилляции вашего JavaScript.
Уникальные строки из значений объекта
Что делать, если у вас есть массив объектов, а нужные строки - это значения свойств этих объектов, например имена пользователей или адреса электронной почты?
Вам нужно сначала .map() (Array.prototype.map()) массив, создав новый массив неуникальных строк, а затем применить Set для удаления дубликатов.
Чтобы узнать, как использовать .map() для фильтрации уникальных строк, найденных как значения объектов в массиве объектов, обратитесь к моему полному руководству по использованию Set:
Удачного кодирования! 🤩💻💯🔥🎸
