Indexof js: Array.prototype.indexOf() — JavaScript | MDN - Блог сумасшедшего сисадмина

Содержание

.indexOf() — JavaScript — Дока

Кратко
Как пишется
Как понять
На практике
1. Николай Лопин советует

Кратко

Секция статьи «Кратко»

Этот метод служит для поиска. Он определён для массивов и строк.

При вызове нужно передать, что искать. Вернётся индекс первого найденного элемента или -1, если ничего не нашлось.

Как пишется

Секция статьи «Как пишется»

Искомый элемент передаётся первым аргументом — array1.indexOf('иголка')

const example = ['чебурашка', 'гена', 'шапокляк', 'лариска']console.log(example.indexOf('гена'))// 1
          const example = ['чебурашка', 'гена', 'шапокляк', 'лариска']
console.log(example.indexOf('гена'))
// 1

Как понять

Секция статьи «Как понять»

Для массивов: ищет переданный элемент в массиве. Если элемент один, то возвращает индекс этого элемента. Если элементов много — возвращает индекс первого подходящего элемента. Элемента в массиве нет — вернёт -1

const haystack = ['Петя', 'Настя', 'Артур', 'Лена', 'Настя']console.log(haystack.indexOf('Лена'))// 3console.log(haystack.indexOf('Настя'))// 1console.log(haystack.indexOf('Эдуард Аркадьевич'))// -1
          const haystack = ['Петя', 'Настя', 'Артур', 'Лена', 'Настя']
console.log(haystack.indexOf('Лена'))
// 3
console.log(haystack.indexOf('Настя'))
// 1
console.log(haystack.indexOf('Эдуард Аркадьевич'))
// -1

Для строк: работает так же, как с массивами, но можно искать не только буквы в строке, но и подстроки. Например:

const haystack = 'Мама мыла раму'console.log(haystack.indexOf('а'))// 1console.log(haystack.indexOf('мыла'))// 5console.log(haystack.indexOf('ё'))// -1
          const haystack = 'Мама мыла раму'
console.log(haystack.indexOf('а'))
// 1
console.log(haystack.indexOf('мыла'))
// 5
console.log(haystack.indexOf('ё'))
// -1

На практике

Секция статьи «На практике»

Николай Лопин советует

Секция статьи «Николай Лопин советует»

🛠 Найти индексы всех подходящих элементов

Секция статьи «🛠 Найти индексы всех подходящих элементов»

Чтобы найти индексы всех искомых элементов, используют второй аргумент.

Он указывает, с какого места начинать поиск. Таким образом можно проигнорировать те элементы, которые уже нашли и начинать поиск сразу после них:

const haystack = 'мама мыла раму'let lastResult// напечатаем индексы всех букв М во фразеwhile (lastResult !== -1) {  lastResult = haystack.indexOf('м', lastResult + 1)  if (lastResult !== -1) {    console.log(lastResult)  }}
          const haystack = 'мама мыла раму'
let lastResult
// напечатаем индексы всех букв М во фразе
while (lastResult !== -1) {
  lastResult = haystack.indexOf('м', lastResult + 1)
  if (lastResult !== -1) {
    console.log(lastResult)
  }
}

🛠

indexOf() или includes() Секция статьи «🛠 indexOf() или includes()»

Не используйте indexOf() для проверки вхождения элемента в массив/строку, для этого есть метод includes().

Раньше методом indexOf() часто проверяли, есть ли элемент в массиве. Эта задача проще, индекс здесь не нужен, но других методов для этого не было.

Поэтому в старых скриптах можно увидеть такой код:

const guestList = ['Петя', 'Настя', 'Артур', 'Лена', 'Настя', 'Эммануил']const guest = // получаем откуда-нибудь имя гостяif (guestList.indexOf(guest) >= 0) {  // пускаем на вечеринку} else {  // отправляем домой}
          const guestList = ['Петя', 'Настя', 'Артур', 'Лена', 'Настя', 'Эммануил']
const guest = // получаем откуда-нибудь имя гостя
if (guestList.indexOf(guest) >= 0) {
  // пускаем на вечеринку
} else {
  // отправляем домой
}

🤖 Из-за того, что indexOf() возвращает индекс, в условии обязательно нужна проверка (>= 0 или !=

=-1).

Если так не сделать, то появится неприятный баг: мы будем пускать на вечеринку всех, кроме первого гостя в списке.

