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

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

Для проверки наличия конкретной строки в массиве можно воспользоваться методом includes:

JS
Скопировать код
const fruits = ['яблоко', 'банан', 'манго'];
const hasBanana = fruits.includes('банан'); // вернёт true

Метод includes прост в использовании: если элемент присутствует в массиве, он возвращает true, в противном случае — false.

Однако, в некоторых более сложных ситуациях могут быть уместны методы indexOf и some.

Кинга Идем в IT: пошаговый план для смены профессии

'indexOf': стоит ли использовать?

Метод indexOf указывает на позицию элемента в массиве и может применяться для условных конструкций. Плюс, он хорошо совместим со взрослыми браузерами.

JS
Скопировать код
const pets = ['кот', 'собака', 'попугай'];
const dogPosition = pets.indexOf('собака');
// dogPosition будет равен 1

'some': монах в мире однозадачности

Метод some просматривает массив и проверяет, соответствует ли хотя бы один из его элементов заданному условию.

JS
Скопировать код
const tools = ['молоток', 'отвёртка', 'гаечный ключ'];
const hasWrench = tools.some(tool => tool === 'гаечный ключ');
// hasWrench возвращает true

Механика регистрозависимого поиска и эффективность

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

JS
Скопировать код
const cities = ['Париж', 'Берлин', 'рим'];
const searchCity = 'РИМ';
const normalizedSearch = cities.map(city => city.toLowerCase()).includes(searchCity.toLowerCase());
// normalizedSearch вернёт true

При работе с большими массивами дабы ускорить поиск используйте самые быстрые методы или настройте собственные циклы.

Простой цикл и чары полифилла

Пример проверки наличия элемента с помощью простого цикла for и булева флага:

JS
Скопировать код
let books = ["Гордость и предубеждение", "1984", "Великий Гэтсби"];
let specialBook = "1984";
let isFound = false;

for (let i = 0; i < books.length; i++) {
  if (books[i] === specialBook) {
    isFound = true;
    break;
  }
}
// isFound вернёт true

Для обеспечения поддержки современных методов, включая includes, в старых браузерах используйте полифилы.

Допинговать код через инкапсуляцию функций

Создайте функцию для повторного использования проверки находится ли строка в массиве:

JS
Скопировать код
function containsString(array, string) {
  return array.includes(string);
}

const vegetables = ['морковь', 'горошек', 'салат'];
const lookingFor = 'горошек';
const found = containsString(vegetables, lookingFor); // вернёт true

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

Представьте процесс поиска как разыскивание "Золотого билета" среди обёрток шоколадных батончиков. Если foundTicket истинно, значит вы нашли свое сокровище.

Ринг кодирования

Переход от jQuery

Для увеличения эффективности и избавления от зависимостей используйте нативный JavaScript вместо методов jQuery типа $.inArray.

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

Поиск строк по шаблону

Для поиска по шаблону используйте filter вместе с регулярными выражениями:

JS
Скопировать код
const wordPattern = /книга/i;
const library = ["Учебник", "Тетрадь", "Кулинарная книга"];
const filtered = library.filter(item => wordPattern.test(item));

ES6 приходит на помощь

Стандарт ES6 вводит улучшенные методы, такие как includes и some, делающие код более современным и функциональным.

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

  1. Array.prototype.includes() – JavaScript | MDN — официальная документация MDN.
  2. javascript – Determine whether an array contains a value – Stack Overflow — реальные примеры и обсуждение экспертов.
  3. Массивы – JavaScript.info — подробное руководство по методам массивов.
  4. Метод массива indexOf() – W3Schools — учебник по использованию метода 'indexOf'.
  5. ECMAScript® 2016 Language Specification — спецификация метода 'includes' по стандарту ECMAScript.
  6. jQuery.inArray() | jQuery API Documentation — документация по использованию метода в jQuery.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой метод используется для проверки наличия строки в массиве в JavaScript?
1 / 5