Проверка наличия строки в массиве TypeScript: метод includes()

Быстрый ответ

Чтобы проверить, содержится ли строка в массиве, используйте метод includes():

const pokemon = ['Bulbasaur', 'Pikachu', 'Charizard'];
const foundPikachu = pokemon.includes('Pikachu');  // Пикачу, выбираю тебя!

Метод includes() проходит по массиву и возвращает true, если искомая строка присутствует в нём, в противном случае возвращает false.

Выпуск в Палет Тауне

Освоив includes(), вы сталкиваетесь с необходимостью дополнить свои навыки работы с массивами:

• indexOf() покажет позицию искомой строки, вернёт -1, если она отсутствует:

const pokemon = ['Bulbasaur', 'Pikachu', 'Charizard'];
const positionedPikachu = pokemon.indexOf('Pikachu');  // вернёт 1, так как нумерация начинается с 0
const pikachuExists = positionedPikachu !== -1;  // Пикачу замечен

• Для массивов объектов find() или some() помогут проверить присутствие строки в значениях одного из свойств:

const pastas = [{name: 'spaghetti'}, {name: 'tortellini'}];
const hasTortellini = pastas.some(pasta => pasta.name.includes('tortellini'));  // не пропустим случай

• Учтите, что не все браузеры поддерживают includes(). В такой ситуации рассмотрите использование альтернатив или полифилла для обеспечения совместимости.

Инструменты обработки массивов

В зависимости от задач, вам может потребоваться несколько инструментов:

Нахождение самого "короткого"

(применяем Array.some()) Для быстрого булевого результата some() будет идеальным:

const pokemon = ['Bulbasaur', 'Pikachu', 'Charizard'];
const shortName = pokemon.some(name => name.length < 7);  // для компактности имён на кубках

Подробнее об этом расскажет наш спикер на видео

"Уникальный" в числе многих

(применяем Array.find()) Найдите уникальный элемент или верните undefined, если его нет:

const pokemon = ['Bulbasaur', 'Pikachu', 'Charizard'];
const fireType = pokemon.find(type => type === 'Charizard');  // рядом с Чаризардом огня не надо

Фильтрация излишнего

(применяем Array.filter()) Выберите подходящие элементы, формируя новый массив:

const pokemon = ['Bulbasaur', 'Pikachu', 'Charizard'];
const longNames = pokemon.filter(name => name.length > 8);  // длинные имена внушают уважение

Визуализация

Представьте массив как библиотечную полку с книгами (📚), где каждая книга – элемент массива:

Библиотечная полка (📚): ['JavaScript', 'TypeScript', 'Python', 'Java']

Поиск "TypeScript" аналогичен поиску нужной книги:

🔍 'TypeScript' в 📚: [❌, ✅, ❌, ❌]

Метод .includes() помогает проверить, есть ли книга на полке:

const shelf = ['JavaScript', 'TypeScript', 'Python', 'Java'];
const foundBook = shelf.includes('TypeScript');  // ура, нашли нужную книгу!

Бинго! Искомая книга – вторая слева.

Погружение в океан массивов

Помните, TypeScript добавляет типовую безопасность к JavaScript, но некорректное использование методов, например includes(), может приводить к выполнению с ошибками.

Защитим типы в TypeScript

Используйте преимущества TypeScript, например, уточнение типов (type narrowing), чтобы избежать ошибок:

const mixedBag: (number | string)[] = ['apple', 5, 'mango'];
if (typeof mixedBag[0] === 'string') {
  const foundFruit = mixedBag.includes('apple');  // нашли яблоко, задание выполнено
}

Ограничьте использование "in"

Предпочтительно избегать in для массивов, так как он служит для проверки наличия свойств, а не значений.

Версия TypeScript

Следите за современными возможностями ECMAScript в зависимости от версии TypeScript, которую вы используете.

Полезные материалы

1. Array.prototype.includes() – JavaScript | MDN
2. TypeScript: Документация – Базовые типы
3. Система типов TypeScript – TypeScript Deep Dive
4. TypeScript: Документация – Уточнение типов
5. array-includes – npm