Дело в том, что JavaScript интерпретирует ненулевые числа как истину (true) и будет запускать первую ветку if. А на первом госте indexOf() вернёт 0, что считается ложным (false), и наш скрипт не пустит человека на вечеринку.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

.includes()

alt + ←

→

.length

alt + →

includes vs indexOf / Хабр

Начиная с ECMAScript 2016 в JavaScript появился новый метод includes для работы с массивами. По своей сути он очень сильно напоминает indexOf. В этой статье я хочу рассмотреть подробнее для чего был введен этод метод и в чем его отличие от indexOf.

Массивы

Итак, метод Array.prototype.includes определяет содержится ли в массиве искомое значение и возвращает true или false. Таким образом, в отличие от indexOf, который возвращает целое число, includes возвращает значение типа boolean. Это нововведение поможет разработчикам писать более чистый и понятный код.

Например, вот стандартный пример проверки того, содержится ли элемент в массиве, с помощью indexOf:

var numbers = [3, 5, 8, 11, 23, 7];
if (numbers.indexOf(1) !== -1) {
    // ...
}

Используя includes, то же самое можно написать так:

var numbers = [3, 5, 8, 11, 23, 7];
if (numbers.includes(1)) {
    // ...
}

Также при внедрении этого метода были учтены некоторые неочевидные особенности, замеченные при работе с indexOf. В отношении значений NaN поведение этого метода отличается.

Рассмотрим на примере:

var numbers = [3, 5, 8, 11, 23, 7, NaN];
if (numbers.indexOf(NaN) !== -1) {
    // Этот код не выполнится
}
if (numbers.includes(NaN)) {
    // Этот код выполнится
}

Таким образом, indexOf(NaN) всегда возвращает -1, независимо от того содержится ли это значение в массиве, а includes(NaN) возвращает true или false в зависимости от того есть этот элемен в массиве или нет.

Производительность

Оценка производительности javascript методов не такая уж очевидная вешь, так как по сути в разных браузерах одна и та же функция может быть реализована по-разному в зависимости от языка, на котором написан сам браузер. К тому же очень много зависит от компьютера, на котором делается эта оценка. Но, тем не менее, я попытался сделать небольшой анализ.

Я создал массив из 10000 целых положительных чисел и использовал для анализа сайт jsbench. github.io. В обоих случаях, для чистоты эксперимента, был использован один и тот же массив. Оценка производилась в браузерах Chrome 53 и Firefox 48.

Chrome
	includes	indexOf
элемент есть в середине массива	8,361 ops/sec ±0.38%	31,296 ops/sec ±0.65%
элемент есть в начале массива	22,043,904 ops/sec ±1.89%	136,512,737 ops/sec ±2.06%
искомого эелемента нет в массиве	4,018 ops/sec ±0.71%	95,221 ops/sec ±0.53%

Firefox
	includes	indexOf
элемент есть в середине массива	84,880 ops/sec ±0.59%	86,612 ops/sec ±1.35%
элемент есть в начале массива	34,087,623 ops/sec ±0. 99%	33,196,839 ops/sec ±0.84%
искомого эелемента нет в массиве	25,253 ops/sec ±2.75%	14,994 ops/sec ±1.16%

Получается, что в Chrome indexOf всегда работает быстрее, а в Firefox ощутимой разницы практически нет (кроме случая, когда в массиве нет искомого элемента). И поведение нового метода в Firefox кажется более логичным, так как в общем-то indexOf и includes по логике должны иметь одну и ту же вычислительную сложность.

Строки

Аналогичный метод был добавлен и для работы со строками начиная с ECMAScript 2015. Ранее в Firefox в версиях с 18 по 39 этот метод существовал под именем contains, однако из-за проблем совместимости он был переименован в includes().

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

Браузер	Массив	Строки
Chrome	47	41
Firefox	43	40
IE	нет	нет
Opera	34	нет
Safari	9	9

Index • JavaScript для нетерпеливых программистов (версия ES2022)

JavaScript для нетерпеливых программистов (версия ES2022)
Пожалуйста, поддержите эту книгу: купи это или же пожертвовать

Символ

!x
++х
х++
+х
, (запятая)
--х
х--
-х
х && у
х + у
х-у
х/у
х << у
х === у
х >>> у
х >> у
х ??= у
х ?? д
х и у
х ** у
х * у 9у
х ¦ у
х ¦¦ у
х ٪ у
=
с ? т : е
__прото__
~х

