indexOf()

indexOf() — это метод в JavaScript, который ищет указанный элемент в массиве или строке. Если значение найдено, вернёт индекс этого элемента; если нет, то вернёт -1. При количестве вхождений больше одного вернёт индекс первого.

Синтаксис

  
  let string = ['a', 'b', 'c', 'a']

  string.indexOf('value', index)
  

value — значение элемента, который ищем в массиве или строке

index Необязательный - указывает, с какого индекса начинать поиск. По умолчанию равен 0.

Вызов метода indexOf() начинается с объекта (строки или массива), в котором производится поиск. Затем следует точка, после которой указывается название метода, а в круглых скобках — значение value, которое нужно найти.

  
  let mySkills = ['HTML', 'CSS', 'JavaScript', 'React']

  mySkills.indexOf('JavaScript') // 2
  

То же самое можем провернуть и со строкой.

  
  let mySkills = 'HTML, CSS, JavaScript, React'

  mySkills.indexOf('JavaScript') // 11
  

Искать можно также отдельные буквы и символы.

  
  mySkills.indexOf(',') // 4
  mySkills.indexOf('R') // 23
  

Если метод не находит наше значение, результатом будет -1.

  
  mySkills.indexOf('Angular') // -1
  

Стоит учитывать, что метод использует регистрозависимый поиск. Это означает, что indexOf() будет искать точное соответствие указанной строке, включая регистр.

  
  let mySkills = ['HTML', 'CSS', 'JavaScript', 'React']

  mySkills.indexOf('javascript') // -1
  

Если массив или строка пустая, метод вернет -1.

  
  let mySkills = []

  mySkills.indexOf('R') // -1  
  

indexOf() как условие

Используя метод indexOf() в условиях, например при работе с if, стоит учитывать, что если результатом проверки будет 0, код может интерпретировать это как false и вызвать нежелательное поведение.

  
  let mySkills = ['HTML', 'CSS', 'JavaScript', 'React']

  mySkills.indexOf('HTML') ? console.log('Нашел') : console.log('Не нашел')
  

При записи использовали тернарный оператор. Результатом будет Не нашел, хотя искомая строка явно присутствует. Корректнее будет сформулировать условие, сравнивая результат работы метода с -1, а не с нулём.

  
  let mySkills = ['HTML', 'CSS', 'JavaScript', 'React']

  mySkills.indexOf('HTML') >= 0 ? console.log('Нашел') : console.log('Не нашел')
  

Подсчет количества вхождений

  
  let message = 'Я обязательно запомню, как работает метод indexOf()'
  let index = message.indexOf('о')
  let count = 0
  
  while(index !== -1) {
      count++
      index = message.indexOf('о', index + 1)
  }
  
  console.log(count) // 5
  

Используя цикл while, и увеличивая позицию, с которой нужно начинать поиск, мы ищем все вхождения. При окончании поиска выводим результат в console.

Проверка на повторы

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

  
    <input type="text" id="area-input">

    <script>
    let areaInput = document.querySelector('#area-input')
    
    areaInput.addEventListener('input', function () {
        if (this.value.indexOf(',') !== -1 && this.value.indexOf(',') !== this.value.lastIndexOf(',')) {
            let index = this.value.lastIndexOf(',')
            this.value = this.value.slice(0, index) + this.value.slice(index + 1)
        }
    })
    </script>    
  

В данном коде мы с помощью indexOf() и lastIndexOf() определяем позиции первой и последней запятой, и если количество нужных знаков больше, чем необходимо, вырезаем лишние.