Проверка наличия строки в массиве строк в 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);
}
Полезные материалы
- Array.prototype.includes() – JavaScript | MDN — подробная документация о методе
includes
на MDN. - Array.includes() method in JavaScript — интерактивное руководство по методу
.includes()
от W3Schools. - Методы массива — простые объяснения и примеры использования
includes
и других методов поиска в массивах на JavaScript.info. - Official ECMAScript® 2016 Specification — официальная спецификация метода
Array.prototype.includes
. - JavaScript: Самый непонятный в мире язык программирования — раздумья Дугласа Крокфорда о JavaScript с акцентом на массивы.