средство доступа (объектный литерал)
дополнение
Модуль AMD
выражение анонимной функции
аргумент
против параметра
Массив
Отверстие для массива
Индекс массива
Литерал массива
Массив, плотный
Массив, многомерный
Массив, разреженный
Разрушение массива
Объект, подобный массиву
ArrayBuffer
Массивы, фиксированная компоновка
Массивы, последовательность
функция стрелки
ESCII-побег
ASI (автоматическая вставка точки с запятой)
утверждать (модуль)
утверждение
оператор присваивания
асинхронный
асинхронная функция
асинхронная функция*
асинхронное ожидание
асинхронный генератор
асинхронный итеративный
асинхронная итерация
асинхронный итератор
асинхронное программирование
атрибут свойства
автоматическая вставка точки с запятой (ASI)
ожидание (асинхронная функция)
ожидание (асинхронный генератор)

базовый класс
с прямым порядком байтов
большойинт
BigInt64Array
BigUint64Array
двоичный целочисленный литерал
привязка (переменная)
побитовое И
побитовое Не
побитовое или
побитовый Xor
логическое значение
Логическое значение()
связанная переменная
перерыв

стек вызовов
обратный вызов (асинхронный шаблон)
функция обратного вызова
верблюжий чемодан
верблюжий чемодан
кейс, верблюжий
корпус, приборная панель
чехол, кебаб
, змейка
регистр, подчеркивание
улов
класс
класс
объявление класса
определение класса
выражение класса
, база
, производный от
, примесь
классов, расширение
крышка
кодовая точка
кодовый блок
принуждение
, Обещание
оператор запятой
Модуль CommonJS
сравнение по тождеству
сравнение по значению
ключ вычисляемого свойства
объединение строк
условный оператор
консоль
консоль. ошибка()
console.log()
константа
константа
функция-конструктор (роль обычной функции)
продолжить
Преобразование в [тип]
Всемирное координированное время (UTC)
копировать объект глубоко
копировать объект неглубоко

чехол для приборной панели
чехол для приборной панели
Просмотр данных
дата
формат даты и времени
десятичный литерал с плавающей запятой
десятичный целочисленный литерал
оператор декрементации (префикс)
оператор декрементации (суффикс)
глубокая копия объекта
экспорт по умолчанию
значение по умолчанию (деструктуризация)
значение по умолчанию (параметр)
оператор значения по умолчанию ( ?? )
удалить
удаление свойства
плотный массив
производный класс
дескриптор свойства
деструктивная операция
деструктуризация
деструктурирование массива
деструктурирование объекта
объект словаря
прямой вызов метода
отправленный вызов метода
разделить на оператора
подразделение
пока
динамический импорт
динамический это
динамический против статического

ранняя активация
Экма
ECMA-262
ECMAScript
Модуль ECMAScript
Эйх, Брендан
порядок следования байтов (типизированные массивы)
перечислимость
перечисляемый (атрибут свойства)
оператор равенства
Модуль ЕС
побег, ASCII
побег, кодовая точка Unicode
побег, кодовая единица Unicode
экранирование HTML
оценка()
вычисление выражения
событие (асинхронный шаблон)
цикл событий
исключение
упражнений, начало работы с
возведение в степень
экспорт
экспорт по умолчанию
экспорт, по умолчанию
экспорт, названный
выражение
расширение классов
удлиняет
внешняя итерация
извлечение метода

ложный
ложность
ложный
наконец
Массивы с фиксированной компоновкой
объект фиксированной компоновки
флагов (регулярное выражение)
Массив с плавающей запятой32
Массив с плавающей точкой64
литерал с плавающей запятой
для
ожидание
для входящих
для
свободная переменная
замораживание объекта
выполнено (состояние обещания)
объявление функции
функциональное выражение, анонимное
с именем
функция, стрелка
функция, обычная
функция, роли обычного
функция, специализированная
функция*

сбор мусора
, асинхронный
синхронный
геттер (литерал объекта)
глобальный
глобальный объект
глобальная область действия
глобальная переменная
глобальныйЭтот
по Гринвичу (время по Гринвичу)
графемный кластер
Среднее время по Гринвичу (GMT)

куча
шестнадцатеричный целочисленный литерал
подъемный
отверстие в массиве

