Проверка наличия строки в массиве строк в JavaScript

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

Метод includes() — это быстрый и простой способ проверить содержание строки в массиве:

const fruits = ['apple', 'banana', 'mango'];
const hasBanana = fruits.includes('banana'); // true

Метод возвратит true, если элемент 'banana' входит в массив fruits, и false — если нет.

Углубление в детали: регистр и indexOf

Учитывайте, что метод includes() чувствителен к регистру — он различит 'Banana' и 'banana'. Чтобы избежать влияния регистра, можно привести все строки к одному виду:

const searchTerm = 'Banana'.toLowerCase();
const isFound = fruits.includes(searchTerm); // true, так как 'banana' в нижнем регистре

Если вам требуется поддержка устаревших версий браузеров, таких как IE 8 и ниже, воспользуйтесь методом indexOf(). Он возвращает индекс найденного элемента или -1, если в массиве такого элемента нет:

const bananaIndex = fruits.indexOf('banana');
const isFound = bananaIndex !== -1; // true, 'banana' входит в массив

Для применения includes() в старых версиях браузера, MDN предлагает использовать полифилл.

Расширение возможностей: прототипы массивов

Казалось бы, добавление метода contains в прототип массива может быть удобной решением:

if (!Array.prototype.contains) {
  Array.prototype.contains = function(element) {
    return this.includes(element);
  };
}

Однако такие расширения прототипа стандартных объектов могут создавать путаницу и стараются избегать в современном JavaScript.

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

Можно представить работу метода как проверку списка гостей при входе:

| Номер гостя | Нямушка  |
|-------------|-----------|
|           1 | "apple"   |
|           2 | "berry"   |
|           3 | "cherry"  |
|           4 | "date"    |

Допустим, нам нужно проверить, участвует ли гость с именем "berry":

const attendees = ["apple", "berry", "cherry", "date"];
const isBerryAttending = attendees.includes("berry"); // Проверяем список гостей

И это подтверждается — "berry" может пройти на вечеринку.

**Подходит гость номер 2:**
Гость найден! Вход разрешен! ✅

Лавируем между трудностями: граничные случаи и альтернативы

Не дайте себя обмануть пустым массивом:

const emptyArray = [];
emptyArray.includes('anything'); // false, ведь нет элементов для поиска

Будьте внимательны в случае, когда искомая строка пуста:

const fruits = ['apple', 'banana', 'mango'];
fruits.includes(''); // true, потому что строки часто содержат пустую строку по умолчанию

Для реализации более сложных проверок рекомендуется использовать метод some():

const containsTropicalFruit = fruits.some(fruit => fruit === 'mango' || fruit === 'papaya');

Распространенные ошибки и надежные практики

Можно перебрать все элементы со помощью цикла, но это не самый эффективный подход:

let isFound = false;
for (let i = 0; i < fruits.length; i++) {
  if (fruits[i] === 'banana') {
    isFound = true;
    break;
  }
}

Лучше использовать встроенные методы для наглядности и производительности:

return fruits.includes('banana'); // Просто проверим, присутствует ли 'banana'

Всегда проверяйте входные данные. Не делайте предположений о типах передаваемых значений:

function isArrayContainsString(array, str) {
  if (!Array.isArray(array) || typeof str !== 'string') {
    throw new TypeError('Ожидаются корректные данные.');
  }
  return array.includes(str);
}

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

1. Array.prototype.includes() – JavaScript | MDN — подробная документация о методе includes на MDN.
2. Array.includes() method in JavaScript — интерактивное руководство по методу .includes() от W3Schools.
3. Методы массива — простые объяснения и примеры использования includes и других методов поиска в массивах на JavaScript.info.
4. Official ECMAScript® 2016 Specification — официальная спецификация метода Array.prototype.includes.
5. JavaScript: Самый непонятный в мире язык программирования — раздумья Дугласа Крокфорда о JavaScript с акцентом на массивы.