Зачем это нужно? В коде часто приходится искать, есть ли нужный элемент, без лишних вычислений. Это помогает избежать ошибок в логике, упрощает валидацию данных и ускоряет разработку. Мы разберём, как работает includes(), с примерами для массивов и строк.

includes() для массивов: как проверить наличие элемента

Метод Array.prototype.includes() ищет значение в массиве и возвращает логическое значение. Он проходит по элементам с начала или с указанного индекса и останавливается при первом совпадении. В отличие от indexOf(), includes() правильно обрабатывает NaN и учитывает типы строго.

Представьте массив пользователей на сайте. Нужно быстро узнать, есть ли среди них гость. includes() вернёт true, если элемент найден, и false иначе. Это полезно в условных конструкциях if, для фильтров или валидации форм. Логика простая: передаёте значение и опциональный fromIndex.

• searchElement: обязательный параметр — то, что ищем в массиве.
• fromIndex: необязательный, начинается поиск с этого индекса (по умолчанию 0, отрицательные значения считаются от конца).

Примеры использования для массивов

includes() для строк: поиск подстроки

Метод String.prototype.includes() проверяет наличие подстроки в строке с учётом регистра. Он чувствителен к большим и малым буквам, ищет с начала или с позиции. Это отличный инструмент для парсинга текста, валидации ввода или поиска ключевых слов.

Например, проверяем, содержит ли сообщение слово «JavaScript». Метод вернёт true, если подстрока есть. Полезно в чатах, поисковиках или обработке пользовательского ввода. Второй аргумент задаёт стартовую позицию, что ускоряет поиск в длинных строках.

• searchString: подстрока для поиска (может быть пустой, всегда true).
• position: необязательный индекс начала поиска (по умолчанию 0).

Сравнение includes() с другими методами строк

Вот примеры:

const text = "JavaScript — это весело";
console.log(text.includes("Java")); // true
console.log(text.includes("java")); // false (регистр важен)
console.log(text.includes("Script", 5)); // true (с позиции 5)

Различия includes() в массивах и строках

В массивах метод сравнивает элементы строго (===), включая undefined и NaN. В строках ищет точное вхождение подстроки. Оба метода не мутируют оригинал и работают быстро для небольших коллекций. Но для объектов в массивах помните: сравниваются ссылки, а не содержимое.

Возьмём реальный кейс: список контактов. В массиве объектов includes() не найдёт дубликат по значениям, если это разные объекты. В строке же легко проверить email на домен. Это подводит к нюансам производительности: для больших массивов лучше indexOf() или find().

• Массивы: идеально для примитивов, учитывает пробелы (undefined как undefined).
• Строки: не меняет регистр, пустая строка всегда true.
• Общее: второй аргумент fromIndex работает аналогично.

Сценарий	Массив	Строка	Рекомендация
Поиск по значению	Прямое сравнение	Подстрока	includes()
Большие данные	️ Медленнее find()	Быстро	Другие методы
Объекты	Ссылки	N/A	find() или lodash

Практические кейсы и подводные камни

includes() часто используют в формах: проверка, введён ли запретный символ. Или в роутинге: есть ли маршрут в списке разрешённых. Ещё пример — фильтр товаров: есть ли размер в наличии. Но будьте осторожны с объектами — всегда проверяйте ссылки.

В реальном проекте массив ролей пользователя. roles.includes('admin') быстро даёт доступ. Для строк: email.includes('@') валидирует почту на базовом уровне. Подводные камни: регистр в строках, типы в массивах (5 !== ‘5’).

• Валидация: input.includes('<script>') — блокировка XSS.
• Регистр: используйте toLowerCase() перед проверкой.
• Производительность: для тысяч элементов — Set или Map лучше.

Таблица типичных ошибок

Когда includes() не хватит

Метод includes() покрывает 80% простых проверок, но для сложных сценариев есть find(), some() или регулярки. Подумайте о Set для уникальных значений — has() быстрее. Или lodash для глубокого поиска. Это оставляет пространство для оптимизаций в крупных проектах.