идентификатор
идентификатор объекта
если
IIFE (немедленно вызываемое функциональное выражение)
немедленно вызванное функциональное выражение (IIFE)
импорт
импорт()
импорт, названный
импорт, пространство имен
импорт. мета
import.meta.url
импорт, динамический
импорт, статический
в
оператор приращения (префикс)
оператор приращения (суффикс)
индекс массива
Бесконечность
наследование, множественное
наследство, холост
экземпляр
экземпляр
Int16Array
Int32Array
Int8Array
целых чисел
целое, безопасное
внутренняя итерация
итеративный (асинхронный)
итеративный (синхронный)
итерация, асинхронная
итерация, внешняя
итерация, внутренняя
итерация, синхронная
итератор (асинхронный)
итератор (синхронный)

JSON (формат данных)
JSON (объект пространства имен)

Чемодан для кебаба
Чемодан для кебаба
ключевое слово

этикетка
Оператор левой смены
пусть
лексический этот
список свойств
с прямым порядком байтов
логический И
логический Не
логический или

Карта
Карта
Карта против объекта
Math (объект пространства имен)
метод
метод (литерал объекта)
метод (роль обычной функции)
, прямой
, отправлено
, извлечение
минус оператор (двоичный)
минус оператор (унарный)
смешанный класс
спецификатор модуля
, AMD
, CommonJS
многомерный массив
множественное наследование
несколько возвращаемых значений
умножение

именованный экспортный
именованное функциональное выражение
именованный импорт
именованный параметр
импорт пространства имен
NaN
узлы_модули
н/мин
нпм пакет
ноль
нулевой оператор присваивания объединения (`??=`)
нулевой оператор объединения ( ?? )
номер
Номер()

Объект
литерал объекта
против карты
против примитивного значения
Объект()
объект, копировать глубоко
объект, скопируйте неглубоко
объект, словарь
объект, фиксированная компоновка
, замораживающий
, личность
объектно-деструктурирующий
Объект. is()
восьмеричный целочисленный литерал
дополнение единиц
оператор, назначение
оператор, запятая
, значение по умолчанию ( ?? )
оператор, равенство
, нулевое объединение ( ?? )
оператор, нулевое объединение присваивания (`??=`)
оператор, пустота
обычная функция
обычная функция, роли
переопределение свойства

упаковка, н/мин
пакет.json
параметр
значение параметра по умолчанию
против аргумента
прохождение личности
передача по значению
(регулярное выражение)
в ожидании (состояние обещания)
плюс оператор (двоичный)
плюс оператор (унарный)
полифилл
полифилл, спекулятивный
понифилл
примитивное значение
примитивное значение по сравнению с объектом
личное имя
частный слот
проллифилл
Обещание
Обещание
Функция комбинатора обещаний
Обещание, состояния
Обещание. все()
Обещание.allSettled()
Обещание.любое()
Обещание.гонка()
свойств, листинг
имущество
имущество (объект)
атрибут свойства
дескриптор свойства
ключ свойства
, вычисленный
,
имя свойства
символ свойства
сокращенное значение свойства
, удаление
прототип
прототип цепи
публичный слот
общеизвестный символ

, начало работы с
указанный ключ свойства

реальная функция (роль обычной функции)
приемник
Регулярное выражение
регулярное выражение
литерал регулярного выражения
отклонено (состояние обещания)
остаточный оператор
ЗАМЕНА
реплика
Требовать JS
зарезервированное слово
остаточный элемент (деструктурирование массива)
остаточный параметр (вызов функции)
остальное свойство (объект-деструктурирование)
возвращаемых значений, кратных
Выкройка модуля раскрытия
ролей обычной функции
семантика выполнения до завершения

безопасное целое число
область действия переменной
скрипт
самостоятельно
Массивы последовательности
Комплект
Комплект
сеттер (литерал объекта)
заселено (состояние Promise)
слежка
поверхностная копия объекта
прокладка
короткое замыкание
подписанный оператор правой смены
одиночное наследование
неаккуратный режим
, частный
, общедоступный
чехол для змеи
чехол для змеи
разреженный массив
специализированная функция
, модуль
спекулятивный полифилл
распространение ( . .. ) в вызов функции
распространение в литерал массива
распространение в объектный литерал
выписка
состояний Обещания
статический
статический импорт
статических против динамических
строгий режим
строка
Строка()
подкласс
подкласс
вычитание
суперкласс
переключатель
символ
, общеизвестный
синхронный генератор
синхронный итеративный
синхронная итерация
синхронный итератор
синтаксис

шаблон с тегами
очередь задач
ТС39
Процесс TC39
ТДЗ (временная мертвая зона)
Технический комитет 39
литерал шаблона
временная мертвая зона
тернарный оператор
этот
это , динамический
это , лексический
это , значения
бросок
значение времени
раз оператор
в степени оператора
запятые в конце литералов массива
завершающих запятых в JSON
замыкающие запятые в литералах объектов
запятые в конце списка параметров
правда
правдивость
правдивый
попробовать
тип
иерархия типов
подпись типа
Типизированный массив
тип

Uint16Array
Uint32Array
Uint8Array
Uint8ClampedArray
не определено
регистр подчеркивания
подчеркивание регистр
Юникод
Кодовая точка Unicode escape
Escape-блок кода Unicode
Формат преобразования Юникода (UTF)
беззнаковый оператор сдвига вправо
UTC (Всемирное координированное время)
UTF (формат преобразования Unicode)
УТФ-16
УТФ-32
UTF-8

сохранение стоимости
переменная, связанная
переменная, бесплатная
переменная, область действия
пустота оператор

Вт

Слабая карта
Слабая карта
Слабый набор
Слабый набор
Веб-работник
, а
окно
типов оболочки (для примитивных типов)

выход (асинхронный генератор)
выход (синхронный генератор)
выход* (асинхронный генератор)
выход* (синхронный генератор)

Z (Часовой пояс Зулу)
Часовой пояс Зулу (Z)

indexOf(), find() и include() — JavaScript | by sonia dumitru

Когда использовать методы массива: indexOf(), find() и include():

Поиск элементов в простом массиве с помощью Array. prototype.indexOf()
Поиск элементов в более сложном массив с Array.prototype.find()
Определить, содержит ли массив определенное значение среди своих элементов, с помощью основа - найти элементы в массивах. Мы знаем, как хранить данные, но мы также должны иметь возможность получить их снова, когда это необходимо.
Поиск элементов в простом массиве с помощью Array.prototype.indexOf()
Описание: indexOf() сравнивает searchElement с элементами массива, используя строгое равенство (тот же метод, что и оператор === или тройное равенство).
Метод indexOf() возвращает первый индекс, по которому данный элемент может быть найден в массиве, или -1, если он отсутствует.
Первый параметр, элемент , который вы ищете, является обязательным. Вы также можете передать начальную позицию :
Если вы передаете начальную позицию после искомого элемента или если искомый элемент отсутствует в массиве, Array. prototype.indexOf() вернет -1 , чтобы сообщить вам об этом.
Поиск элементов в более сложном массиве с помощью
Array.prototype.find()
Описание: метод find выполняет функцию обратного вызова один раз для каждого индекса массива до тех пор, пока обратный вызов не вернет истинное значение . Если это так, find немедленно возвращает значение этого элемента. В противном случае find возвращает undefined .
обратный вызов вызывается для каждого индекса массива, а не только тех, которым присвоены значения. Это означает, что он может быть менее эффективным для разреженных массивов по сравнению с методами, которые обращаются только к заданным значениям.
Метод find не изменяет массив, для которого он вызывается, но функция, предусмотренная для обратного вызова , может. Если это так, элементы, обработанные find , устанавливаются до первого вызова обратного вызова . Следовательно:
- обратный вызов не будет посещать какие-либо элементы, добавленные в массив после начала вызова find .
- Если существующий, еще не посещенный элемент массива изменен с помощью обратного вызова , его значение, переданное обратному вызову , будет значением на момент find посещения индекса этого элемента.
- Элементы, которые удалены , по-прежнему посещаются.
Массив.прототип.найти() принимает элемент, который мы хотели бы найти, индекс, с которого мы хотели бы начать, и массив, и возвращает первый элемент в массиве, удовлетворяющем условию, задающему условие, указанное функцией.
Найти объект в массиве по одному из его свойств, используя функцию стрелки и деструктурирование:
Определить, содержит ли массив определенное значение среди своих элементов с помощью
Array.prototype.includes()
Описание: a логическое значение , что равно true , если значение valueToFind найдено в массиве (или в части массива, обозначенной индексом fromIndex , если он указан).
No related posts.

Indexof js: Array.prototype.indexOf() — JavaScript | MDN